Jangaroo on The Flex Show

Edit: On 08/13/2010, I corrected some outdated information using strike-through and italics.
A couple of days ago, Jeffry Houser and John Wilker of The Flex Show gave me the chance to talk about Jangaroo. Thank you again! Today, the episode has been published, so I'll repeat some of the things mentioned in the interview here and provide some updated information you may need to get started with Jangaroo.
John and Jeffry asked for the differences between AS3 and Jangaroo, which are documented here.
You can find the Flash / Jangaroo demo mentioned in the interview here. It is an example of how to use Jangaroo to run a Flash demo without a Flash plugin. The AS3 source code, borrowed from Andre Michelle, is compiled to JavaScript with the Jangaroo compiler, using the Jangaroo Flash Library (which is still quite incomplete, but suffices for this demo). With only a few lines of JavaScript, that code is loaded and run in any browser supporting the HTML5 canvas element (i.e. not IE). If you are connected to the Internet and your browser has a Flash plugin, you can also see the original demo running in a Flash player at the right side. Don't they look like twins?

My personal project, the game "Jangaron", completely developed using Jangaroo, is located at http://www.jangaron.net.

In the interview, I mention the Maven build process. Since the information on our Web page is not really up-to-date (shame on me), I'll step you through getting started with the demo / example I mentioned.

1. Download and install Maven 2.2.1.
2. Download and unpack the demo source code.
3. Point a command line to the directory where you unpacked the demo source code and run
   mvn package
   If this is your first Maven build, you have to be online and it may take a while.
4. When the build process has finished successfully, a full Web application has been created under target/flash-lines-0.1.1-SNAPSHOT. Simply open the following file in any browser but IE (alas: no canvas!):
   target/flash-lines-0.1.1-SNAPSHOT/index.html

If you want to play around with the demo, I recommend using IntelliJ IDEA 8.1.4 9.0.x Ultimate (where x > 1 for the Jangaroo plugin to work!). They offer a 30 day trial, and if you want to use IDEA to contribute to the Jangaroo project, there also is a free Open Source license which can be obtained by applying via mail.
Note that the Jangaroo plugin is currently not compatible with IDEA 9 -- the update is in progress, stay tuned!
If you'd rather use a free, Open Source IDE, since there is no free AS3 support for Eclipse yet, I recommend Flash Develop. I'm not an expert for FD, but I managed to edit Jangaroo source code with FD, and it felt quite nice. I'm sure the FD guys will help you getting started!

Getting started with IDEA 8 9 and Jangaroo is really simple and consists of the following steps:

1. Install the Jangaroo Language Plugin (see below).
   
2. Import the demo Maven project (see below). Only do this after installing the plugin, as it also plugs into IDEA's Maven import process!

In detail, installing the Jangaroo Language Plugin:

1. Open "Settings", "Plugins".
2. Select the "Available" tab.
3. Find the "Jangaroo Language" plugin. As of today, latest version is 0.3.22 9.0.7.0.0.
4. Right-click, "Download and Install".
5. IDEA asks you to let it restart. Do so.

Importing the demo Maven project:

1. Create a new project (from the start screen or "File", "New Project").
2. Select "Import from external model", "Next".
3. Select "Maven", "Next".
4. Select the root directory of the downloaded demo sources (the one that contains the pom.xml), "Next".
5. The only Maven project found is preselected. "Next".
6. Confirm name and project with "Finish".
7. After the import is finished, in the "Maven Projects" window, click "Download artifacts" (the third button in "Maven Project" window's top toolbar). After that, the AS3 code should be "green" (or "yellow", but not "red").

You have to build the Web application once using Maven as described above or from inside IDEA as follows. In the "Maven Projects" window, you open the root node of the tree, then "Lifecycle". Find "package" and start (click green arrow, you can also double-click "package" right away).
After that, you can use IDEA's make process to a) get a quicker turn-around and b) jump to error locations directly with a double-click. Use "Make Project" (Ctrl-F9) to build incrementally, which is way faster than a Maven build and provides better compiler error messages. After building, simply reload the page in your browser. You may need to reload without cache (Ctrl-R) or even clear the browser cache for changes to take effect. For Firefox, there is a nice plugin for that called "Clear Cache Button".

Now, you can develop a JavaScript based Web application with a level of convenience never achieved before. The key to that is that ActionScript, as a typed language, gives the IDE far more options to offer correct completions and refactorings than JavaScript. Go ahead a try IDEA's completion (Ctrl-space), quick documentation lookup (Ctrl-Q), parameter info (Ctrl-P), or goto declaration (Ctrl-B). Try rename refactoring or "introduce variable". Granted, not all refactorings known from Java are yet available, but Jetbrains are continuously improving AS3 support. Enjoy!

If you have any problems or questions, feel free to comment here, post in the Jangaroo developer group, or contact us directly.

Jangaroo 0.3: Amplified ActionScript 3 Compatibility

It's been quite a while, but eventually, I am proud to announce Jangaroo 0.3, featuring highly improved ActionScript 3 compatibility and better build and deployment support:

• interfaces, is
• type casts (as and support for the legacy syntax)
  
• bound methods (get this right!)
• no more need to always use this.x instead of x
• *-imports
• fully AS3 compatible Array class
• include directive
  
• annotations (syntax only)
  
• getter and setter methods (unfortunately not in IE)
  
• automatic loading of dependent classes
  
• Maven plugin provides Jangaroo with a flexible and powerful build system
  

Actually, many of these features were already introduced with the 0.2.x versions, but these were only released in the Jangaroo Maven repository. Now, the main effort was to round things off and update all documentation, so please go ahead and re-visit the Jangaroo Web site to find an updated story ("JavaScript 2 is dead, long live ActionScript 3!") and many new technical details.
Jangaroo Tool Support
Jangaroo has always used a subset of AS3, so that all AS3 tools like asdoc and IDEs can be used with Jangaroo code. As mentioned before, IntelliJ IDEA 8 supports ActionScript 3 and thus Jangaroo very well. To top that, we have implemented a Jangaroo IDEA plugin that will be released in the near future.
Porting AS3 Libraries to Jangaroo
Now that we have added all these nice AS3 language features, it is possible to translate most existing AS3 code with the Jangaroo compiler and run it in the browser (without any Flash plug-in!).
For example, we work on a port of FlexUnit and, with very few code changes, can already run its self-test-suite successfully in the browser. Our FlexUnit variant (of course called JooUnit!) will be released shortly, and some of the changes (missing semicolons, mixed DOS/UNIX line end encodings, asdoc glitches) will be submitted back to FlexUnit's main branch.
Of course, making the browser understand AS3 natively is only half the truth: Most AS3 code relies on standard libraries, namely Adobe's Flash API. Thus, another running project is to re-implement the Adobe Flash 9 API in Jangaroo as an adapter to native browser APIs (including canvas for drawing), so that most Flash code and even programs that draw and animate can be run, and as always when using Jangaroo: without a Flash plugin, thus seamlessly embedded into any HTML page!
Based on the Flash API, we recently also managed to compile the whole open source Flex 3.3 framework after some Jangaroo-friendly changes, but it is still quite some way to go until it would actually work, so we hope to get you ActionScript whiz people to contribute soon...
Have fun with a new way of experiencing JavaScript and ActionScript 3! We can't wait for your feedback!

Sneak preview of the Jangaroo Maven plugin

Good news for Maven2 users: with the introduction of the jangaroo-maven-plugin, it will soon be easier than ever to compile Jangaroo sources as part of your build process.

The plugin is an alternative to the provided Ant task and will be part of the next Jangaroo tools release. In the meantime you can already try the 0.1.2-SNAPSHOT version from the Jangaroo snapshot repository. The following pom.xml demonstrates how to use the plugin to build the helloWorld example, which is included with the Jangaroo distribution. Simply create a file called pom.xml in the root directory of the example (the one containing the build.xml file) and paste the following to it:

<project xmlns="http://maven.apache.org/POM/4.0.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                            http://maven.apache.org/maven-v4_0_0.xsd">
 <modelversion>4.0.0</modelversion>
 <groupid>net.jangaroo.examples</groupid>
 <artifactid>hello-world</artifactid>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>hello-world-example</name>

 <pluginrepositories>
   <pluginrepository>
     <id>jangaroo</id>
     <name>Jangaroo repository</name>
     <url>http://repo.jangaroo.net/maven2</url>
   </pluginrepository>
   <pluginrepository>
     <id>jangaroo-snapshots</id>
     <name>Jangaroo repository</name>
     <url>http://repo.jangaroo.net/maven2-snapshots</url>
     <snapshots>
       <enabled>true</enabled>
     </snapshots>
   </pluginrepository>
 </pluginrepositories>

 <build>

   <plugins>
     <plugin>
       <groupid>net.jangaroo</groupid>
       <artifactid>jangaroo-maven-plugin</artifactid>
       <version>0.1.2-SNAPSHOT</version>
       <executions>
         <execution>
           <id>compile-jangaroo-sources</id>
           <goals>
             <goal>compile</goal>
             <goal>copy-runtime</goal>
           </goals>
           <configuration>
         
             <!-- Default output directory is
                  {project.build.directory}/${project.build.finalName}/js
              -->              
             <outputdirectory>
               ${project.build.directory}/${project.build.finalName}
             </outputdirectory>            

             <!-- All of the following configuration parameters are optional,
                  the values shown are the defaults.
               -->              
             <sourcedirectory>
               ${basedir}/src/main/js2
             </sourcedirectory>            

             <verbose>false</verbose>
             <debug>true</debug>
             <debuglevel>source</debuglevel>
           
           </configuration>
         </execution>
       </executions>
     </plugin>

     <plugin>
       <artifactid>maven-war-plugin</artifactid>
       <version>2.1-alpha-2</version>
       <configuration>
         <failonmissingwebxml>false</failonmissingwebxml>
       </configuration>
     </plugin>

   </plugins>

 </build>
</project>

Two mojos are available and will usually be run together: compile and copy-runtime. The latter one extracts the Jangaroo runtime joo/Class.js to the output directory.

To build the project, run mvn package in the directory containing pom.xml. Obviously, a working Maven2 installation is required to do so.

We still have some important homework to do before the plugin will be released, such as serious documentation or an option to concatenate all compiled output files into one compact JavaScript file. However, feedback to the plugin at this early stage is higly welcome. Just drop a comment below.