Enterprise JavaScript with
Jangaroo
Using ActionScript 3 for JavaScript ”Programming in the Large”
Andreas Gawecki Frank Wienberg
Software Architects & Jangaroo Evangelists
© CoreMedia | 24/10/11 | 1 www.coremedia.com

Need
Applications are supposed to run on many
platforms. The browser is becoming the
ubiquitous client platform, so everybody is
doing JavaScript today.
© CoreMedia | 24/10/11 | 2 www.coremedia.com

Problem
The target platform Web / browser only
understands JavaScript, but:
JavaScript was not made for
programming in the large
© CoreMedia | 24/10/11 | 3 www.coremedia.com

What Brendan says
"The over-minimized design of JS [...] imposed a
long-term complexity tax on JS programmers and
libraries. Everyone invents an OOP framework,
some standard packaging discipline, and a latent
type system. Why should not the core language
address these obvious requirements?"
Brendan Eich, creator of JavaScript, 2008
© CoreMedia | 24/10/11 | 4 www.coremedia.com

JavaScript for Enterprise
– The Bad Parts
 No packages / namespaces,
classes, modules
 No explicit interfaces / APIs
 No static typing
 Libraries and build process
not standardized
© CoreMedia | 24/10/11 | 5 www.coremedia.com

Jangaroo Answer:
To target JavaScript, use a language similar
to JavaScript, overcoming these Bad Parts:
ActionScript 3
© CoreMedia | 24/10/11 | 6 www.coremedia.com

But ActionScript
already runs in the
browser?!
© CoreMedia | 24/10/11 | 7 www.coremedia.com

Yes, but only through
a browser plugin!
© CoreMedia | 24/10/11 | 8 www.coremedia.com

FlashPlayer Browser Plugin Downsides
 Some platforms not Flash-
enabled (iOS)
 FlashPlayer has to rely on
quirky old Browser plugin API
 Does not integrate seamlessly
with (D)HTML
 Up-to-date plugin version not
installed everywhere
 Feature set
 Security
© CoreMedia | 24/10/11 | 9 www.coremedia.com

How to execute
another programming
language in the
browser?
© CoreMedia | 24/10/11 | 10 www.coremedia.com

How to execute another programming
language in the browser?
by plugin Interpret Translate
in JavaScript to JavaScript
© CoreMedia | 24/10/11 | 11 www.coremedia.com

Which programming
language?
© CoreMedia | 24/10/11 | 12 www.coremedia.com

Which programming language?
Java C# ActionScript 3
(Oracle) (Microsoft) (Adobe)
© CoreMedia | 24/10/11 | 13 www.coremedia.com

Available Technologies
Interpret translate to
by plugin in JavaScript JavaScript
Java Java Applet Orto GWT
C# Silverlight -/- Script
ActionScript Flash Player Swiffy (AS2) Jangaroo (AS3)
© CoreMedia | 24/10/11 | 14 www.coremedia.com

ActionScript 3 from a JavaScript
developer’s point of view
ActionScript adds programming-
in-the-large features missing in
JavaScript
ActionScript and JavaScript are
quite similar
Advantages of JavaScript are kept
Enhanced tool support
© CoreMedia | 24/10/11 | 15 www.coremedia.com

Jangaroo
= Enterprise JavaScript
⊂ ActionScript 3
© CoreMedia | 24/10/11 | 16 www.coremedia.com

Enterprise JavaScript with Jangaroo
Language and Compiler
Jangaroo Project
Software Development
Lifecycle
Libraries and Applications
© CoreMedia | 24/10/11 | 17 www.coremedia.com

Jangaroo’s ActionScript 3
Supported Features Only supported syntactically
 package  visibility modifiers
 class (protected, internal)
 private members  namespace
 static members  typing (no type conversion /
 inheritance (extends) coercion)
 import Not (yet) supported
 interface (implements)  E4X (XML literals and -API)
 helper classes (same file)
Not supported in IE < 9
 optional semicolons
 annotation ([…])  Property accessor functions
(get / set)
© CoreMedia | 24/10/11 | 18 www.coremedia.com

Jangaroo at Runtime
Compile ActionScript 3 to JavaScript that (through a
small runtime library)
a) runs in any browser and
b) looks very similar to the AS3 source code.
© CoreMedia | 24/10/11 | 19 www.coremedia.com

Jangaroo Source Code
package joo.util {
public class Offset {
public static const HOME : joo.util.Offset = new Offset(0, 0);
public function Offset(left : Number , top : Number ) {
this.left = left;
this.top = top;
}
public function clone() : joo.util.Offset {
return new Offset(this.left, this.top);
}
public function getDistance() : Number {
return Math.sqrt(this.left*this.left + this.top*this.top);
}
public function scale(factor : Number) : joo.util.Offset {
return new Offset(this.left * factor, this.top * factor);
}
public function isHome() : Boolean {
return this.left==0 && this.top==0;
}
public var left : Number;
public var top : Number;
}}
© CoreMedia | 24/10/11 | 20 www.coremedia.com

Jangaroo Compiled Code (JavaScript)
joo.classLoader.prepare(
"package joo.util",
"public class Offset",function($$l,$$private){var is=joo.is,assert=joo.assert,…;return[
"public static",{/*const*/ HOME/*: joo.util.Offset*/: function(){return new Offset(0, 0);}},
"public",function Offset(left/*: Number*/, top/*: Number*/) {
this.left = left;
this.top = top;
},
"public",function clone()/*: joo.util.Offset*/{
return new Offset(this.left, this.top);
},
"public",function getDistance()/*: Number*/{
return Math.sqrt(this.left*this.left + this.top*this.top);
},
"public",function scale(factor/*: Number*/)/*: joo.util.Offset*/{
return new Offset(this.left * factor, this.top * factor);
},
"public",function isHome()/*: Boolean*/{
return this.left==0 && this.top==0;
},
"public",{/*var*/ left /*: Number*/: undefined},
"public",{/*var*/ top /*: Number*/: undefined}
]});
© CoreMedia | 24/10/11 | 21 www.coremedia.com

Jangaroo is More
Than a Compiler
© CoreMedia | 24/10/11 | 22 www.coremedia.com

Jangaroo: Project History
2004:
Start as 07/2008:
internal Open
project Source 09/2010:
„JSC“ „Jangaroo“ github
Using it in 6/2009: From 10/2011:
CoreMedia ECMAScript 4 current
CMS to version:
ActionScript 3 0.8.7
 http://blog.jangaroo.net/2008/07/former-life-and-birth-of-jangaroo.html
© CoreMedia | 24/10/11 | 23 www.coremedia.com

Jangaroo Features
Source-level debugging
IDE Support
Unit Testing Automatic Class Loading
CI Integration
Localization
Class Initialization
Minimal Overhead
Versioned Modules
Modular Build Process (Maven)
Dependency Management
Integrate with
JavaScript / HTML / browser
© CoreMedia | 24/10/11 | 24 www.coremedia.com

Software Lifecycle with Jangaroo
Jangaroo supports the whole lifecycle of professional
software development of enterprise JavaScript
applications
© CoreMedia | 24/10/11 | 25 www.coremedia.com

Software Lifecycle with Jangaroo
IDE
Build Process
Unit Test Framework
Automatic UI Tests
Continuous Integration
HTML Documentation
Source-Level Debugging
© CoreMedia | 24/10/11 | 26 www.coremedia.com

IDE Support
IntelliJ IDEA
Flash Develop
Flash Builder
Powerflasher FDT
© CoreMedia | 24/10/11 | 27 www.coremedia.com

Build Process
Command Line
Ant
Maven
IDEA (incremental)
© CoreMedia | 24/10/11 | 28 www.coremedia.com

Test Tools
UI Tests: Selenium
Continuous
Integration:
Hudson / Jenkins
Unit Tests: JooUnit =
FlexUnit 0.9 
Jangaroo
© CoreMedia | 24/10/11 | 29 www.coremedia.com

Documentation and Debugging
Documentation:
ASDoc
Debugging: Firebug
& Co
© CoreMedia | 24/10/11 | 30 www.coremedia.com

Language and
infrastructure, check,
but what kind of
applications can you
build with Jangaroo?
© CoreMedia | 24/10/11 | 31 www.coremedia.com

Jangaroo Libraries A:
Reuse JavaScript Libraries
 JavaScript libraries can be used as-is or through “fake” AS3 API
 Available Jangaroo modules with AS3 API wrappers:
 Browser DOM and BOM API
 Ext Core
 Ext JS 3
 Sencha Touch (alpha)
 soundmanager 2
 swfobject
…
© CoreMedia | 24/10/11 | 32 www.coremedia.com

Jangaroo Libraries B:
Recompile ActionScript Libraries
 Open Source ActionScript libraries can simply be recompiled:
 FlexUnit
 Box2D
 Flixel
 Open Flash Chart
 Flash standard libraries are
 not Open Source and
 there is no JavaScript implementation
 thus have to be re-implemented in AS3 for Jangaroo: JooFlash
 JooFlash is alpha / work in progress, available on github
© CoreMedia | 24/10/11 | 33 www.coremedia.com

„Enterprise UI“: CoreMedia Studio
Scalable Localized Extensible
© CoreMedia | 24/10/11 | 34 www.coremedia.com

Ext AS / EXML for “Enterprise UIs”
 Ext JS is a nice JS UI framework, but
 Defines yet another JavaScript class
system
 Misses declarative, typed UI language
(nothing like Flex’ MXML)
 Jangaroo Ext JS extensions:
 Ext AS, an AS3 API for Ext JS
 EXML, a typed XML language (XSD) to
specify Ext JS UIs (compiled to AS3)
 Typed resource bundles for localization
EXML
 CoreMedia Studio is completely written in AS3 / EXML
 Ext AS / EXML example code and tutorial are publicly available
https://github.com/CoreMedia/jangaroo-ext-as-examples
© CoreMedia | 24/10/11 | 35 www.coremedia.com

Jangaroo: Resources
 User Group
 http://groups.google.com/group/jangaroo-users/
 Source Code
 http://github.com/CoreMedia/jangaroo-tools
 http://github.com/CoreMedia/jangaroo-libs
 Ext AS / EXML Tutorial Code:
https://github.com/CoreMedia/jangaroo-ext-as-examples
 Demos
 Flash Demos:
http://www.jangaroo.net/files/examples/flash/lines/
http://www.jangaroo.net/files/examples/flash/box2d/
 Browser Game: http://www.jangaron.net
www.jangaroo.net
© CoreMedia | 24/10/11 | 36 www.coremedia.com

Demos & Applications
© CoreMedia | 24/10/11 | 37 www.coremedia.com

CONTENT | CONTEXT | CONVERSION
Hamburg San Francisco London Singapore
info@coremedia.com usa-info@coremedia.com uk-info@coremedia.com asia-info@coremedia.com
tel +49.40.32 55 87.0 tel +1.415.371.0400 tel +44.207.849.3317 tel +65.6562.8866
© CoreMedia | 24/10/11 | 38 www.coremedia.com