SlideShare a Scribd company logo
1 of 38
Download to read offline
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
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
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
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
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
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
But ActionScript
                             already runs in the
                             browser?!


© CoreMedia | 24/10/11 | 7                     www.coremedia.com
Yes, but only through
                             a browser plugin!


© CoreMedia | 24/10/11 | 8                    www.coremedia.com
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
How to execute
                              another programming
                              language in the
                              browser?

© CoreMedia | 24/10/11 | 10                  www.coremedia.com
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
Which programming
                              language?


© CoreMedia | 24/10/11 | 12                  www.coremedia.com
Which programming language?




          Java                    C#        ActionScript 3
        (Oracle)              (Microsoft)      (Adobe)




© CoreMedia | 24/10/11 | 13                       www.coremedia.com
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
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
Jangaroo
                              = Enterprise JavaScript
                              ⊂ ActionScript 3


© CoreMedia | 24/10/11 | 16                      www.coremedia.com
Enterprise JavaScript with Jangaroo


                              Language and Compiler


                                  Jangaroo Project


                               Software Development
                                     Lifecycle


                              Libraries and Applications



© CoreMedia | 24/10/11 | 17                                www.coremedia.com
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
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
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
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
Jangaroo is More
                              Than a Compiler

© CoreMedia | 24/10/11 | 22                www.coremedia.com
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
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
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
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
IDE Support



                              IntelliJ IDEA

                              Flash Develop

                              Flash Builder

                              Powerflasher FDT
© CoreMedia | 24/10/11 | 27                      www.coremedia.com
Build Process



                              Command Line

                              Ant

                              Maven

                              IDEA (incremental)
© CoreMedia | 24/10/11 | 28                        www.coremedia.com
Test Tools



                              UI Tests: Selenium


                              Continuous
                              Integration:
                              Hudson / Jenkins

                              Unit Tests: JooUnit =
                              FlexUnit 0.9 
                              Jangaroo
© CoreMedia | 24/10/11 | 29                           www.coremedia.com
Documentation and Debugging




                              Documentation:
                              ASDoc


                              Debugging: Firebug
                              & Co


© CoreMedia | 24/10/11 | 30                        www.coremedia.com
Language and
                              infrastructure, check,
                              but what kind of
                              applications can you
                              build with Jangaroo?

© CoreMedia | 24/10/11 | 31                     www.coremedia.com
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
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
„Enterprise UI“: CoreMedia Studio




Scalable                     Localized   Extensible


© CoreMedia | 24/10/11 | 34                        www.coremedia.com
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
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
Demos & Applications




© CoreMedia | 24/10/11 | 37   www.coremedia.com
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

More Related Content

What's hot

Silverlight
SilverlightSilverlight
SilverlightBiTWiSE
 
Introduction to silver light
Introduction to silver lightIntroduction to silver light
Introduction to silver lightjayc8586
 
Microsoft Silverlight - An Introduction
Microsoft Silverlight - An IntroductionMicrosoft Silverlight - An Introduction
Microsoft Silverlight - An IntroductionMohammad Elsheimy
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Riaravinxg
 
It's Time for Silverlight @iRajLal
It's Time for Silverlight @iRajLalIt's Time for Silverlight @iRajLal
It's Time for Silverlight @iRajLalRaj Lal
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Silverlight Framework Architecture By Satyen
Silverlight Framework Architecture By SatyenSilverlight Framework Architecture By Satyen
Silverlight Framework Architecture By SatyenSatyen Pandya
 
Silver Light
Silver LightSilver Light
Silver Lightgourav
 
Introduction to silverlight control 4
Introduction to silverlight control 4Introduction to silverlight control 4
Introduction to silverlight control 4msarangam
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overviewSubin Sugunan
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 OverviewRJ Owen
 
Re-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
Re-use Your Skills and Code to Expand the Reach of Your Apps with SilverlightRe-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
Re-use Your Skills and Code to Expand the Reach of Your Apps with SilverlightFrank La Vigne
 
Silverlight Framework Architecture
Silverlight Framework ArchitectureSilverlight Framework Architecture
Silverlight Framework ArchitectureAshok
 

What's hot (17)

Introduction to Microsoft Silverlight
Introduction to Microsoft SilverlightIntroduction to Microsoft Silverlight
Introduction to Microsoft Silverlight
 
Silverlight
SilverlightSilverlight
Silverlight
 
Introduction to silver light
Introduction to silver lightIntroduction to silver light
Introduction to silver light
 
Microsoft Silverlight - An Introduction
Microsoft Silverlight - An IntroductionMicrosoft Silverlight - An Introduction
Microsoft Silverlight - An Introduction
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
It's Time for Silverlight @iRajLal
It's Time for Silverlight @iRajLalIt's Time for Silverlight @iRajLal
It's Time for Silverlight @iRajLal
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Microsoft Silverlight
Microsoft SilverlightMicrosoft Silverlight
Microsoft Silverlight
 
Silverlight Framework Architecture By Satyen
Silverlight Framework Architecture By SatyenSilverlight Framework Architecture By Satyen
Silverlight Framework Architecture By Satyen
 
Silver Light
Silver LightSilver Light
Silver Light
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
 
Introduction to silverlight control 4
Introduction to silverlight control 4Introduction to silverlight control 4
Introduction to silverlight control 4
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overview
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 Overview
 
Re-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
Re-use Your Skills and Code to Expand the Reach of Your Apps with SilverlightRe-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
Re-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
 
Silverlight Framework Architecture
Silverlight Framework ArchitectureSilverlight Framework Architecture
Silverlight Framework Architecture
 

Similar to PLASTIC 2011: "Enterprise JavaScript with Jangaroo"

Jangaroo @ FlashCodersNY
Jangaroo @ FlashCodersNYJangaroo @ FlashCodersNY
Jangaroo @ FlashCodersNYFrank Wienberg
 
Portable Code Compiler
Portable Code CompilerPortable Code Compiler
Portable Code Compilerijtsrd
 
React vs angular what to choose for your app
React vs angular what to choose for your appReact vs angular what to choose for your app
React vs angular what to choose for your appConcetto Labs
 
Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...
Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...
Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...Edureka!
 
Built Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdfBuilt Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdfI-Verve Inc
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Alen Leit
 
Flex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog CcFlex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog CcFrançois Le Droff
 
Why react native has become the winning choice for cross platform development
Why react native has become the winning choice for cross platform developmentWhy react native has become the winning choice for cross platform development
Why react native has become the winning choice for cross platform developmentShelly Megan
 
.NET Today & Tomorrow @ Beer City Code
.NET Today & Tomorrow @ Beer City Code.NET Today & Tomorrow @ Beer City Code
.NET Today & Tomorrow @ Beer City CodeSam Basu
 
Mobile development with AIR
Mobile development with AIRMobile development with AIR
Mobile development with AIRLaurent Jayr
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfLaura Miller
 
These are the top 7 alternatives to react native
These are the top 7 alternatives to react nativeThese are the top 7 alternatives to react native
These are the top 7 alternatives to react nativeMoon Technolabs Pvt. Ltd.
 
InterConnect 2017 : Programming languages in the enterprise: Which language s...
InterConnect 2017 : Programming languages in the enterprise: Which language s...InterConnect 2017 : Programming languages in the enterprise: Which language s...
InterConnect 2017 : Programming languages in the enterprise: Which language s...DevOps for Enterprise Systems
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfLaura Miller
 
Developing apps with techstack wp-dm
Developing apps with techstack wp-dmDeveloping apps with techstack wp-dm
Developing apps with techstack wp-dmActian Corporation
 
Comparisons react native vs. flutter vs. ionic vs. xamarin vs. native script
Comparisons  react native vs. flutter vs. ionic vs. xamarin vs. native scriptComparisons  react native vs. flutter vs. ionic vs. xamarin vs. native script
Comparisons react native vs. flutter vs. ionic vs. xamarin vs. native scriptMoonTechnolabsPvtLtd
 
React vs React Native - Know the Difference
React vs React Native - Know the DifferenceReact vs React Native - Know the Difference
React vs React Native - Know the DifferenceQuokka Labs
 
React native vs react js
React native vs react jsReact native vs react js
React native vs react jsJessica655282
 

Similar to PLASTIC 2011: "Enterprise JavaScript with Jangaroo" (20)

Jangaroo @ FlashCodersNY
Jangaroo @ FlashCodersNYJangaroo @ FlashCodersNY
Jangaroo @ FlashCodersNY
 
Portable Code Compiler
Portable Code CompilerPortable Code Compiler
Portable Code Compiler
 
React vs angular what to choose for your app
React vs angular what to choose for your appReact vs angular what to choose for your app
React vs angular what to choose for your app
 
Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...
Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...
Dockerizing An Angular Application Using Git, Jenkins & Docker! | DevOps Tuto...
 
Built Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdfBuilt Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdf
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
 
Flex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog CcFlex For Java Architects Ledroff Breizh Jug V Blog Cc
Flex For Java Architects Ledroff Breizh Jug V Blog Cc
 
Why react native has become the winning choice for cross platform development
Why react native has become the winning choice for cross platform developmentWhy react native has become the winning choice for cross platform development
Why react native has become the winning choice for cross platform development
 
.NET Today & Tomorrow @ Beer City Code
.NET Today & Tomorrow @ Beer City Code.NET Today & Tomorrow @ Beer City Code
.NET Today & Tomorrow @ Beer City Code
 
AJAX vs. Flex, 2007
AJAX vs. Flex, 2007AJAX vs. Flex, 2007
AJAX vs. Flex, 2007
 
Mobile development with AIR
Mobile development with AIRMobile development with AIR
Mobile development with AIR
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdf
 
These are the top 7 alternatives to react native
These are the top 7 alternatives to react nativeThese are the top 7 alternatives to react native
These are the top 7 alternatives to react native
 
InterConnect 2017 : Programming languages in the enterprise: Which language s...
InterConnect 2017 : Programming languages in the enterprise: Which language s...InterConnect 2017 : Programming languages in the enterprise: Which language s...
InterConnect 2017 : Programming languages in the enterprise: Which language s...
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
 
Developing apps with techstack wp-dm
Developing apps with techstack wp-dmDeveloping apps with techstack wp-dm
Developing apps with techstack wp-dm
 
Comparisons react native vs. flutter vs. ionic vs. xamarin vs. native script
Comparisons  react native vs. flutter vs. ionic vs. xamarin vs. native scriptComparisons  react native vs. flutter vs. ionic vs. xamarin vs. native script
Comparisons react native vs. flutter vs. ionic vs. xamarin vs. native script
 
React vs React Native - Know the Difference
React vs React Native - Know the DifferenceReact vs React Native - Know the Difference
React vs React Native - Know the Difference
 
React native vs react js
React native vs react jsReact native vs react js
React native vs react js
 
Project Fuji/OpenESB Aquarium Paris
Project Fuji/OpenESB Aquarium ParisProject Fuji/OpenESB Aquarium Paris
Project Fuji/OpenESB Aquarium Paris
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandIES VE
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxjbellis
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 

Recently uploaded (20)

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 

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
  • 12. Which programming language? © CoreMedia | 24/10/11 | 12 www.coremedia.com
  • 13. Which programming language? Java C# ActionScript 3 (Oracle) (Microsoft) (Adobe) © CoreMedia | 24/10/11 | 13 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
  • 30. Documentation and Debugging Documentation: ASDoc Debugging: Firebug & Co © CoreMedia | 24/10/11 | 30 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
  • 34. „Enterprise UI“: CoreMedia Studio Scalable Localized Extensible © CoreMedia | 24/10/11 | 34 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
  • 37. Demos & Applications © CoreMedia | 24/10/11 | 37 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