FlexJS™Flex™ For JavaScript

Seattle Web App Developers MeetupJanuary 15, 2015

Alex Harui

Apache FlexJS, Apache Flex, FlexJS and Flex are are either registered trademarks or trademarks of The Apache Software Foundation in the United States and other countries

Disclaimer

Even though I am an Adobe employee and you are sitting in an Adobe conference room, this has nothing to do with Adobe.

FlexJS is part of Apache Flex which is a project in the Apache Software Foundation. It is open-source, and unconstrained by any corporate influence.

Anything I say is not an official statement of Adobe Systems Inc, the Apache Software Foundation, or even the Apache Flex project.

Who Am I?

• Flex SDK Developer since 2001.

• 30+ years experience

• Adobe pays me to contribute to Apache Flex• No real influence over what I contribute.

Agenda

• Tools and Developer Productivity• Compilers• Materials/Languages• Verifiers

• FlexJS• Overview• Demo

ToolsThe Right Tool for the Right Job

Takes Too Long

• Developing software generally takes longer than you’d like.• Finding mistakes.

• The longer it takes to find a mistake, the more expensive it is.

• Tools try to eliminate mistakes or help you find them sooner.

Frameworks

• Frameworks are sets of components that are designed to work together.• Should be fewer bugs than if you wrote that

code yourself

• Developing applications using frameworks essentially makes your job more of assembly than writing.• Attaching components together.

MaterialsScrews and Nails or Something Else?

Structured or Unstructured Languages

Nails and Screws

• Using JavaScript to attach framework components is essentially like using nails and screws to build everything.• You an attach any component to any other

component whether you are supposed to or not.

• IKEA and other “assemble-it-yourself” furniture makers understand the importance of specialty connectors.

Wood vs Steel

• Nobody makes skyscrapers out of wood and nails.• Steel and specialty connectors.

‘Compilers’

• JavaScript now has ‘compilers’ that try to figure out if you are attaching things properly• Requires proper documentation.• Only works if you can get all of your source

code together in one place• Otherwise, requires lots of trust.

Application Complexity

• Compile-time checking is great until your app gets big.• Impractical to gather all source in one place• Some apps like Form Managers are so big, they

don’t know the bounds of the source.

• Counter to Asynchronous/Modular development.

StructureTools work better when there is structured materials.

Languages

• Java and C++ are highly-structured• Early versions didn’t really allow unstructured

access• Spend time getting all types to coerce/match.

• JavaScript is little structure

• TypeScript, Dart, ActionScript are in-between.• More structure when you need it.• Save time by not typing ‘this’ as often.

Declarative Languages

• Declarative Languages are like schematic diagrams• Easier to see the parts of your application.• Otherwise, it is like an instruction manual

without pictures.

• HTML did not have extensibility.• Angular is all about markup extensibility• Web Components is as well.• FlexJS uses MXML.

Editors

• Editors can take structured languages and offer better code assistance.

• Some IDE editors prioritize what they offer for assignment to a variable

Verifiers

• Verifiers work at runtime to validate interfaces at runtime.• Java runtime has a verifier• ActionScript runtimes have verifiers

• That helps you find out when someone changed the implementation without having to execute the failing code path.

Flex

• Flex was popular because it combined all of those things into one SDK.• One Flex developer says that JS development

takes 40% longer.

• Flash helped reduce cross-browser testing.

• But why not take everything else and bring it to the JavaScript world?

FlexJSFlex For JavaScript

FlexJS

• Declarative Language - MXML

• Semi-Structured Language - ActionScript

• Runtime Verifier (Optional) – Adobe Flash/AIR

• Choice of IDEs – Adobe Flash Builder, FDT (hopefully JetBrains someday).

• Output to HTML/JS/CSS

Demo

• Compile to SWF

• Test SWF version• Verifies runtime code modules• Debug

• Cross-compile to HTML/JS/CSS

Runtimes

• IE9 and later, FireFox, Safari, Chrome, Android, IOS• Probably others as well• Deploy SWF to earlier versions of IE.

• Cordova/PhoneGap for Mobile

Mobile Demo

Fundamentals

• Any amount of JS that can be encapsulated and presented with an AS API can be attached to other encapsulated JS

• Emulate Browser behavior in most cases• Not trying to emulate the Flash Player in the

browser

JQuery Demo

Multiple Component Sets

• Goal is to have component sets that wrap popular JS UI libraries

• Another component set may make migration of existing Flex projects easier.

Under The Hood

• Components have a JS version and an AS version• The AS version can be a “mock” if you don’t

need to deploy the SWF version.• Some components are written once in JS and

once in AS• Many higher-level components are also cross-

compiled

Need Volunteers

• FlexJS is independent of any corporation.• Most folks contribute in their spare time.

• New volunteers can have as much influence as anyone else.• No hierarchy among the committers.

Questions?

• http://flex.apache.org

• dev@flex.apache.org

• https://cwiki.apache.org/confluence/display/FLEX/FlexJS