Enterprise JavaScript with                             Jangaroo                             Using ActionScript 3 for JavaS...
Need                             Applications are supposed to run on many                             platforms. The brows...
Problem                             The target platform Web / browser only                             understands JavaScr...
What Brendan says         "The over-minimized design of JS [...] imposed a          long-term complexity tax on JS program...
JavaScript for Enterprise– The Bad Parts No packages / namespaces,  classes, modules No explicit interfaces / APIs No s...
Jangaroo Answer:                             To target JavaScript, use a language similar                             to J...
But ActionScript                             already runs in the                             browser?!© CoreMedia | 24/10/...
Yes, but only through                             a browser plugin!© CoreMedia | 24/10/11 | 8                    www.corem...
FlashPlayer Browser Plugin Downsides Some platforms not Flash-  enabled (iOS) FlashPlayer has to rely on  quirky old Bro...
How to execute                              another programming                              language in the              ...
How to execute another programminglanguage in the browser?           by plugin            Interpret       Translate       ...
Which programming                              language?© CoreMedia | 24/10/11 | 12                  www.coremedia.com
Which programming language?          Java                    C#        ActionScript 3        (Oracle)              (Micros...
Available Technologies                                               Interpret      translate to                          ...
ActionScript 3 from a JavaScriptdeveloper’s point of view                              ActionScript adds programming-     ...
Jangaroo                              = Enterprise JavaScript                              ⊂ ActionScript 3© CoreMedia | 2...
Enterprise JavaScript with Jangaroo                              Language and Compiler                                  Ja...
Jangaroo’s ActionScript 3Supported Features             Only supported syntactically package                       visib...
Jangaroo at Runtime                              Compile ActionScript 3 to JavaScript that (through a                     ...
Jangaroo Source Codepackage joo.util {public class Offset {   public static const HOME : joo.util.Offset = new Offset(0, 0...
Jangaroo Compiled Code (JavaScript)joo.classLoader.prepare("package joo.util","public class Offset",function($$l,$$private...
Jangaroo is More                              Than a Compiler© CoreMedia | 24/10/11 | 22                www.coremedia.com
Jangaroo: Project History  2004: Start as                            07/2008: internal                              Open  ...
Jangaroo Features                                            Source-level debugging                  IDE Support          ...
Software Lifecycle with Jangaroo                              Jangaroo supports the whole lifecycle of professional       ...
Software Lifecycle with Jangaroo                                       IDE                                   Build Process...
IDE Support                              IntelliJ IDEA                              Flash Develop                         ...
Build Process                              Command Line                              Ant                              Mave...
Test Tools                              UI Tests: Selenium                              Continuous                        ...
Documentation and Debugging                              Documentation:                              ASDoc                ...
Language and                              infrastructure, check,                              but what kind of            ...
Jangaroo Libraries A:Reuse JavaScript Libraries JavaScript libraries can be used as-is or through “fake” AS3 API Availab...
Jangaroo Libraries B:Recompile ActionScript Libraries Open Source ActionScript libraries can simply be recompiled:      ...
„Enterprise UI“: CoreMedia StudioScalable                     Localized   Extensible© CoreMedia | 24/10/11 | 34        ...
Ext AS / EXML for “Enterprise UIs” Ext JS is a nice JS UI framework, but      Defines yet another JavaScript class      ...
Jangaroo: Resources User Group      http://groups.google.com/group/jangaroo-users/ Source Code      http://github.com/...
Demos & Applications© CoreMedia | 24/10/11 | 37   www.coremedia.com
CONTENT | CONTEXT | CONVERSIONHamburg                       San Francisco            London                  Singaporeinfo...
Upcoming SlideShare
Loading in …5
×

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

12,504 views

Published on

Slides complementing our paper on the PLASTIC workshop of SPLASH 2011: http://plastic.host.adobe.com/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,504
On SlideShare
0
From Embeds
0
Number of Embeds
10,057
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. But ActionScript already runs in the browser?!© CoreMedia | 24/10/11 | 7 www.coremedia.com
  8. 8. Yes, but only through a browser plugin!© CoreMedia | 24/10/11 | 8 www.coremedia.com
  9. 9. 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
  10. 10. How to execute another programming language in the browser?© CoreMedia | 24/10/11 | 10 www.coremedia.com
  11. 11. How to execute another programminglanguage in the browser? by plugin Interpret Translate in JavaScript to JavaScript© CoreMedia | 24/10/11 | 11 www.coremedia.com
  12. 12. Which programming language?© CoreMedia | 24/10/11 | 12 www.coremedia.com
  13. 13. Which programming language? Java C# ActionScript 3 (Oracle) (Microsoft) (Adobe)© CoreMedia | 24/10/11 | 13 www.coremedia.com
  14. 14. 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
  15. 15. 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
  16. 16. Jangaroo = Enterprise JavaScript ⊂ ActionScript 3© CoreMedia | 24/10/11 | 16 www.coremedia.com
  17. 17. Enterprise JavaScript with Jangaroo Language and Compiler Jangaroo Project Software Development Lifecycle Libraries and Applications© CoreMedia | 24/10/11 | 17 www.coremedia.com
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Jangaroo is More Than a Compiler© CoreMedia | 24/10/11 | 22 www.coremedia.com
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. IDE Support IntelliJ IDEA Flash Develop Flash Builder Powerflasher FDT© CoreMedia | 24/10/11 | 27 www.coremedia.com
  28. 28. Build Process Command Line Ant Maven IDEA (incremental)© CoreMedia | 24/10/11 | 28 www.coremedia.com
  29. 29. Test Tools UI Tests: Selenium Continuous Integration: Hudson / Jenkins Unit Tests: JooUnit = FlexUnit 0.9  Jangaroo© CoreMedia | 24/10/11 | 29 www.coremedia.com
  30. 30. Documentation and Debugging Documentation: ASDoc Debugging: Firebug & Co© CoreMedia | 24/10/11 | 30 www.coremedia.com
  31. 31. Language and infrastructure, check, but what kind of applications can you build with Jangaroo?© CoreMedia | 24/10/11 | 31 www.coremedia.com
  32. 32. 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
  33. 33. 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
  34. 34. „Enterprise UI“: CoreMedia StudioScalable Localized Extensible© CoreMedia | 24/10/11 | 34 www.coremedia.com
  35. 35. 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
  36. 36. 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
  37. 37. Demos & Applications© CoreMedia | 24/10/11 | 37 www.coremedia.com
  38. 38. 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

×