1 / 0

FlexJS

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.

darby
Download Presentation

FlexJS

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

    360|Flex 2014 Alex Harui Apache Flex PMC Chair May 15, 2014
  2. Agenda Who Why What Highlights Demo When How
  3. 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
  4. 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.
  5. 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
  6. 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
  7. 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
  8. Several Approaches Emulate Flash Player Emulate current Apache Flex SDK New framework
  9. 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
  10. 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.
  11. 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
  12. 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?
  13. 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.
  14. 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
  15. Familiar Constructs MXML DataBinding Can be optimized where needed MXML States Component Names Button, Label, DropDownList, Etc. Test with FlexUnit
  16. DEMO
  17. When FlexJS 0.0.1 (alpha) availablenow. 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.
  18. 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.
  19. 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”
  20. Block Diagram Button.as (SWC) ApplicationMXML & AS SWF Falcon HTTPService.as (SWC)
  21. Block Diagram Button.as (SWC) ApplicationMXML & AS Button.js JS FalconJX Google Closure HTTPService.js HTTPService.as (SWC)
  22. 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
  23. Google Map Example
  24. FlexJSfor 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.
  25. Cordova Camera Example
  26. 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, CreateJSpartially wrapped. Others to come?
  27. Help Wanted We need help! All kinds of contributions welcome on both current SDK and FlexJS and other efforts. Testing Development Documentation Examples
  28. 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
  29. Questions? Wiki:https://cwiki.apache.org/confluence/display/FLEX/FlexJS Mailing List: mailto:dev@flex.apache.org To subscribe, send an email to: mailto:dev-subscribe@flex.apache.org Prefix subjects with “[FlexJS]” Nabble Forum: http://apache-flex-development.2333347.n4.nabble.com/
  30. More Legal Stuff Apache Flex, Flex, FlexJSand Apache are either registered trademarks or trademarks of the Apache Software Foundation in the United States and/or other countries.
More Related