FlexJS™ Flex™ For JavaScript Seattle Web App Developers Meetup January 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 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

Tools The 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.

Materials Screws 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.

Structure Tools 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?

FlexJS Flex 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? X/FlexJS