Mais conteúdo relacionado
Semelhante a PLASTIC 2011: "Enterprise JavaScript with Jangaroo" (20)
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
- 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. 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. 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. 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. 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. 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. But ActionScript
already runs in the
browser?!
© CoreMedia | 24/10/11 | 7 www.coremedia.com
- 8. Yes, but only through
a browser plugin!
© CoreMedia | 24/10/11 | 8 www.coremedia.com
- 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. How to execute
another programming
language in the
browser?
© CoreMedia | 24/10/11 | 10 www.coremedia.com
- 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
- 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. 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. Jangaroo
= Enterprise JavaScript
⊂ ActionScript 3
© CoreMedia | 24/10/11 | 16 www.coremedia.com
- 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. 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. 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. 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. 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. Jangaroo is More
Than a Compiler
© CoreMedia | 24/10/11 | 22 www.coremedia.com
- 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. 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. 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. 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. IDE Support
IntelliJ IDEA
Flash Develop
Flash Builder
Powerflasher FDT
© CoreMedia | 24/10/11 | 27 www.coremedia.com
- 28. Build Process
Command Line
Ant
Maven
IDEA (incremental)
© CoreMedia | 24/10/11 | 28 www.coremedia.com
- 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
- 31. Language and
infrastructure, check,
but what kind of
applications can you
build with Jangaroo?
© CoreMedia | 24/10/11 | 31 www.coremedia.com
- 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. 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
- 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. 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
- 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