SlideShare a Scribd company logo
1 of 31
Download to read offline
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
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
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
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
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
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
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:
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 in the browser?
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#
(Microsoft)
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
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
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
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 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;
}}
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}
]});
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
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 (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
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
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
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
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
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 =
FlexUnit 0.9 
Jangaroo
Test Tools
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
 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
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.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

More Related Content

Viewers also liked

Futurex Brochure (Direct Mailer)
Futurex Brochure (Direct Mailer)Futurex Brochure (Direct Mailer)
Futurex Brochure (Direct Mailer)Jasmeet Warraich
 
Marathon Futurex, Lower Parel
Marathon Futurex, Lower ParelMarathon Futurex, Lower Parel
Marathon Futurex, Lower Parelmarathongrp
 
Marathon Futurex Brochure
Marathon Futurex BrochureMarathon Futurex Brochure
Marathon Futurex Brochuremarathongrp
 
UPL employee motivational posters
UPL   employee motivational postersUPL   employee motivational posters
UPL employee motivational postersJasmeet Warraich
 

Viewers also liked (6)

Futurex Brochure (Direct Mailer)
Futurex Brochure (Direct Mailer)Futurex Brochure (Direct Mailer)
Futurex Brochure (Direct Mailer)
 
Arcon brochure
Arcon brochureArcon brochure
Arcon brochure
 
Astellas
AstellasAstellas
Astellas
 
Marathon Futurex, Lower Parel
Marathon Futurex, Lower ParelMarathon Futurex, Lower Parel
Marathon Futurex, Lower Parel
 
Marathon Futurex Brochure
Marathon Futurex BrochureMarathon Futurex Brochure
Marathon Futurex Brochure
 
UPL employee motivational posters
UPL   employee motivational postersUPL   employee motivational posters
UPL employee motivational posters
 

Similar to Jangaroo @ FlashCodersNY

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"Frank Wienberg
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textToma Velev
 
Android app development Hybrid approach for beginners
Android app development  Hybrid approach for beginnersAndroid app development  Hybrid approach for beginners
Android app development Hybrid approach for beginnersKhirulnizam Abd Rahman
 
Android - Open Source Bridge 2011
Android - Open Source Bridge 2011Android - Open Source Bridge 2011
Android - Open Source Bridge 2011sullis
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with FlutterAwok
 
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)Igalia
 
Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011sullis
 
Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15sullis
 
Practical Groovy Domain-Specific Languages
Practical Groovy Domain-Specific LanguagesPractical Groovy Domain-Specific Languages
Practical Groovy Domain-Specific LanguagesGuillaume Laforge
 
GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)firenze-gtug
 
Eclipse Training - RCP & Industrialization
Eclipse Training - RCP & IndustrializationEclipse Training - RCP & Industrialization
Eclipse Training - RCP & IndustrializationLuca D'Onofrio
 
WAM: An embedded web runtime history for LG webOS and Automotive Grade Linux
WAM: An embedded web runtime history for LG webOS and Automotive Grade LinuxWAM: An embedded web runtime history for LG webOS and Automotive Grade Linux
WAM: An embedded web runtime history for LG webOS and Automotive Grade LinuxIgalia
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascriptwendy017
 
BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...
BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...
BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...John Head
 

Similar to Jangaroo @ FlashCodersNY (20)

PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
 
Android app development Hybrid approach for beginners
Android app development  Hybrid approach for beginnersAndroid app development  Hybrid approach for beginners
Android app development Hybrid approach for beginners
 
Flashcamp
FlashcampFlashcamp
Flashcamp
 
Android - Open Source Bridge 2011
Android - Open Source Bridge 2011Android - Open Source Bridge 2011
Android - Open Source Bridge 2011
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with Flutter
 
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)
 
Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011Android 3.1 - Portland Code Camp 2011
Android 3.1 - Portland Code Camp 2011
 
Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15
 
Practical Groovy Domain-Specific Languages
Practical Groovy Domain-Specific LanguagesPractical Groovy Domain-Specific Languages
Practical Groovy Domain-Specific Languages
 
Android crash course
Android crash courseAndroid crash course
Android crash course
 
What's new in p2 (2009)?
What's new in p2 (2009)?What's new in p2 (2009)?
What's new in p2 (2009)?
 
GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)
 
Eclipse Training - RCP & Industrialization
Eclipse Training - RCP & IndustrializationEclipse Training - RCP & Industrialization
Eclipse Training - RCP & Industrialization
 
WAM: An embedded web runtime history for LG webOS and Automotive Grade Linux
WAM: An embedded web runtime history for LG webOS and Automotive Grade LinuxWAM: An embedded web runtime history for LG webOS and Automotive Grade Linux
WAM: An embedded web runtime history for LG webOS and Automotive Grade Linux
 
TPR4
TPR4TPR4
TPR4
 
TPR4
TPR4TPR4
TPR4
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
 
BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...
BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...
BP218 IBM Lotus Notes 8 and IBM Lotus Expeditor Customization for LotusScript...
 

Recently uploaded

A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfROWELL MARQUINA
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 

Recently uploaded (20)

A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 

Jangaroo @ FlashCodersNY

  • 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. 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. 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. 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. 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. 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. 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. www.coremedia.com© CoreMedia | 30/01/15 | 8 How to execute another programming language in the browser?
  • 9. www.coremedia.com© CoreMedia | 30/01/15 | 9 translate to JavaScriptby plugin How to execute another programming language in the browser?
  • 10. www.coremedia.com© CoreMedia | 30/01/15 | 10 Which programming language?
  • 11. www.coremedia.com© CoreMedia | 30/01/15 | 11 Which programming language? ActionScript 3 (Adobe) Java (Oracle) C# (Microsoft)
  • 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. 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. 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. www.coremedia.com© CoreMedia | 30/01/15 | 15 Jangaroo = Enterprise JavaScript ⊂ ActionScript 3
  • 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. 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. 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. www.coremedia.com© CoreMedia | 30/01/15 | 19 Jangaroo is More Than a Compiler
  • 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. 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. 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. 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. 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. www.coremedia.com© CoreMedia | 30/01/15 | 25 IntelliJ IDEA Flash Develop Flash Builder Powerflasher FDT IDE Support
  • 26. www.coremedia.com© CoreMedia | 30/01/15 | 26 Command Line Ant Maven IDEA (incremental) Build Process
  • 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. www.coremedia.com© CoreMedia | 30/01/15 | 28 Documentation: ASDoc Debugging: Firebug & Co Documentation and Debugging
  • 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. www.coremedia.com© CoreMedia | 30/01/15 | 30 Demos & Applications
  • 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

Editor's Notes

  1. 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
  2. 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
  3. 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.
  4. 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
  5. 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) …