Download - FlexJS - An introduction
FlexJS
OmPrakash Muppirala
@bigosmallm | [email protected]
Apache Flex PMC Member | Advisory Software Engineer, IBM
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.
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.
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
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
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
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
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
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
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
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
What does the code look like?
Lets look at some code:
Input: MXML, ActionScript3 code
Output: HTML, JavaScript, SVG, CSS code
Code + demo
Stock QuoteWebservicesMXML StatesMXML DataBinding
Code + demo
Google MapsUI componentsThird party integrationMXML DataBinding
Code + demo
Visualization using ChartsGraphic Drawing APIs (Rect, Fill,
etc.)Rendering fidelity between Flash
and HTMLStrands, Beads, etc.
Typical Workflow
Component Architecture
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
Example: TextInput component
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”.
Help Wanted
We need help!
All kinds of contributions welcome on both current
Flex SDK, FlexJS and other efforts.
Testing
Development
Documentation
Examples
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!)
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