Jangaroo at FlashCodersNY

Tyler Larson of FlashCodesNY asked us whether we'd be interested to present and discuss Jangaroo on one of their weekly meetings in Manhatten. The event took place on Wednesday 17th of November in Manhattan, while Andreas and I were connected via live streaming from Hamburg. Well, our time zone offset is not really ideal for meetings in the late afternoon in New York, but with lots of coffee and adrenaline, we hopefully managed to give an exciting presentation of what Flash coders can do with Jangaroo.

After showing some general slides about Jangaroo, we went right into coding with the brand new Jangaroo version 0.7.12. Using IntelliJ IDEA 9 as the cockpit for development, we showed how to import and build a Jangaroo Maven project. Examples of Jangaroo-Flash projects were the well-known Box2DFlashAS3 Jangaroo port and a Jangaroo version of AS3 Lemmings.
Most attendees liked the idea of being able to deploy Flash applications to the browser without a FlashPlayer plugin. However, they were also concerned about performance especially on mobile devices (iOS JavaScript and canvas performance currently only suffices for quite simple applications) and API completeness, correctness and compatibility. One feedback concerning missing AS3 features in Jangaroo was that against our previous assumption, some developers like and use E4X quite a lot. Also better support for annotations is important for using certain Flash/Flex libraries, e.g. FlexUnit 4.

To run Flash code directly in the browser, Jangaroo not only has to compile ActionScript 3 to JavaScript, but also all Flash APIs have to be re-implemented. While the documentation is under a Creative Commons license and can be reused, the implementation is not open. One central feature of Flash are the graphics, which can be emulated in the browser by using HTML5's canvas. Our library "jooflash" does exactly that. This is a big effort.We challanged all FlashCodersNY and of course any other Flash coder enthusiastic about Open Source to contribute to the jooflash library. jooflash is available on github, so please go ahead, fork, code, and do a pull request!
In the session, there were many in-depth questions about how to debug Jangaroo code, how to use other IDEs, and many more, which indicated great interest in the technology.
For example, one very interesting new topic was whether multiple embedded Jangaroo "Flash objects" on the same page are possible and how they behave. The answer is yes, you can run many Jangaroo applications on the same page. Usually, all code is loaded directly into the page, leading to shared classes, but also to shared static variables. If this is not what you want, simply load each application in an iframe. A more elegant solution that shares code, but not state, would require changes in the Jangaroo Runtime.

Although only virtually present, we felt really welcome and were quite amused when we were asked the final question: "When was the last time you stayed up until 3 o'clock in the morning?"
Thanks FlashCodersNY, it was worth it!

Jangaroo 0.7.12: More AS3 Features, even for IE9

What's new in Jangaroo 0.7.12?

We are proud to present our latest Jangaroo release with many improvements and new features in several different areas.
Our last blog post is a while ago, but in the meantime, we delivered several intermediate releases and used light-weight Twitter announces (just follow @Jangaroo).

General

• github
  Jangaroo is on github now!
  Check out Jangaroo Tools (compiler, Maven plugins, IDEA plugin) from https://github.com/CoreMedia/jangaroo-tools.
  Find Jangaroo JavaScript wrapper APIs (browser API, Ext JS, CKEditor, soundmanager 2) and libraries (URI utils, JooUnit, JooFlash) at https://github.com/CoreMedia/jangaroo-libs.
  
• Maven Central
  Since version 0.7.9 you can use Jangaroo from Maven without specifying any <repository> or <pluginRepository> now, so the POMs get even simpler. This is possible because all new Jangaroo Maven artifacts are deployed to Maven Central. Sonatype kindly offers this service to all Open Source projects. The old Jangaroo Maven repository still exists to host the old versions.
  
• Compiler and Runtime Version in Generated Code
  The compiler now adds version information, so that the Jangaroo Runtime can check compatibility of generated JavaScript code. A class runtimeApiVersion/compilerVersion is compatible with the current Runtime if
  
  
  • the runtimeApiVersion matches the Runtime's runtimeApiVersion exactly and
  • the compilerVersion is lower or the same as the Runtime's compilerVersion.
  The idea is that runtimeApiVersion is only incremented when the contract between compiler and runtime changes. Thus, you may use library code compiled with an older compiler together with a runtime plus your code compiled with a later compiler. This may be important if you want to use a library and a new compiler feature, but the library is not yet available compiled with the latest compiler version. As long as we release all Jangaroo libraries ourselves, this may be academic, but this situation is bound to change sooner or later.
  
• Cyclic Static Dependency Detection
  The Runtime now logs a warning if a cyclic static initializer dependency is detected. This happens if one class triggers initializing another class and the other class directly or indirectly triggers initializing the first class, which is already in progress. This situation does not have to cause problems, but the first class is already used while it is not yet fully initialized, so e.g. members might still be "undefined". Clean code should not contain such initialization cycles.
• IntelliJ IDEA 9 Plugin
  As always, the Jangaroo Language IDEA plugin has been updated to use the latest compiler. In IDEA, simply go to Settings | Plugins | Available, search for Jangaroo Language, and click the "Download & Install" or "Update Plugin" button. After restarting IDEA, you can import Jangaroo Maven projects and enjoy code completion, fast compile-and-deploy turn-around ("Make Project"), and instant static type checking.

Newly Supported AS3 Features

• Full trace() Compatibility and More
  In previous Jangaroo versions, trace() only took a single parameter to print to the JavaScript console. However, in AS3, trace takes arbitrary parameters and joins them to a string (using space as separator). We now implement exactly this method signature and semantics.
  To also take advantage of Firebug's different console log levels, indicated through icons, without changing the method signature, we use the following convention: If you start your trace output with one of [LOG], [INFO], [WARN] or [ERROR], the corresponding Firebug console method (log(), info(), warn() or error()) is invoked with the remainder of the message. For other environments, the string is printed as-is.
  
• Variable Default Values
  Depending on their type, class variables (fields) are initialized to standard values as defined in the AS3 language specification (see bottom of page). Note that this feature is only implemented for class variables, including statics, but not yet for local variables.
  
• Helper Classes
  Out-of-package helper classes, i.e. non-public class definitions contained in the source file of a public class, are now fully supported. Unfortunately, I could not find any official Adobe reference documentation on helper classes, so please refer e.g. to this blog post on helper classes .
  
• Annotations
  Basic support for annotations, i.e. meta data in square brackets added to classes or methods, has been added to the Jangaroo compiler and runtime. Since we do not yet fully implement flash.utils.describeType(), the only way to query meta data at runtime is through a Jangaroo-specific API which is subject to change. If you want to give it a try, find the meta data for a class using the following code:
  

  var metadata:Object =
    joo.SystemClassDeclaration(SomeClass['$class']).metadata;
  

  To retrieve the metadata of a public class member, use the following pattern:
  

  var memberMetadata:Object =
    joo.SystemClassDeclaration(SomeClass['$class'])
    .getMemberDeclaration("public", "someMember").metadata;
  

  In both cases, the according annotation is transformed to an Object straight-forwardly, e.g.
  

  [SWF(width=465, height=465,
       backgroundColor=0, frameRate=15)]
  

  results in the metadata object
  

  {SWF:{width:465, height:465,
        backgroundColor:0, frameRate:15}}
  

• as Operator
  Jangaroo has been supporting as for quite some time, but so far, it was not transformed into any code (only comments in debug mode).
  Now, as is implemented with its original AS3 semantics, i.e. checking the object's type and evaluating to null if there is no match. Be aware that this changes semantics of your code, for example if you used as to cast to a type to call some method, which might have worked at runtime without the object actually being an instance of the type. In such cases, you can fall back to the type cast syntax (Type(expr)), which still generates comments only. Be warned that this code might someday throw a TypeError when using a later Jangaroo release.
  

Browser Compatibility

• trace() in IE
  trace() now also works with Internet Explorer's console. It already worked before with Firefox with Firebug, WebKit, Opera, and any browser using Firebug light.
  
• Property Accessor Functions in IE9
  So far, Jangaroo supported AS3 properties (function get/set) in WebKit, Firefox and Opera, but not in any version of Internet Explorer. IE9 is the first to implement custom properties accessor functions for any JavaScript object. IE8 already introduced the ECMAScript 5 methods to define properties, but they were only implemented for DOM objects. Thus, Jangaroo only supports property accessor functions in IE9.
  To simulate this feature also in older IE versions is a much harder task, but still we might tackle it later (see discussion on Jangaroo User Group).
  
• Workaround for IE9 Crash
  Jangaroo stores class meta data under the expando property $class of the class's constructor function. Even for built-in classes, when used from Jangaroo code, the Runtime attaches this property. So far, this approach worked well with IE, but IE9 beta crashed (!) when trying to run our Box2D demo.
  After intensive debugging, I figured out that IE9 does not like the $class property of built-in class TypeError being accessed. With some more digging into, the real source revealed itself: If in IE9 document mode, you set any expando property on the built-in Error class and query it through a subclass (like TypeError), IE9 beta crashes. Comprising only 21 characters, this might actually be the shortest JavaScript "code of death" for IE9:
  

  Error.x=1;TypeError.x
  

  The workaround for Jangaroo is not to set $class on the Error class, but Microsoft will have to fix this bug anyway, or there will be lots of Websites with links that say: "To crash IE9, please click here."
  
• @-Properties in IE
  Respect that IE does not like properties starting with @, and quote them.
  

Bug Fixes, Improvements and API Changes

• fixed a minor bug in regular expressions syntax and improved parser error messages
• improved class initialization, which was sometimes triggered eagerly when not necessary
• cleaned up Runtime logging in debug mode: log class initialization instead of class loading
• Introduced joo.boundMethod() in favor of Function.prototype.bind(). See its ASDoc for details.
• overhauled joo.ResourceBundleAwareClassLoader API. See its ASDoc for details.

Jangaroo Libraries

Together with a new release of the Jangaroo tools, we always release all Jangaroo libraries, too. Besides being recompiled with the latest compiler version, there are also many updates and new features.

• Flash Compatibility jooflash
  This library re-implements the Flash APIs in the browser, using HTML5 features like canvas. It is still rather incomplete, but nevertheless suffices for demos like flash-lines as well as quite complex applications like Box2DFlashAS3.
  
• Network Utilities jangaroo-net
  This new module contains utilities for URI parsing, formatting, relativizing and resolving functionality according to RFC 3986.
  
• Ext JS ActionScript API ext-as
  The library Ext AS is an ActionScript 3 wrapper for Ext JS 3.2.2, so you can do Ext coding with code completion and type checks while keeping a fast turn-around.
• Many more libraries, which we will cover in a future blog post.

As always, comments, questions, corrections, praise etc. are highly welcome! Why not contribute by issuing pull requests on github to include your bug fixes?

Andreas and Frank