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.© 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 programminglanguage 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 JavaScriptdeveloper’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 3Supported 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 Codepackage 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 LoadingCI 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

Test Tools UI Tests: Selenium Continuous Integration: Hudson / Jenkins Unit Tests: JooUnit = FlexUnit 0.9  Jangaroo© CoreMedia | 24/10/11 | 29 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

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

CONTENT | CONTEXT | CONVERSIONHamburg San Francisco London Singaporeinfo@coremedia.com usa-info@coremedia.com uk-info@coremedia.com asia-info@coremedia.comtel +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

http://blog.jangaroo.net	1188
http://blog.petermolgaard.com	138
http://a0.twimg.com	5
http://webcache.googleusercontent.com	3
http://ej.sectorit.net	1

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

by Frank Wienberg on Oct 24, 2011

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 1,335

Statistics

PLASTIC 2011: "Enterprise JavaScript with Jangaroo" — Presentation Transcript