FlexJS
360|Flex 2014
Alex Harui
Apache Flex PMC Chair
May 15, 2014
Agenda
• Who
• Why
• What
• Highlights
• Demo
• When
• How
Who am I?
• Apache Flex Committer and PMC Member
• Apache Flex PMC Chair
• Adobe Employee
• Flex SDK developer for almost 12 years
• 30+ years experience
Disclaimer
• Even though I am a full-time Adobe employee and
spend my whole day on Apache Flex, 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.
Why
• Then:
• Flash used to be in virtually every browser.
• AIR used to run on most computers.
• Flex provided excellent developer productivity
•
•
•
•
IDEs
Code intelligence
Debugger
Write-once run anywhere
Why
• Now:
• There are browsers that don’t run Flash and devices
that AIR cannot target
• There are large existing MXML and ActionScript code
bases
• JavaScript still makes it easy to make hard-to-find
mistakes
• Some of these JS frameworks makes your code not
look like code
What == FlexJS
• Use MXML and ActionScript to create either SWFs
that run in Flash/AIR or HTML/JS/CSS files that
run in browsers (or anywhere HTML/JS/CSS runs)
without Flash.
• IE8, 9, 10, Chrome, Firefox, Android, IOS
• Mobile Apps via Apache Cordova (PhoneGap)
• Adobe Common Extensibility Platform (a.k.a. Creative
Suite Extensions)
• Bring the advantages of Flex to the JavaScript world
Several Approaches
• Emulate Flash Player
• Emulate current Apache Flex SDK
• New framework
Emulate Flash Player
• Then you wouldn’t have to change any of your code.
• But that’s a lot of work
• Fidelity/Performance issues
• Frame events
• Other Flash-isms (embedded fonts, Stage3D)
• But some folks have doing this:
• See JooFlash, DartFlash, Shumway
Emulate Flex SDK
• Then you’d have to change code wherever you went
straight to Flash APIs
• useHandCursor, blendModes, filters
• Still some fidelity/performance issues
• Weak references, Dictionary, E4x, Embedded Assets
• The existing API has class dependencies that might
produce bigger resulting JS files.
• But might be worth a try.
FlexJS: New Framework
• Designed to be cross-compiled
• Doesn’t use AS/Flash features that are hard to
implement in JS
• Thinly wrap HTML/JS and present as classes.
• New coding patterns support plug-ins and
composition.
• Incremental feature development
• Better Performance
• Smaller SWFs and JS downloads
Backward Compatibility
• If you have an app of 10,000 lines of MXML and
100,000 of ActionScript, you can rewrite all of it
when porting to some other JS framework, or port
much less of it when using FlexJS.
• Would you have re-written it anyway?
• XML handling is cumbersome in the browser. If you
were going to port your app to some other JS
framework, would you have switched from XML to
JSON anyway?
How much can you re-use?
• To the extent your application is MXML
components glued together with ActionScript 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.
What’s Different
• Skinning Model
• Bitmap-based, at least on IE8 and other non-HTML5
browsers
• SVG-vector skinning support being investigated
• FXG for AS, SVG for JS
• Application is not a DisplayObject
• Multiple Component Sets
• Many different kinds of Buttons
Familiar Constructs
• MXML DataBinding
• Can be optimized where needed
• MXML States
• Component Names
• Button, Label, DropDownList, Etc.
• Test with FlexUnit
DEMO
When
• FlexJS 0.0.1 (alpha) available now.
• More releases in 2014.
• 1.0 in 2015?
• 1.0 means basic functionality of most current Flex
SDK components, not “near-parity”.
• But “when” depends on you. If you can contribute,
we’ll make progress more quickly.
Practicality
• Apache is an all-volunteer organization. Most
contributors work in small snippets of time. The
code patterns attempt to reflect that reality. Features
are hopefully composed of small plug-ins.
• So, instead of waiting for someone to create a Spark
Button with 124 properties, the initial Button can
just have a label and click event, then others can add
enable/disable, default button, accessibility, etc.
• Get basic functionality out now, work on harder
stuff later.
How
• New Compiler (Falcon and FalconJX)
• MXML and AS cross-compiled to JS
• SWC classes must have JS equivalent
• Standard CSS copied.
• AS code must handle standard CSS
• Custom CSS cross-compiled to JS
• JS code queries custom CSS
• Different HTML “wrapper”
Block Diagram
Falcon
Button.as
(SWC)
HTTPService.as
(SWC)
Block Diagram
Button.js
FalconJX
Button.as
(SWC)
Google
Closure
HTTPService.as
(SWC)
HTTPService.js
Why SWF?
• If you can still use Flash, it should save you a whole
bunch of browser-specific testing and tweaking.
• Leverage existing IDEs
• ActionScript is strongly-typed so will catch bugs sooner.
• “The longer it takes to find a bug, the more expensive it is to
fix it”
• ActionScript VM does run-time checking.
• Flash/AIR version is a mobile emulator
Google Map Example
FlexJS for Mobile
• Cordova/PhoneGap runs a web application in a
device’s web view.
• Use Flash/AIR as an emulator to validate your
code.
• Take the FlexJS output (HTML, JS and CSS ) and
copy it into a Cordova project
• Use Cordova commands to build and deploy to
devices.
Cordova Camera Example
Developer Productivity
• FlexJS goal is to help you write your app faster
• ActionScript is a better set of fasteners.
• Choice of IDEs
• Flash Builder and FDT.
• Choice of UI Frameworks
• JQuery, CreateJS partially wrapped. Others to come?
Help Wanted
• We need help!
• All kinds of contributions welcome on both current
SDK and FlexJS and other efforts.
•
•
•
•
Testing
Development
Documentation
Examples
Summary
• FlexJS protects your MXML and ActionScript
investment
• FlexJS apps will run in just about any browser.
• FlexJS apps will run on more devices.
• FlexJS can improve your productivity
• You can directly affect the growth and development
of FlexJS
Questions?
• Wiki:https://cwiki.apache.org/confluence/display/FLE
X/FlexJS
• Mailing List: mailto:dev@flex.apache.org
• To subscribe, send an email to: mailto:devsubscribe@flex.apache.org
• Prefix subjects with “[FlexJS]”
• Nabble Forum: http://apache-flexdevelopment.2333347.n4.nabble.com/
More Legal Stuff
• Apache Flex, Flex, FlexJS and Apache are either
registered trademarks or trademarks of the Apache
Software Foundation in the United States and/or
other countries.