To give an impression of how you could switch between different debug levels and also to see how the "AMD" approach compares to the "goog" approach, I re-compiled Erik's "VanillaSDK" demo with Jangaroo 3 to AMD-style JavaScript output. This is the output format Mike Schmalle will be implementing as an alternative emitter for FalconJx. (Sorry I had to use Jangaroo to build this demo now; Mike is working hard on the FalconJx AMD emitter and eventually, the result will be much better than Jangaroo, since Falcon is the better AS3 compiler.)
Here is the result: http://www.jangaron.net/vanilla-sdk-poc/ In total, there are four variants. The first and last version correspond to Erik's "intermediate JS" and "release JS" versions. To show the full bandwidth of debug levels, I added "linked" and "linked and minified ... (bootstrapped)". The former is a build where all AMD modules are merged into a single file, but not minified. The latter is a build where all AMD modules are merged and minified, but this one file is still loaded via RequireJS. So if you really want only one big JS file loaded with one request, you have to use the "release JS" version. The resulting release version (9.5 kb) is quite similar in size to the "goog" version (11.5 kb), although it has only been minified with SIMPLE_OPTIMIZATIONS, while the "goog" version uses ADVANCED_OPTIMIZATIONS. I think this underpins my point that starting from standard JavaScript code respecting rules like "avoid accessing global variables", you can do without Google Closure Compiler's ADVANCED_OPTIMIZATIONS. But of course, we need a larger example before I'd dare to generalize this conclusion. All three "debuggable" versions actually load the same HTML page "debug.html", the difference is coded into the URL hash "joo.debug" and evaluated by the bootstrap script "new.js": - #joo.debug=true or #joo.debug -- load each class by a single request, so that you can easily find them in any (good) JavaScript debugger. Each file contains full white-space, comments, and non-minified JavaScript code. - #joo.debug=linked -- load all classes by one single request, but still with full white-space, comments, and non-minified. - #joo.debug=false or no hash -- load all classes by one single request, minified. All corresponding artifacts are automatically created as part of the build process. Of course, you can choose to only build the ones you actually need. *Source Maps* For the #joo.debug=true version<http://www.jangaron.net/vanilla-sdk-poc/debug.html#joo.debug>, Jangaroo's experimental JavaScript source map support has been used. As far as I know, the only browser that currently supports source maps is Chrome. So if you want to see it in action, please use Chrome. And you might have to enable it first: 1. In the developer tools (F12), click on the button with the gear icon on the bottom right 2. In the settings dialog that appears, set the check mark in section *Sources*, labelled "Enable source maps" 3. Reload the page Now, in the "Sources" tab, when you open the "navigator" (arrow button top left), you'll find an *.as file next to each *.js file that has been generated from AS. Try and set a breakpoint e.g. in Example.as, line 66, inside the first click handler method. Then click on the demo button labelled "Click me". The debugger should stop at your breakpoint and show the corresponding Call Stack, Scope Variables, and so on. You can now step through your ActionScript code, and the corresponding JavaScript code gets executed. Magic, isn't it? And it can be done for FalconJx, too! The vision is to combine the minified or at least the linked version with source maps, so that actually only one JS file is loaded, but is appears in the debugger as many AS files. To achieve this, we will have to combine the source map generated by our compiler and the source map generated by the JS minifier into a direct mapping. Using the source maps API that GCC provides, this should be quite straight-forward. Have fun! -Frank-
