Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FlexJS - An introduction

FlexJS is a new application development framework that cross compiles MXML and ActionScript into HTML and JavaScript. It runs in web, desktop and mobile(app) in swf format and
runs in browser based environments as HTML/JS/CSS files without the need for the Flash Player plugin. Brings the advantages of Flex to the JavaScript world.

  • Login to see the comments

FlexJS - An introduction

  1. 1. FlexJS OmPrakash Muppirala @bigosmallm | Apache Flex PMC Member | Advisory Software Engineer, IBM
  2. 2. Who am I?  Advisory Software Engineer at IBM  Apache Flex Committer and PMC Member  UI Architect with 14+ years experience building UI for enterprise and consumer apps  Used a variety of UI development platforms – HTML5/JS, Apache Flex, Flash, .Net/C#, Tcl/Tk, OpenGL, etc.
  3. 3. They made me say this…  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.  Everything I say here is just my opinion, and not an official statement on behalf of IBM, or the Apache Software Foundation, or even the Apache Flex project itself.
  4. 4. Why FlexJS? 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
  5. 5. Why FlexJS?  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
  6. 6. What is FlexJS?  A new application development framework  Cross compiles MXML and ActionScript into HTML and JavaScript  Runs in web, desktop and mobile(app) in swf format  Runs in browser based environments as HTML/JS/CSS files without the need for the Flash Player plugin.  Brings the advantages of Flex to the JavaScript world
  7. 7. FlexJS: Highlights  MXML DataBinding  MXML States  Classes, interfaces using ActionScript 3.0  Component Library Button, Label, DropDownList, Panel, Charts, Map, etc.  Bring your favorite design patterns (Singleton, MVC, MVVM, etc.)  Unit test with FlexUnit
  8. 8. FlexJS: Highlights  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.  Strands and Beads (more about this in a bit)  Incremental feature development  Better Performance  Smaller SWFs and JS downloads
  9. 9. FlexJS: Highlights  FlexJS goal is to help you write your app faster  Built in Dependency Injection  Choice of IDEs  Adobe Flash Builder and FDT.  Choice of UI Frameworks  JQuery, CreateJS partially wrapped. Others to come?  Intermediate JavaScript for debugging in browser  Compressed JavaScript via GCC for release
  10. 10. Why ActionScript?  Full fledged object oriented inheritance model (not just prototype based)  Statically type code, dynamic optional. So best of both worlds.  Packages, classes, interfaces  Use standard design patterns easily  Easy to maintain  Friendly for projects with medium to large size teams
  11. 11. Why MXML?  Like HTML, MXML is XML markup language  Declaratively lay out your interface (components, skins, layout, effects, etc.)  Declaratively define nonvisual aspects of the application (data binding, states, webservices, etc.)  Unlike HTML, you can extend MXML with custom components that you reference as MXML tags
  12. 12. What does the code look like? Lets look at some code: Input: MXML, ActionScript3 code Output: HTML, JavaScript, SVG, CSS code
  13. 13. Code + demo Stock Quote Webservices MXML States MXML DataBinding
  14. 14. Code + demo Google Maps UI components Third party integration MXML DataBinding
  15. 15. Code + demo Visualization using Charts Graphic Drawing APIs (Rect, Fill, etc.) Rendering fidelity between Flash and HTML Strands, Beads, etc.
  16. 16. Typical Workflow
  17. 17. Component Architecture
  18. 18. Component Architecture  Components are bundles of functionality formed by composition, rather than by inheritance.  Add just the features you need  A component consists of strands onto which beads are added.  A strand is the component wrapper  A bead encapsulates a particular bit of functionality  Beads can interact with each either through the strand, with events, or direct manipulation
  19. 19. Example: TextInput component
  20. 20. When FlexJS 0.0.2 (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”.
  21. 21. Help Wanted We need help! All kinds of contributions welcome on both current Flex SDK, FlexJS and other efforts. Testing Development Documentation Examples
  22. 22. Summary  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 (yay, opensource!)
  23. 23. Questions? Wiki:   Mailing List:  To subscribe, send an email to:  Nabble Forum:  Twitter: @bigosmallm