flexjs - an introduction
DESCRIPTION
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.TRANSCRIPT
![Page 1: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/1.jpg)
FlexJS
OmPrakash Muppirala
@bigosmallm | [email protected]
Apache Flex PMC Member | Advisory Software Engineer, IBM
![Page 2: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/2.jpg)
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.
![Page 3: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/3.jpg)
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.
![Page 4: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/4.jpg)
Why FlexJS?
Then:Flash used to be in virtually every browser.
AIR used to run on most computers.
Flex provided excellent developer productivityIDEs
Code intelligence
Debugger
Write once, run anywhere
![Page 5: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/5.jpg)
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
![Page 6: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/6.jpg)
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
![Page 7: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/7.jpg)
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
![Page 8: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/8.jpg)
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
![Page 9: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/9.jpg)
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
![Page 10: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/10.jpg)
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
![Page 11: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/11.jpg)
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
![Page 12: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/12.jpg)
What does the code look like?
Lets look at some code:
Input: MXML, ActionScript3 code
Output: HTML, JavaScript, SVG, CSS code
![Page 13: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/13.jpg)
Code + demo
Stock QuoteWebservicesMXML StatesMXML DataBinding
![Page 14: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/14.jpg)
Code + demo
Google MapsUI componentsThird party integrationMXML DataBinding
![Page 15: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/15.jpg)
Code + demo
Visualization using ChartsGraphic Drawing APIs (Rect, Fill,
etc.)Rendering fidelity between Flash
and HTMLStrands, Beads, etc.
![Page 16: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/16.jpg)
Typical Workflow
![Page 17: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/17.jpg)
Component Architecture
![Page 18: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/18.jpg)
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
![Page 19: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/19.jpg)
Example: TextInput component
![Page 20: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/20.jpg)
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”.
![Page 21: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/21.jpg)
Help Wanted
We need help!
All kinds of contributions welcome on both current
Flex SDK, FlexJS and other efforts.
Testing
Development
Documentation
Examples
![Page 22: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/22.jpg)
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!)
![Page 23: FlexJS - An introduction](https://reader033.vdocuments.mx/reader033/viewer/2022061200/5476da65b4af9fab1c8b45f5/html5/thumbnails/23.jpg)
Questions?
Wiki:
http://s.apache.org/flexjs-wiki
Mailing List: [email protected]
To subscribe, send an email to:
mailto:[email protected]
Nabble Forum: s.apache.org/flex-dev-forum
Twitter: @bigosmallm