PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

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.


Problem

The target platform Web / browser only
understands JavaScript, but:
JavaScript was not made for
programming in the large


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


JavaScript for Enterprise
– The Bad Parts

 No packages / namespaces,
classes, modules

 No explicit interfaces / APIs

 No static typing

 Libraries and build process
not standardized


Jangaroo Answer:

To target JavaScript, use a language similar
to JavaScript, overcoming these Bad Parts:
ActionScript 3


But ActionScript
already runs in the
browser?!


Yes, but only through
a browser plugin!


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


How to execute
another programming
language in the
browser?


How to execute another programming
language in the browser?

by plugin Interpret Translate
in JavaScript to JavaScript


Which programming
language?


Which programming language?

Java C# ActionScript 3
(Oracle) (Microsoft) (Adobe)


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)


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


Jangaroo
= Enterprise JavaScript
⊂ ActionScript 3


Enterprise JavaScript with Jangaroo

Language and Compiler

Jangaroo Project

Software Development
Lifecycle

Libraries and Applications


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)


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.


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;
}}


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}
]});


Jangaroo is More
Than a Compiler


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


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


Software Lifecycle with Jangaroo

Jangaroo supports the whole lifecycle of professional
software development of enterprise JavaScript
applications


Software Lifecycle with Jangaroo

IDE

Build Process

Unit Test Framework

Automatic UI Tests

Continuous Integration

HTML Documentation

Source-Level Debugging

IDE Support

IntelliJ IDEA

Flash Develop

Flash Builder

Powerflasher FDT

Build Process

Command Line

Ant

Maven

IDEA (incremental)

Test Tools

UI Tests: Selenium

Continuous
Integration:
Hudson / Jenkins

Unit Tests: JooUnit =
FlexUnit 0.9 
Jangaroo

Documentation and Debugging

Documentation:
ASDoc

Debugging: Firebug
& Co


Language and
infrastructure, check,
but what kind of
applications can you
build with Jangaroo?


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
…


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


„Enterprise UI“: CoreMedia Studio

Scalable Localized Extensible


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


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

Demos & Applications


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


PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

Similar to PLASTIC 2011: "Enterprise JavaScript with Jangaroo" (20)

Recently uploaded

Recently uploaded (20)

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"