Integrating Third-party JavaScript Libraries

Hello Richard

Work in progress which shows how to integrate processing.js into Amber
v 13 is HeSe's repo

<a href="https://github.com/HeSe/amber-processingJs" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNF68XLMdx18AVgMQiWbvHoU8nvMEA';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNF68XLMdx18AVgMQiWbvHoU8nvMEA';return true;">https://github.com/HeSe/amber-processingJs

where Sebastian H. got it working on Amber v013 yesterday.

My fork

<a href="https://github.com/hhzl/amber-processingJs" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Fhhzl%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNHUsTpGOR9HWBiNn5Az6cSG74TbyQ';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Fhhzl%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNHUsTpGOR9HWBiNn5Az6cSG74TbyQ';return true;">https://github.com/hhzl/amber-processingJs


demonstrates that in the master branch there should be no
'bower_component' and 'node_modules' directory (node_modules should be
removed completely).

On-line in the gh-pages branch

<a href="http://hhzl.github.io/amber-processingJs" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Fhhzl.github.io%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNG5oOqf5XqGVMlIIXNtXOj2ua8EKA';return true;" onclick="this.href='http://www.google.com/url?q\75http%3A%2F%2Fhhzl.github.io%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNG5oOqf5XqGVMlIIXNtXOj2ua8EKA';return true;">http://hhzl.github.io/amber-processingJs


I think in the end it is straightforward but it may take some time to
get to this conclusion....

More documentation and a tutorial is needed.

In this case it needed

    amber init

    bower install processing --save

    npm install

    bower install

Manual creation of a processing.amd.json

   <a href="https://github.com/HeSe/amber-processingJs/blob/master/processing.amd.json" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs%2Fblob%2Fmaster%2Fprocessing.amd.json\46sa\75D\46sntz\0751\46usg\75AFQjCNFdi7-tRb623Y-ZXzE7WCMDwhAXVg';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs%2Fblob%2Fmaster%2Fprocessing.amd.json\46sa\75D\46sntz\0751\46usg\75AFQjCNFdi7-tRb623Y-ZXzE7WCMDwhAXVg';return true;">https://github.com/HeSe/amber-processingJs/blob/master/processing.amd.json

file.

    grunt devel

    amber serve

Which library do you want to add to Amber?

Please ask on the ML until there is better documentation.

--Hannes

On 12/11/14, Richard Eng <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="R5eQj8rGwIYJ" onmousedown="this.href='javascript:';return true;" onclick="this.href='javascript:';return true;">horrido...@...> wrote:

> I'm not clear on how to integrate any of the multitude of third-party
> JavaScript libraries into Amber. Can someone point the way? Thanks.
>
> Hopefully, it's simple and straightforward...  ;-)
>
> --
> You received this message because you are subscribed to the Google Groups
> "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to <a href="javascript:" target="_blank" gdf-obfuscated-mailto="R5eQj8rGwIYJ" onmousedown="this.href='javascript:';return true;" onclick="this.href='javascript:';return true;">amber-lang+...@googlegroups.com.
> For more options, visit <a href="https://groups.google.com/d/optout" target="_blank" onmousedown="this.href='https://groups.google.com/d/optout';return true;" onclick="this.href='https://groups.google.com/d/optout';return true;">https://groups.google.com/d/optout.
>

Yes Richard,

Amber has near transparent access to JavaScript objects already and if not enough you can use a method with actual JavaScript as Phil suggested

Take a look here for more:

<a href="https://github.com/amber-smalltalk/amber/wiki/From-smalltalk-to-javascript-and-back" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Famber-smalltalk%2Famber%2Fwiki%2FFrom-smalltalk-to-javascript-and-back\46sa\75D\46sntz\0751\46usg\75AFQjCNFEoAvzKjJ20Ozb5129ypzW2j5ZSw';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Famber-smalltalk%2Famber%2Fwiki%2FFrom-smalltalk-to-javascript-and-back\46sa\75D\46sntz\0751\46usg\75AFQjCNFEoAvzKjJ20Ozb5129ypzW2j5ZSw';return true;">https://github.com/amber-smalltalk/amber/wiki/From-smalltalk-to-javascript-and-back

What’s great about the proxy is that in the best cases you don’t actually need to do any integration and just bower install and start using it as any other js app

As another example, in <a href="https://github.com/flow-stack/flow" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Fflow-stack%2Fflow\46sa\75D\46sntz\0751\46usg\75AFQjCNF5BwEOtBIYcI8Y1bU-VPlQaOLcBg';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Fflow-stack%2Fflow\46sa\75D\46sntz\0751\46usg\75AFQjCNF5BwEOtBIYcI8Y1bU-VPlQaOLcBg';return true;">flow we’re using <a href="http://requirejs.org/" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Frequirejs.org%2F\46sa\75D\46sntz\0751\46usg\75AFQjCNFDI2Q1fZ57rsw6Xx-IUxB4qfGZQQ';return true;" onclick="this.href='http://www.google.com/url?q\75http%3A%2F%2Frequirejs.org%2F\46sa\75D\46sntz\0751\46usg\75AFQjCNFDI2Q1fZ57rsw6Xx-IUxB4qfGZQQ';return true;">require with its text plugin for the TemplateController and <a href="http://rivetsjs.com/" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Frivetsjs.com%2F\46sa\75D\46sntz\0751\46usg\75AFQjCNE1own-2qHQU6ZMz1xecHNCi_zLbQ';return true;" onclick="this.href='http://www.google.com/url?q\75http%3A%2F%2Frivetsjs.com%2F\46sa\75D\46sntz\0751\46usg\75AFQjCNE1own-2qHQU6ZMz1xecHNCi_zLbQ';return true;">RivetJS to provide the BindingController of the two-way data binding feature

On Dec 12, 2014, at 2:38 PM, Richard Eng <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="9hPZnrs_Rt4J" onmousedown="this.href='javascript:';return true;" onclick="this.href='javascript:';return true;">horrido...@...> wrote:

I don't have any particular library in mind that I want to add to Amber. But given that Amber compiles to JS, I imagine a lot of Amber developers would want to take advantage of the multitude of JS libraries that is available in web development. Making this easy for them should be a most important goal.

I like Phil's suggestion. It sounds really easy.

On Thursday, 11 December 2014 10:52:11 UTC-5, Hannes wrote:

Hello Richard 

Work in progress which shows how to integrate processing.js into Amber 
v 13 is HeSe's repo 

<a href="https://github.com/HeSe/amber-processingJs" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNF68XLMdx18AVgMQiWbvHoU8nvMEA';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNF68XLMdx18AVgMQiWbvHoU8nvMEA';return true;">https://github.com/HeSe/amber-processingJs 

where Sebastian H. got it working on Amber v013 yesterday. 

My fork 

<a href="https://github.com/hhzl/amber-processingJs" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Fhhzl%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNHUsTpGOR9HWBiNn5Az6cSG74TbyQ';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2Fhhzl%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNHUsTpGOR9HWBiNn5Az6cSG74TbyQ';return true;">https://github.com/hhzl/amber-processingJs 


demonstrates that in the master branch there should be no 
'bower_component' and 'node_modules' directory (node_modules should be 
removed completely). 

On-line in the gh-pages branch 

<a href="http://hhzl.github.io/amber-processingJs" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Fhhzl.github.io%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNG5oOqf5XqGVMlIIXNtXOj2ua8EKA';return true;" onclick="this.href='http://www.google.com/url?q\75http%3A%2F%2Fhhzl.github.io%2Famber-processingJs\46sa\75D\46sntz\0751\46usg\75AFQjCNG5oOqf5XqGVMlIIXNtXOj2ua8EKA';return true;">http://hhzl.github.io/amber-processingJs 


I think in the end it is straightforward but it may take some time to 
get to this conclusion.... 

More documentation and a tutorial is needed. 

In this case it needed 

    amber init 

    bower install processing --save 

    npm install 

    bower install 

Manual creation of a processing.amd.json 

   <a href="https://github.com/HeSe/amber-processingJs/blob/master/processing.amd.json" target="_blank" onmousedown="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs%2Fblob%2Fmaster%2Fprocessing.amd.json\46sa\75D\46sntz\0751\46usg\75AFQjCNFdi7-tRb623Y-ZXzE7WCMDwhAXVg';return true;" onclick="this.href='https://www.google.com/url?q\75https%3A%2F%2Fgithub.com%2FHeSe%2Famber-processingJs%2Fblob%2Fmaster%2Fprocessing.amd.json\46sa\75D\46sntz\0751\46usg\75AFQjCNFdi7-tRb623Y-ZXzE7WCMDwhAXVg';return true;">https://github.com/HeSe/amber-processingJs/blob/master/processing.amd.json 

file. 

    grunt devel 

    amber serve 

Which library do you want to add to Amber? 

Please ask on the ML until there is better documentation. 

--Hannes 

On 12/11/14, Richard Eng <horrido...@<a href="http://gmail.com/" target="_blank" onmousedown="this.href='http://gmail.com/';return true;" onclick="this.href='http://gmail.com/';return true;">gmail.com> wrote: 

> I'm not clear on how to integrate any of the multitude of third-party 
> JavaScript libraries into Amber. Can someone point the way? Thanks. 
> 
> Hopefully, it's simple and straightforward...  ;-) 
> 
> -- 
> You received this message because you are subscribed to the Google Groups 
> "amber-lang" group. 
> To unsubscribe from this group and stop receiving emails from it, send an 
> email to amber-lang+...@<a href="http://googlegroups.com/" target="_blank" onmousedown="this.href='http://googlegroups.com/';return true;" onclick="this.href='http://googlegroups.com/';return true;">googlegroups.com. 
> For more options, visit <a href="https://groups.google.com/d/optout" target="_blank" onmousedown="this.href='https://groups.google.com/d/optout';return true;" onclick="this.href='https://groups.google.com/d/optout';return true;">https://groups.google.com/d/optout. 
> 

-- 
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to <a href="javascript:" style="font-family:Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank" gdf-obfuscated-mailto="9hPZnrs_Rt4J" onmousedown="this.href='javascript:';return true;" onclick="this.href='javascript:';return true;">amber-lang+...@googlegroups.com.
For more options, visit <a href="https://groups.google.com/d/optout" style="font-family:Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" target="_blank" onmousedown="this.href='https://groups.google.com/d/optout';return true;" onclick="this.href='https://groups.google.com/d/optout';return true;">https://groups.google.com/d/optout.