Successfully reported this slideshow.

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

1

Share

Loading in …3
×
1 of 38
1 of 38

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

1

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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 programming language 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 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
  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 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
  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 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
  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 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
  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 | 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

×