FlexJS: Deeper Dive

needlessoybeanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

53 εμφανίσεις

FlexJS
: Deeper Dive

Under the hood of the
FlexJS

framework


Alex Harui

Apache Flex PMC Chair

August 4, 2013


Who am I?


One of the original Flex SDK developers at
Macromedia


VP of Apache Flex


Apache Flex PMC Chair


30+ years experience


11+ years at Macromedia/Adobe

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.

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
PhoneGap
/Apache Cordova

DEMO


http://people.apache.org/~aharui/FlexJS/DataBin
dingTest/bin
/js
-
release
/


Shortened URL:
http://s.apache.org/MQT


JS debug and SWF versions:


http://
s.apache.org
/
ukh

Terminology


API Surface


The total set of public properties,
methods and events on a component


Component Developer


Someone who is
developing components for use by an Application
Developer


Application Developer


Someone who is building
an Application by taking a set of components and
gluing them together with
ActionScript
.

More Terminology


Falcon


The name for the code
-
base for Adobe’s
ASC2.0 that was donated to Apache Flex.


FalconJS



The cross
-
compiler based on Falcon that
was donated by Adobe to Apache Flex. Early
prototypes used this compiler, but this code base is
not under development at this time.


FalconJX



A cross
-
compiler developed by Apache
Flex committers that is currently being used to
compiler
FlexJS

applications.

Philosophy


Parallel Frameworks


Plug
-
ins


Composition over Inheritance


Multiple Component Sets


Just
-
in
-
time, not Just
-
in
-
case


Rapid prototyping is important, but end
-
game
optimization is critical

Parallel Frameworks


The component developer does the hard work:


Creates both a
b
utton.as

and
button.js


Essentially, writes the component twice, once in AS
and once in JS.


Button.as

can use Flash APIs


Button.js

uses
HTMLElements
, JS, and CSS


The application developer writes one set of code


Compiles and debugs in Flash


Cross
-
compiles to HTML/JS/CSS

Beads (Plug
-
Ins)


Instead of one Button with every property
imaginable, Button optional properties are packaged
into “Beads”.


Beads are the name for plug
-
ins


They should be highly
-
reusable


Prompt for
TextArea
,
TextInput
,
ComboBox
, for example.


Component when used as sub
-
components don’t
need as much as when used at top
-
level


Border on
TextInput

in
ComboBox

Beads (cont’d)


Different code for different runtime environments


Toss out
mouseover

code on mobile, swap in touch
code instead


Use CSS to choose beads


Wrap up a bunch of beads into a top
-
level
component and proxy the model to the component
API surface


Composition


JIT compilers are used in the runtimes.


The more you re
-
use code, the more efficient JIT is


Flex startup is actually faster without JIT because it
doesn’t re
-
use as much code


A single feature can be written once and applied in
several places.


Text prompt example

Multiple Component Sets


A one
-
size
-
fits
-
all Button works in most places, but
not all


Multiple Component Sets


A one
-
size
-
fits
-
all Button works in most places, but
not all


Multiple Component Sets


A one
-
size
-
fits
-
all Button works in most places, but
not all


A choice of Buttons means you have more decisions
to make, but you don’t have to carry around excess
code.


And some folks have requirements to use
JQuery

or
other frameworks.

Prototyping
vs

Optimization


How do you choose from so many different buttons?


Need utility to help you choose


Maybe a few heavy buttons with lots of options baked
in


Y
ou will be able to toss out code you are not using.


Debug
-
mode beads can give more warnings and do
more parameter checking.

Just
-
in
-
Time


Flex initializes a bunch of managers at startup that
prepare for overlapping top
-
level windows, tooltips,
and custom cursors.


None of these are likely to be found in mobile apps


You don’t even need
PopUpManager

unless you have
floating non
-
modal popups


Choose the right
PopUpManager
, and only
instantiate it when you actually get around to
showing a popup.

Component Patterns


MVC


Model Bead


stores properties


Spark model is baked into the component


View Bead


assembles sub
-
components, if any


Spark Skins combine sub
-
components and the actual
visuals


Controller Bead


manages events, updates model and
dispatches other events


Button.as


Has no model. There are no properties!


CSS for Button specifies a
ButtonView

as the view.


ButtonView.as

only knows how to display whatever
is specified by the background
-
image style.


That’s what the HTML Button does so that what we’ll
encapsulate and present in AS.


Flex buttons used for scrollbar arrows still think about
text label layout. That’s not pay
-
as
-
you
-
go.

TextButton.as


Wrapper that proxies label property to model.


CSS for Button specifies model with label property.


ButtonView.as

only knows how to display the label.


Different
ButtonView

could know how to display an
icon with a label.


Then you’d use a different model as well that supports
an “icon” property or style.

Button.js


Thin wrapper around HTML Button element


TextButton.js

is same since text behavior is built
-
in
to HTML.

Button Skin


For the basic component set, the skins are images
you can specify as a background
-
image in HTML.


Gif,
png
, jpg


They are loaded on the fly, no embedding


But the HTML5 Button set can load SVG as
background
-
image


You choose different components sets based on
target devices.

Panel.as


Specifies a
PanelView

that creates a
TitleBar

and
ContentPane


Another
PanelView

would create a
TitleBar
,
ContentPane

and
ControlBar
.


Other
PanelViews

would include a
StatusBar


TitleBar

is a Sprite with a
TextField


Some other
TitleBar

could be a Sprite with FTE Text

Panel.js


Also specifies a
PanelView
. This one also creates a
TitleBar

and
ContentPane
.


TitleBar

is a DIV with some text in it.

TextPromptBead.as


Overlays Text widget


Different
TextPromptBead

can have different
strategy for when to appear/disappear/reappear.


Different implementation could change styles and
text in a single text widget.

CSS in
FlexJS


CSS compliant


Custom properties are prefixed


AS
-
only properties are hidden in a custom media type
in a media query.


Need to create more and more sophisticated CSS
implementations in the AS side

ValuesManager


Abstraction for getting default values.


CSS Styles, Resources, etc.


If your app doesn’t use an expensive CSS feature,
you may choose a less expensive
ValuesManager

Compiling and Linking


A Flex project contains MXML, AS, and SWCs


The Compiler creates compilation units for every
class defined in MXML, AS and SWCs


FalconJX

generates JS only for MXML and AS
classes.


It assumes that external JS files exist for every class in a
SWC.

Block Diagram

Button.as

(SWC)

HTTPService.as

(SWC)

Falcon

Block Diagram

Button.as

(SWC)

HTTPService.as

(SWC)

FalconJX

Button.js

HTTPService.js

Google

Closure

Next Steps


More components


More compiler work


Metadata


Interfaces and other introspection


Release early versions


Basic features first, more features later


Over time, we should be able to replicate most but not
all of the current Flex SDK APIs

Summary


We need help!


All kinds of contributions welcome


Testing


Development


Documentation


Examples


Look for me in the Apache Flex Discovery Room
and on the Apache mailing lists.

Questions?


http://flex.apache.org/


mailto:dev@flex.apache.org


https://cwiki.apache.org/confluence/display/FLE
X/Alex%27s+FlexJS+
Prototype