1 / 33

FlexJS : Deeper Dive

FlexJS : Deeper Dive. Under the hood of the FlexJS framework Alex Harui Apache 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.

kasie
Download Presentation

FlexJS : Deeper Dive

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FlexJS: Deeper Dive Under the hood of the FlexJS framework Alex Harui Apache Flex PMC Chair August 4, 2013

  2. 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

  3. 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.

  4. 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

  5. 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

  6. Terminology • API Surface – The total set of public properties, methods and events on a component • Component Developer – Someone who is developing components for use by an Application Developer • Application Developer – Someone who is building an Application by taking a set of components and gluing them together with ActionScript.

  7. More Terminology • Falcon – The name for the code-base for Adobe’s ASC2.0 that was donated to Apache Flex. • FalconJS – The cross-compiler based on Falcon that was donated by Adobe to Apache Flex. Early prototypes used this compiler, but this code base is not under development at this time. • FalconJX – A cross-compiler developed by Apache Flex committers that is currently being used to compiler FlexJS applications.

  8. Philosophy • Parallel Frameworks • Plug-ins • Composition over Inheritance • Multiple Component Sets • Just-in-time, not Just-in-case • Rapid prototyping is important, but end-game optimization is critical

  9. Parallel Frameworks • The component developer does the hard work: • Creates both a button.as and button.js • Essentially, writes the component twice, once in AS and once in JS. • Button.as can use Flash APIs • Button.js uses HTMLElements, JS, and CSS • The application developer writes one set of code • Compiles and debugs in Flash • Cross-compiles to HTML/JS/CSS

  10. Beads (Plug-Ins) • Instead of one Button with every property imaginable, Button optional properties are packaged into “Beads”. • Beads are the name for plug-ins • They should be highly-reusable • Prompt for TextArea, TextInput, ComboBox, for example. • Component when used as sub-components don’t need as much as when used at top-level • Border on TextInput in ComboBox

  11. Beads (cont’d) • Different code for different runtime environments • Toss out mouseover code on mobile, swap in touch code instead • Use CSS to choose beads • Wrap up a bunch of beads into a top-level component and proxy the model to the component API surface

  12. Composition • JIT compilers are used in the runtimes. • The more you re-use code, the more efficient JIT is • Flex startup is actually faster without JIT because it doesn’t re-use as much code • A single feature can be written once and applied in several places. • Text prompt example

  13. Multiple Component Sets • A one-size-fits-all Button works in most places, but not all

  14. Multiple Component Sets • A one-size-fits-all Button works in most places, but not all

  15. Multiple Component Sets • A one-size-fits-all Button works in most places, but not all • A choice of Buttons means you have more decisions to make, but you don’t have to carry around excess code. • And some folks have requirements to use JQuery or other frameworks.

  16. Prototyping vs Optimization • How do you choose from so many different buttons? • Need utility to help you choose • Maybe a few heavy buttons with lots of options baked in • You will be able to toss out code you are not using. • Debug-mode beads can give more warnings and do more parameter checking.

  17. Just-in-Time • Flex initializes a bunch of managers at startup that prepare for overlapping top-level windows, tooltips, and custom cursors. • None of these are likely to be found in mobile apps • You don’t even need PopUpManager unless you have floating non-modal popups • Choose the right PopUpManager, and only instantiate it when you actually get around to showing a popup.

  18. Component Patterns • MVC • Model Bead – stores properties • Spark model is baked into the component • View Bead – assembles sub-components, if any • Spark Skins combine sub-components and the actual visuals • Controller Bead – manages events, updates model and dispatches other events

  19. Button.as • Has no model. There are no properties! • CSS for Button specifies a ButtonViewas the view. • ButtonView.as only knows how to display whatever is specified by the background-image style. • That’s what the HTML Button does so that what we’ll encapsulate and present in AS. • Flex buttons used for scrollbar arrows still think about text label layout. That’s not pay-as-you-go.

  20. TextButton.as • Wrapper that proxies label property to model. • CSS for Button specifies model with label property. • ButtonView.as only knows how to display the label. • Different ButtonView could know how to display an icon with a label. • Then you’d use a different model as well that supports an “icon” property or style.

  21. Button.js • Thin wrapper around HTML Button element • TextButton.js is same since text behavior is built-in to HTML.

  22. Button Skin • For the basic component set, the skins are images you can specify as a background-image in HTML. • Gif, png, jpg • They are loaded on the fly, no embedding • But the HTML5 Button set can load SVG as background-image • You choose different components sets based on target devices.

  23. Panel.as • Specifies a PanelView that creates a TitleBar and ContentPane • Another PanelView would create a TitleBar, ContentPane and ControlBar. • Other PanelViews would include a StatusBar • TitleBar is a Sprite with a TextField • Some other TitleBar could be a Sprite with FTE Text

  24. Panel.js • Also specifies a PanelView. This one also creates a TitleBar and ContentPane. • TitleBar is a DIV with some text in it.

  25. TextPromptBead.as • Overlays Text widget • Different TextPromptBead can have different strategy for when to appear/disappear/reappear. • Different implementation could change styles and text in a single text widget.

  26. CSS in FlexJS • CSS compliant • Custom properties are prefixed • AS-only properties are hidden in a custom media type in a media query. • Need to create more and more sophisticated CSS implementations in the AS side

  27. ValuesManager • Abstraction for getting default values. • CSS Styles, Resources, etc. • If your app doesn’t use an expensive CSS feature, you may choose a less expensive ValuesManager

  28. Compiling and Linking • A Flex project contains MXML, AS, and SWCs • The Compiler creates compilation units for every class defined in MXML, AS and SWCs • FalconJX generates JS only for MXML and AS classes. • It assumes that external JS files exist for every class in a SWC.

  29. Block Diagram Button.as (SWC) ApplicationMXML & AS SWF Falcon HTTPService.as (SWC)

  30. Block Diagram Button.as (SWC) ApplicationMXML & AS Button.js JS FalconJX Google Closure HTTPService.js HTTPService.as (SWC)

  31. 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

  32. Summary • We need help! • All kinds of contributions welcome • Testing • Development • Documentation • Examples • Look for me in the Apache Flex Discovery Room and on the Apache mailing lists.

  33. Questions? • http://flex.apache.org/ • mailto:dev@flex.apache.org • https://cwiki.apache.org/confluence/display/FLEX/Alex%27s+FlexJS+Prototype

More Related