Amber Smalltalk - Creating a single .js file for deployment

Question

I've seen this topic come up a couple times, but I don't think I've seen any definitive solution posted.

I've tried the route of combining all my Foo.deploy.js, Bar.deploy.js into a single .js file, and then including that in the loadAmber() call. This /seems/ to work reasonably well, but the majority of the download size still comes from Amber internals.

In my application, the worst offenders in size are:

• 200K - jQuery UI
• 95K - Kernel-Collections
• 90K - jQuery
• 87K - Kernel-Objects
• 50K - Canvas
• 40K - MyApp
• 20K - Kernel-Classes

I can't do too much about the size of jQuery UI, but I can do a lot about the size of the Amber core, and the number of HTTP requests needed to fetch them. The only problem is I cannot figure out how to tell Amber not to auto-matically fetch Kernel-Objects.deploy.js, etc.

Has anybody managed to package their entire Amber javascript into a single .js file successfully?

• R. Tyler Croy

---

Code: http://github.com/rtyler Chatter: http://twitter.com/agentdero

Answer 1

The Amber compiler can do quite a bit of stuff:

http://github.com/NicolasPetton/amber/blob/master/bin/amberc#L18-90

The following command will compile jQuery and the listed packages and generate amber-deploy.js:

./bin/amberc -l js/lib/jQuery/jquery-1.6.4.min,Kernel-Objects.deploy,Kernel-Classes.deploy,Kernel-Methods.deploy,Kernel-Collections.deploy,Kernel-Exceptions.deploy,Canvas.deploy amber-deploy

Note the lack of spaces between listed filenames.

Also - you can download the Google Closure compiler http://closure-compiler.googlecode.com/files/compiler-latest.zip and put it in your home directory (~/compiler.jar) and then run (notice the -O option):

./bin/amberc -O -l js/lib/jQuery/jquery-1.6.4.min,Kernel-Objects.deploy,Kernel-Classes.deploy,Kernel-Methods.deploy,Kernel-Collections.deploy,Kernel-Exceptions.deploy,Canvas.deploy amber-deploy

Then in your html you can just put:

<script src='amber-deploy.js'></script>

Answer 2

Starting in Amber 0.13, you can use the RequireJS optimizer to create one minimized JS file, including your own code, Amber, and all dependencies.

To load Amber 0.13 alpha:

(sudo) npm -g install amber-cli@~0.13.0  

The key is the build file. All RequireJS setup that used to go directly into index.html goes here. For example, a slightly customized app.build.js:

({
    mainConfigFile: "config.js",
    paths: {
        ... skipped items there by default
        'lib/jquery-migrate': 'bower_components/jquery/jquery-migrate'
    },
    "shim": {
        'lib/jquery-migrate': [ 'jquery' ]
    },
    include: [
        'amber/requirejs/require.min',
        'amber/deploy',
        'my-namespace/MyPackage',
        'lib/jquery-migrate'
    ],
    out: "all-in-1.js"
})

Now, running r.js -o app.build.js will now produce a single minified JS file named all-in-1.js, which is the only file you need to load from index.html

Answer 3

I believe the incantation is now supposed to be like this -

./bin/amberc -m Counter st/Examples.st Onefile

... where I'm creating a single file distribution for the "Counter" example without actually instantiating a counter. The output file will be "Onefile.js" which contains the necessary amber kernel classes as well as the Counter example class.

However, when I try to load Onefile.js, I get multiple "Maximum call stack size exceeded" errors in the JS console in Chrome and Safari on MacOSX. While I feel the "one file to deploy" scenario is close to reality, there are still some warts to be healed.

Btw adding the "-O" flag to the above command like will result in the output file being passed through the google closure compiler whose path is expected to be in "~/compiler.jar". i.e. -

./bin/amberc -O -m Counter st/Examples.st Onefile

will result in a minimized single JS output file, which is nice.

Answer 4

Amber version 0.13 released

Amber Version 0.13 has been released.

In this version the command

amber init

creates creates among a number of other files a Gruntfile.js (http://gruntjs.com/).

With

 grunt deploy

on the command line your JavaScript file called the.js is changed to contain everything which is needed for deployment.

This means for deployment you only need

• index.html
• the.js

to put in the target directory.

the.js contains only JavaScript. No Smalltalk sources.

With

grunt develop

you switch back to development mode. You get a short version of the.js

Source: https://github.com/amber-smalltalk/amber/wiki/Deploying-Amber