Flex JS World Tour Introducing Apache Flex JS

Flex. JS World Tour Introducing Apache™ Flex. JS™ San Francisco, California April 4, 2016 Alex Harui Apache Flex™, Flex. JS and Apache™ are trademarks of The Apache Software Foundation

Who am I? • One of the original Flex SDK developers at Macromedia • 30+ years experience • 13+ years at Macromedia/Adobe • Committer and PMC Member for Apache Flex

Disclaimer • Even though I am a full-time Adobe employee and spend my whole day on Apache Flex, and we are in an Adobe facility, everything I say here is just my opinion, and not an official statement on behalf of Adobe Systems Inc. , or the Apache Software Foundation, or even the Apache Flex project itself.

Community-Driven • Apache projects are community-driven • Several companies have donated resources for this event: • Adobe Systems Inc. • Machine. Zone • Print. UI, Inc. • Flex and Flex. JS code is being developed by committers from many other places as well.

Community-Driven • You and/or your employer are also donating to this project. • Corporations/businesses do not have control over the project. • Apache projects are purposefully set up to continue as long as individuals want to contribute.

What is Flex. JS? • Flex. JS is a next-generation Flex SDK that allows you to use MXML and Action. Script to create Java. Script applications. • The Adobe Flash Player or Adobe AIR runtime is not required. Action. Script, Adobe Flash Player and Adobe AIR are trademarks of Adobe Systems, Inc.

Brief History of Flex. JS • October 2011: Adobe acquires Phone. Gap. Donates Phone. Gap to Apache Software Foundation • December 2011: Adobe donates Adobe Flex 4. 6 to the Apache Software Foundation • December 2011: Adobe holds customer “summit” to discuss transition of Flex to Apache • Many customers concerned about migration of existing code bases

Brief History of Flex. JS • November 2012: Adobe donates “Falcon. JS” cross -compiler prototype to Apache • November 2012: First prototype of Flex. JS • Handwritten JS to implement AS APIs. • April 2013: Falcon. JS replaced by Falcon. JX crosscompiler • Easier for other committers to understand compiler • April 2014: Flex. JS 0. 0. 1 (alpha)

Brief History of Flex. JS • June 2015: js. swc (a. k. a Externs) • Can write to low-level HTML/JS APIs in AS. • December 2015: No more JS! • • Falcon. JX + Externs allows us to write all JS in AS Fewer errors. More code is shared. Platform-specific code is conditional compiled. • April 2016: Flex. JS World Tour

Why Flex. JS? • Take the best parts of Flex and use them to improve developer productivity for JS development • Declarative language for UI (MXML) • Semi-structured language for business logic • Support for distributed development teams • Code doesn’t have to be collected in one place • Can use Flash/AIR to validate integration • Ease (but not eliminate) migration pain for existing Flex code bases

How Does Flex. JS Work? • Class-level Substitution: • Parallel Frameworks • SWF Framework • JS Framework • Cross-compile Application code • Link pre-compiled Framework code, or rely on external APIs

MXML & AS = SWF Button. as (SWC) Falcon Application MXML & AS HTTPService. as (SWC) SWF

MXML & AS = JS Button. as (SWC) Falcon. JX Application MXML & AS Button. js Google Closure HTTPService. as (SWC) HTTPService. js JS

Demo: Class Substitution

Flex. JS Concepts • Composition (Beads) • Pay-as-you-go (PAYG) • Multiple Component Sets • JQuery • Create. JS • Flex was focused on the “first-mile”. Flex. JS also focuses on the “last-mile” (performance).

Composition (Beads) • Flex components are heavy and full of options • Download code that doesn’t run • Check for conditions that don’t occur • Gesture handling on desktops • Mouse. Over handling on phones • The basic Flex. JS components are lightweight, and most options are added as plug-ins called Beads. • Beads allow cross-cutting features to share code (Text. Prompt)

Composition Beads • Beads allow run-time configuration (swap mouse code for gesture code) • Better performance and smaller downloads should result from sharing more code. • Requires more work to assemble the right set of beads when prototyping. • Heavier component sets for prototyping may happen. • Gives you the option to get lighter if needed.

Pay-as-you-go (PAYG) • Flex components run a lot of code “just-in-case”. • Sending change events • Running layouts • The basic Flex. JS components send fewer change events. • Add a bead to watch for a specific condition and then send a change event. • Example: Image loading doesn’t always have to tell the parent to do another layout.

Flex. JS Component Sets • Basic • • Wrap HTMLElements CSS instead of skinning Composited via plug-ins (beads) PAYG • Even change detection is a bead • JQuery (in progress) • MX and Spark subsets (in progress)

How to use Flex. JS • Use the Apache Flex Installer to install Flex. JS • http: //flex. apache. org/installer. html • Choose an IDE • • • Adobe Flash Builder FDT Flash Develop Moonshine Intelli. J

“No-SWF” Workflow • Use js. swc on external-library-path • Add other externs swcs • Write AS (no MXML) • Cross-Compile with Falcon. JX to JS • Run and test in Browser • Or integrate into Cordova project

“SWF-First” Workflow • Use playerglobal. swc or airglobal. swc • Add SWCs for other libraries • Write MXML and AS • Compile as SWF (most IDEs do this for you) • Test as SWF • Cross-compile with Falcon. JX to JS

Demo: Flex. JSStore

Advantages of SWF-First • MXML • States • Data. Binding • Flex-like APIs • “No-SWF” APIs are HTML/JS browser APIS • HTMLElement, HTMLInput. Element, etc • HTMLDocument

Advantages of SWF-First • SWF Compiler is much faster • Outputs byte code instead of JS. • Flash/AIR has a runtime verifier • Checks interfaces • Checks other types mismatches • Some IDEs have integrated debuggers • You can deploy the SWF to target older browsers.

Mobile Workflow • Follow “No SWF” or “SWF-First” Workflow to get JS files • Download and Install Cordova • Download and install Cordova platforms • Use cordova-build. xml

Demo: Mobile Trader

Migration • Basic component set requires more migration work • But is smaller/faster • Some decide to modernize the UI anyway. • Big savings is in maintaining the business logic. • MX/Spark subsets will: • still require some migration work • dispose() instead of weak references • be bigger and slower • Question: how big is ‘too big’?

How much can you reuse? • To the extent your application is MXML components glued together with Action. Script that does not access Flash APIs directly, you will be able to re-use your code. • No chance if you require Flash-quality video • No chance right now if you require TLF • Scan your code for “import flash. *” and “embed” • Gives a good first estimate • Events are easier to port.

AS in JS • Some APIs of Flash/AIR are difficult to implement in JS: • • Weak References Dictionary Application. Domain (unloadable modules) E 4 x (in progress) Proxy (in progress) Embedded fonts and images Remote. Object

MX and Spark Subsets • Spark is a layer on top of MX on top of Flash/AIR spark. components. Group mx. core. UIComponent flash. display. Sprite

MX and Spark Subsets What happens if you insert Flex. JS base classes in between Flash and Flex? spark. components. Group mx. core. UIComponent org. apache. flex. core. UIBase flash. display. Sprite

MX and Spark Subsets • If UIComponent doesn’t have any “touch points” directly to Flash, then you can emulate a few APIs in JS instead of implementing Flash classes in JS. • flex. display. Sprite as subset of flash. display. Sprite • Most APIs don’t really use Flash • Flash. display. Display. Object is just the base class but you never instantiate one. • UIText. Field doesn’t have to extend flash. text. Text. Field

MX and Spark Subsets • Some APIs do need Flash for SWF compilation because the API name is too good to rename • parent is a Display. Object. Container • Early results are: • UIComponent had a network of 212 class dependencies (yuck!) • By commenting out 3 D support, accessibility, filters, blend modes, and a few other things, it compiled down to 140 K of minified JS (but doesn’t run, yet).

MX and Spark Subsets • The 140 K will grow as we fix bugs to get the MX UIComponent to run, then more code is needed to get mx: Application and mx: Label to run just to get to a Hello. World • Then the Spark code needs to undergo similar changes. How big will it get? • How big and slow could these subsets get before you give up and use the basic components?

Summary • Flex. JS protects your MXML and Action. Script investment • Flex. JS apps will run in just about any browser. • Flex. JS apps will run on more devices. • Flex. JS can improve your productivity

Summary • Flex. JS is declarative and structured languages all from a single “vendor”. • Flex. JS is not heavily influenced by a corporation. • You can directly affect the growth and development of Flex. JS.

Questions? • Wiki: https: //cwiki. apache. org/confluence/display/FLEX/ Flex. JS • Mailing List: mailto: dev@flex. apache. org • To subscribe, send an email to: mailto: devsubscribe@flex. apache. org • Prefix subjects with “[Flex. JS]” • Nabble Forum: http: //apache-flexdevelopment. 2333347. n 4. nabble. com/