What’s Up With Flex?

The last 15 months of Apache Flex and a look into the future

Alex HaruiApache Flex PMC Chair

August 4, 2013

Who am I?

• One of the original Flex SDK developers at Macromedia

• VP of Apache Flex

• Apache Flex PMC Chair

• 30+ years experience

• 11+ years at Macromedia/Adobe

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.

Adobe Flex Last Year

• April 2012: 360|Flex Conference• Adobe Flex SDK 4.6• Adobe Flash Builder 4.7• Adobe Support available for 5 years

Adobe Flex Today

• August 2013: 360|Stack Conference• Adobe Flex SDK 4.6 still the latest release• Adobe Flash Builder 4.7 still the latest release• Adobe JIRA bug base retired.• Bugs have been migrated to Apache• To file a bug with Adobe, you must contact Adobe

Support.• Before filing bugs at Apache, please test against

the latest Apache Flex release

• Adobe Support still available for at least 3.5 more years

Apache Flex Last Year

• April 2012: 360|Flex ConferenceApache Flex in incubationSDK ActionScript code donated• Waiting on:

MXMLC CompilerMustella Test SuiteFalcon CompilerFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceApache Flex in incubationSDK ActionScript code donated• Waiting on:

MXMLC CompilerMustella Test SuiteFalcon CompilerFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC CompilerMustella Test SuiteFalcon CompilerFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC CompilerMustella Test SuiteFalcon CompilerFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC Compiler - DonatedMustella Test SuiteFalcon CompilerFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC Compiler - DonatedMustella Test Suite - DonatedFalcon CompilerFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC Compiler - DonatedMustella Test Suite - DonatedFalcon Compiler - DonatedFalconJS Cross-compilerBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC Compiler - DonatedMustella Test Suite - DonatedFalcon Compiler - DonatedFalconJS Cross-compiler - DonatedBlazeDS

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Waiting on:

MXMLC Compiler - DonatedMustella Test Suite - DonatedFalcon Compiler - DonatedFalconJS Cross-compiler - DonatedBlazeDS – Donated (Almost)

Apache Flex Today

• August 2013: 360|Stack ConferenceTop-level Project at ApacheSDK ActionScript code donated• Source now in Apache Flex Git Repos:

MXMLC CompilerMustella Test SuiteFalcon CompilerFalconJS Cross-compilerBlazeDS – Soon

Apache Flex Today

• August 2013: 360|Stack Conference• FlexUnit donated by Michael Labriola• 3 Official Releases. 4.10.0 just went live!• Installer. 9000+ SDK downloads since 4/11/2013.• 200+ bugs fixed, especially in date formatting• Un-deprecated some features• FlipViewTransition and ZoomViewTransition• SVG transcoding

• Support wider range of Flash Player and AIR versions.

Apache Flex Today

• August 2013: 360|Stack Conference• New components• PostCodeValidator and PostCodeFormatter• VectorList and VectorCollection• Callout and CalloutButton• Spark Alert• Spark Menu and MenuBar• Spark ColorPicker• Spark ProgressBar• Spark Accordion

Apache Flex Today

• August 2013: 360|Stack Conference• New Layouts• AccordionLayout, CarouselLayout,

CoverflowLayout, StackLayout

• New features• More locales• 480 dpi support in mobile• Locked rows and columns in Spark DataGrid

Apache Flex Today

• August 2013: 360|Stack Conference• 800+ folks on dev mailing list, 500+ on users

mailing list• Automated testing server running over 30,000

tests• New website• Over 500,000 page views since February 2013• ~3000 hits per day

• 12 additional non-Adobe committers added• 30,000+ Adobe Flex bugs in JIRA migrated

Apache Flex Tomorrow

• More Bug Fixing

• More Components

• Improved Maven Support

• Prototyping Flex on HTML/JS/CSS• Really? Flex without Flash?

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 PhoneGap/Apache Cordova

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

• See JooFlash• http://www.jangaroo.net/applications

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

FlexJS: New Framework

• Designed to be cross-compiled• Doesn’t use AS/Flash features that are hard to

implement in JS

• New coding patterns support plug-ins and composition.• Incremental feature development• Better Performance• Smaller SWFs and JS downloads

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.

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.

Familiar Constructs

• MXML DataBinding• Can be optimized where needed

• MXML States

• Component Names• Button• Label• DropDownList• Etc.

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

Browser-First

• Wrap built-in HTML elements

• Encapsulate and Present• Identify good practices in the JS world. Wrap

and present as AS classes.

• Multiple component sets means there can be components sets that wrap JQuery, CreateJS and other UI framework controls.

Why SWF?

• If you can still use Flash, it should save you a whole bunch of browser-specific testing and tweaking.

• 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”

• Leverage existing IDEs

DEMO

DEMO

• http://people.apache.org/~aharui/FlexJS/DataBindingTest/bin/js-release/• Shortened URL: http://s.apache.org/MQT

• JS debug and SWF versions:• http://s.apache.org/ukh

Next Steps

• More components

• More compiler work• Metadata• Interfaces and other introspection

• Release early versions• Basic features first, more features later• Over time, we should be able to replicate most

but not all of the current Flex SDK APIs

Summary

• We need help!• All kinds of contributions welcome on both current

SDK and FlexJS and other efforts.• Testing• Development• Documentation• Examples

• See FlexJS: Deeper Dive on Wednesday

• Look for me in the Apache Flex Discovery Room

Questions?

• http://flex.apache.org/

• mailto:dev@flex.apache.org

• https://cwiki.apache.org/confluence/display/FLEX/Alex%27s+FlexJS+Prototype