Jangaroo @ FlashCodersNY

www.coremedia.com© CoreMedia | 30/01/15 | 1
Running Flash Apps in HTML5-enabled browsers
Andreas Gawecki Frank Wienberg
Software Architects & Jangaroo Evangelists
Jangaroo - AS3 w/o FlashPlayer

Flash / Flex can do awesome things, but
not without FlashPlayer browser plugin.
Ppl do amazing things with HTML 5, CSS 3
and JavaScript – is Flash dead?
Problem 1

 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
FlashPlayer Browser Plugin Downsides

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

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

 No packages / namespaces,
classes, modules
 No explicit interfaces / APIs
 No static typing
 Libraries and build process
not standardized
JavaScript for Enterprise
– The Bad Parts

Keep on coding ActionScript 3!
Keep on using Flash APIs!
Target the Web through
FlashPlayer and HTML 5!
Jangaroo Answers:

How to execute
another programming
language in the
browser?

translate to JavaScriptby plugin
How to execute another programming
language in the browser?

Which programming
language?

Which programming language?
ActionScript 3
(Adobe)
Java
(Oracle)
C#
(Microsoft)

Available Technologies
by plugin
translate to
JavaScript
Java Java Applet GWT
C# Silverlight
Script#
JSC
ActionScript Flash Player Jangaroo

ActionScript adds programming-
in-the-large features missing in
JavaScript
ActionScript and JavaScript are
quite similar
Advantages of JavaScript are kept
Enhanced tool support
ActionScript 3 from a JavaScript
developer’s point of view

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 Approach

Jangaroo
= Enterprise JavaScript
⊂ ActionScript 3

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

Only supported syntactically
 visibility modifiers
(protected, internal)
 namespace
 annotation ([…])
 typing (no type conversion /
coercion)
Not (yet) supported
 E4X (XML literals and -API)
Not supported in IE < 9
 Property accessor functions
(get / set)
Supported Features
 package
 class
 private members
 static members
 inheritance (extends)
 Import
 interface (implements)
 helper classes (same file)
 optional semicolons
Jangaroos ActionScript 3

Jangaroo is More
Than a Compiler

 Automatic loading of dependent classes
 On-demand class initialization (static code)
 Simple boot strap from HTML / JavaScript
 Simple to use Jangaroo libraries from JavaScript code
 Modular build process through Apache Maven
 Versioned modules
 Collection of transitive dependencies
 Generate debug and optimized code in one go
 IDE support through being AS3 compatible
 Minor overhead in generated code
 Jangaroo tools: ~13 k SLoC
Jangaroo Features

 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
 soundmanager 2
 Open Source ActionScript libraries can simply be recompiled:
 FlexUnit
 Box2D
 Flash standard libraries are not Open Source and thus have to
be reimplemented for Jangaroo (work in progress on github)
Jangaroo Libraries

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

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

IntelliJ IDEA
Flash Develop
Flash Builder
Powerflasher FDT
IDE Support

Command Line
Ant
Maven
IDEA (incremental)
Build Process

UI Tests: Selenium
Continuous
Integration:
Hudson
Unit Tests: JooUnit =
FlexUnit 0.9 
Jangaroo
Test Tools

Documentation:
ASDoc
Debugging: Firebug
& Co
Documentation and Debugging

 User Group
 http://groups.google.com/group/jangaroo-users/
 Source Code
 http://github.com/CoreMedia/jangaroo-tools
 http://github.com/CoreMedia/jangaroo-libs
 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
Jangaroo: Resources
www.jangaroo.net

Demos & Applications

CONTENT | CONTEXT | CONVERSION
Singapore
asia-info@coremedia.com
tel +65.6562.8866
Hamburg
info@coremedia.com
tel +49.40.32 55 87.0
San Francisco
usa-info@coremedia.com
tel +1.415.371.0400
London
uk-info@coremedia.com
tel +44.207.849.3317

Jangaroo @ FlashCodersNY

More Related Content

Viewers also liked (6)

Similar to Jangaroo @ FlashCodersNY (20)

Recently uploaded (20)

Jangaroo @ FlashCodersNY

Editor's Notes