www.coremedia.com© CoreMedia | 30/01/15 | 1
Running Flash Apps in HTML5-enabled browsers
Andreas Gawecki Frank Wienberg
So...
www.coremedia.com© CoreMedia | 30/01/15 | 2
Flash / Flex can do awesome things, but
not without FlashPlayer browser plugin...
www.coremedia.com© CoreMedia | 30/01/15 | 3
 Some platforms not Flash-
enabled (iOS)
 FlashPlayer has to rely on
quirky ...
www.coremedia.com© CoreMedia | 30/01/15 | 4
The target platform Web / browser only
understands JavaScript, but:
JavaScript...
www.coremedia.com© CoreMedia | 30/01/15 | 5
What Brendan says
"The over-minimized design of JS [...] imposed a
long-term c...
www.coremedia.com© CoreMedia | 30/01/15 | 6
 No packages / namespaces,
classes, modules
 No explicit interfaces / APIs
...
www.coremedia.com© CoreMedia | 30/01/15 | 7
Keep on coding ActionScript 3!
Keep on using Flash APIs!
Target the Web throug...
www.coremedia.com© CoreMedia | 30/01/15 | 8
How to execute
another programming
language in the
browser?
www.coremedia.com© CoreMedia | 30/01/15 | 9
translate to JavaScriptby plugin
How to execute another programming
language i...
www.coremedia.com© CoreMedia | 30/01/15 | 10
Which programming
language?
www.coremedia.com© CoreMedia | 30/01/15 | 11
Which programming language?
ActionScript 3
(Adobe)
Java
(Oracle)
C#
(Microsof...
www.coremedia.com© CoreMedia | 30/01/15 | 12
Available Technologies
by plugin
translate to
JavaScript
Java Java Applet GWT...
www.coremedia.com© CoreMedia | 30/01/15 | 13
ActionScript adds programming-
in-the-large features missing in
JavaScript
Ac...
www.coremedia.com© CoreMedia | 30/01/15 | 14
Compile ActionScript 3 to JavaScript that (through a
small runtime library)
a...
www.coremedia.com© CoreMedia | 30/01/15 | 15
Jangaroo
= Enterprise JavaScript
⊂ ActionScript 3
www.coremedia.com© CoreMedia | 30/01/15 | 16
Jangaroo Source Code
package joo.util {
public class Offset {
public static c...
www.coremedia.com© CoreMedia | 30/01/15 | 17
Jangaroo Compiled Code (JavaScript)
joo.classLoader.prepare(
"package joo.uti...
www.coremedia.com© CoreMedia | 30/01/15 | 18
Only supported syntactically
 visibility modifiers
(protected, internal)
 n...
www.coremedia.com© CoreMedia | 30/01/15 | 19
Jangaroo is More
Than a Compiler
www.coremedia.com© CoreMedia | 30/01/15 | 20
 Automatic loading of dependent classes
 On-demand class initialization (st...
www.coremedia.com© CoreMedia | 30/01/15 | 21
 JavaScript libraries can be used as-is or through “fake” AS3 API
 Availabl...
www.coremedia.com© CoreMedia | 30/01/15 | 22
2004:
Start as
internal
project
„JSC“
Using it in
CoreMedia
CMS
07/2008:
Open...
www.coremedia.com© CoreMedia | 30/01/15 | 23
Software Lifecycle with Jangaroo
Jangaroo supports the whole lifecycle of pro...
www.coremedia.com© CoreMedia | 30/01/15 | 24
Software Lifecycle with Jangaroo
IDE
Build Process
Unit Test Framework
Automa...
www.coremedia.com© CoreMedia | 30/01/15 | 25
IntelliJ IDEA
Flash Develop
Flash Builder
Powerflasher FDT
IDE Support
www.coremedia.com© CoreMedia | 30/01/15 | 26
Command Line
Ant
Maven
IDEA (incremental)
Build Process
www.coremedia.com© CoreMedia | 30/01/15 | 27
UI Tests: Selenium
Continuous
Integration:
Hudson
Unit Tests: JooUnit =
FlexU...
www.coremedia.com© CoreMedia | 30/01/15 | 28
Documentation:
ASDoc
Debugging: Firebug
& Co
Documentation and Debugging
www.coremedia.com© CoreMedia | 30/01/15 | 29
 User Group
 http://groups.google.com/group/jangaroo-users/
 Source Code
...
www.coremedia.com© CoreMedia | 30/01/15 | 30
Demos & Applications
www.coremedia.com© CoreMedia | 30/01/15 | 31
CONTENT | CONTEXT | CONVERSION
Singapore
asia-info@coremedia.com
tel +65.6562...
Upcoming SlideShare
Loading in...5
×

Jangaroo @ FlashCodersNY

4,077

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,077
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Andere RIA-Technologien haben sich nicht durchgesetzt
    Für viele ein notwendiges Übel: “Muss man ja leider benutzen”
    “Möglichst viel auf dem Server implementieren, da gibt es wenigstens vernünftige Infrastruktur”  Web 2.0
  • Andere RIA-Technologien haben sich nicht durchgesetzt
    Für viele ein notwendiges Übel: “Muss man ja leider benutzen”
    “Möglichst viel auf dem Server implementieren, da gibt es wenigstens vernünftige Infrastruktur”  Web 2.0
  • But: the standardization process is going on for years, it seems that eventually Microsoft is retreating or even sabotaging the progress. If Microsoft does not support JS2, then IE won't, and it will only run via plugin...
    What makes our approach different? We put the OOP framework into the language, not (only) into a runtime extension.
  • Andere RIA-Technologien haben sich nicht durchgesetzt
    Für viele ein notwendiges Übel: “Muss man ja leider benutzen”
    “Möglichst viel auf dem Server implementieren, da gibt es wenigstens vernünftige Infrastruktur”  Web 2.0
  • ActionScript bietet die in JavaScript fehlenden programming-in-the-large-Features
    Pakete, Klassen, Module, Schnittstellen, Sichtbarkeit
    Statische Typisierung
    ActionScript und JavaScript gut aufeinander abbildbar
    Generierter Code und Quellcode sehr ähnlich
    Einfacher für Entwickler (und für den Compiler)
    Statische Typisierung optional => iterative Migration
    Stärken von JavaScript bleiben erhalten
    Closures
    Dynamische Sprach-Aspekte
    JavaScript-Bibliotheken können direkt verwendet werden
    Tool-Unterstützung
    In den letzten Monten dank Flex professionelles Niveau erreicht.
    Diverse IDEs
    Build-Prozess (Flex-Maven-Plug-Ins)
  • Jangaroo @ FlashCodersNY

    1. 1. 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
    2. 2. www.coremedia.com© CoreMedia | 30/01/15 | 2 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
    3. 3. www.coremedia.com© CoreMedia | 30/01/15 | 3  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
    4. 4. www.coremedia.com© CoreMedia | 30/01/15 | 4 The target platform Web / browser only understands JavaScript, but: JavaScript was not made for programming in the large Problem 2
    5. 5. www.coremedia.com© CoreMedia | 30/01/15 | 5 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
    6. 6. www.coremedia.com© CoreMedia | 30/01/15 | 6  No packages / namespaces, classes, modules  No explicit interfaces / APIs  No static typing  Libraries and build process not standardized JavaScript for Enterprise – The Bad Parts
    7. 7. www.coremedia.com© CoreMedia | 30/01/15 | 7 Keep on coding ActionScript 3! Keep on using Flash APIs! Target the Web through FlashPlayer and HTML 5! Jangaroo Answers:
    8. 8. www.coremedia.com© CoreMedia | 30/01/15 | 8 How to execute another programming language in the browser?
    9. 9. www.coremedia.com© CoreMedia | 30/01/15 | 9 translate to JavaScriptby plugin How to execute another programming language in the browser?
    10. 10. www.coremedia.com© CoreMedia | 30/01/15 | 10 Which programming language?
    11. 11. www.coremedia.com© CoreMedia | 30/01/15 | 11 Which programming language? ActionScript 3 (Adobe) Java (Oracle) C# (Microsoft)
    12. 12. www.coremedia.com© CoreMedia | 30/01/15 | 12 Available Technologies by plugin translate to JavaScript Java Java Applet GWT C# Silverlight Script# JSC ActionScript Flash Player Jangaroo
    13. 13. www.coremedia.com© CoreMedia | 30/01/15 | 13 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
    14. 14. www.coremedia.com© CoreMedia | 30/01/15 | 14 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
    15. 15. www.coremedia.com© CoreMedia | 30/01/15 | 15 Jangaroo = Enterprise JavaScript ⊂ ActionScript 3
    16. 16. www.coremedia.com© CoreMedia | 30/01/15 | 16 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; }}
    17. 17. www.coremedia.com© CoreMedia | 30/01/15 | 17 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} ]});
    18. 18. www.coremedia.com© CoreMedia | 30/01/15 | 18 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
    19. 19. www.coremedia.com© CoreMedia | 30/01/15 | 19 Jangaroo is More Than a Compiler
    20. 20. www.coremedia.com© CoreMedia | 30/01/15 | 20  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
    21. 21. www.coremedia.com© CoreMedia | 30/01/15 | 21  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
    22. 22. www.coremedia.com© CoreMedia | 30/01/15 | 22 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
    23. 23. www.coremedia.com© CoreMedia | 30/01/15 | 23 Software Lifecycle with Jangaroo Jangaroo supports the whole lifecycle of professional software development of enterprise JavaScript applications
    24. 24. www.coremedia.com© CoreMedia | 30/01/15 | 24 Software Lifecycle with Jangaroo IDE Build Process Unit Test Framework Automatic UI Tests Continuous Integration HTML Documentation Source-Level Debugging
    25. 25. www.coremedia.com© CoreMedia | 30/01/15 | 25 IntelliJ IDEA Flash Develop Flash Builder Powerflasher FDT IDE Support
    26. 26. www.coremedia.com© CoreMedia | 30/01/15 | 26 Command Line Ant Maven IDEA (incremental) Build Process
    27. 27. www.coremedia.com© CoreMedia | 30/01/15 | 27 UI Tests: Selenium Continuous Integration: Hudson Unit Tests: JooUnit = FlexUnit 0.9  Jangaroo Test Tools
    28. 28. www.coremedia.com© CoreMedia | 30/01/15 | 28 Documentation: ASDoc Debugging: Firebug & Co Documentation and Debugging
    29. 29. www.coremedia.com© CoreMedia | 30/01/15 | 29  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
    30. 30. www.coremedia.com© CoreMedia | 30/01/15 | 30 Demos & Applications
    31. 31. www.coremedia.com© CoreMedia | 30/01/15 | 31 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×