FlexJS

OmPrakash Muppirala

@bigosmallm | bigosmallm@apache.org

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: dev@flex.apache.org

To subscribe, send an email to:

mailto:dev-subscribe@flex.apache.org

Nabble Forum: s.apache.org/flex-dev-forum

Twitter: @bigosmallm