The Kubler-Ross Model of Transitioning from ActionScript to JavaScript/HTML5

Jason Craft and Andrew Rousset

Flash is "dead" and Flash programmers are trying to deal in stages... Denial: Let's stick with Flash, it'll come back! Anger: JavaScript can't do what ActionScript can... Bargaining: We can code in JavaScript just like we did ActionScript and Flex. Depression: (See Anger) Acceptance: Appreciating JS and the JS/HTML5 ecology for what it is and what it can do

We develop the TestNav Content Layer (TNCL): Large, enterprise-grade ActionScript 3 and Flex application for Flash Player and AIR runtime with all the enterprise bells and whistles (CI, unit testing) Client layer for delivering test content, tools, innovative technologyenhanced item from XML content. Heavy use of 2D drawing capabilities Manages and communicates responses and states of all items as the student is taking it Extensible to embed arbitrary Flash widgets (sims, for example) and initialize/communicate with those via XML Communicates with a server component via a native API/BlazeDS

DENIAL: Let's stick with Flash! Display Object Model allows us to easily create arbitrary interfaces with a reasonable amount of code. ActionScript has evolved to look more like Java with all the structure that implies. Enterprise support: FlexMojos, FlexUnit, development tools (debuggers, profilers, IDEs) Compile-time checking is helpful One plugin across platforms reduces cross-browser/cross-OS issues much less (although not non-existent)

ANGER: JavaScript is the wild west/for babies/total chaos/not a real language/not enterprise Not statically-typed, no compile time checking Bad things require best practices management (global abatement, "truthiness", eval() ) Enforces fewer best practices through syntax and structure, so code review and coordination becomes more important and more of a cost

ANGER... Why cant we use class-based inheritance? Cant we have pixel-perfect control of layout? Why do we have to do cross-browser testing? ... to BARGAINING Lets get a library for class-based inheritance in JavaScript! Lets do all of our text rendering in Canvas! Lets use Google Web Toolkit! Or Dart! Or something!

RESEARCH We did a lot of research (a week or so per quarterly release, April 2011-April 2012)

Reviewed frameworks and toolkits Architectural Approaches Enterprise Infrastructure, Build Stacks HTML5 experiments with jQ UI, SVG, Canvas Prototypes in JavaScript

PROTOTYPING Pure JavaScript implementation of sequencing and item Mock node.js backend Module Pattern, prototypal inheritance, pretty independent (just jQuery)

ACCEPTANCE Some parts of the new approach are much easier:

Before, we pretty much wrote a browser (something that took markup and turned it into screen renderings) Now we can just use the browser/the DOM

We can leverage what's best about JavaScript:

Prototypal inheritance models (mostly)

FRAMEWORKS! Frameworks are like opinions We like http://todomvc.com/ We like angularJS:

Nice to have a structure out the door Global abatement Bidirectional binding Leverages HTML directives, clean syntax, less code Some similarities to Knockout.js

But we do have some concerns: Kind of heavy some frameworks make your app a framework app as much as a JS app Many frameworks are young and most are not super with the docs

DESIGN/DEVELOPMENT We worked on infrastructure setup to manage some of our concerns Best practices in development: JSLint/JSHint and "use strict" Script Loading and require.js Rethinking our APIs as REST

ACCEPTANCE Lets be honest, dead or not, Flash isnt all flowers and ponies.

The payload of our app is large and weve had to spend a lot of time managing file size and performance Developer/open-source community is smaller and less active compared to JavaScript Encoding travels all the way through the workflow and that caused some issues with assets Not so much with the accessibility

NEXT STEPS There are still some challenges: There are unit testing frameworks, and we like some of them (Jasmine) but mocking against the framework has made code coverage a challenge. Any recommendations? We are still putting together automation for cross-browser testing. Anyone have a successful model? Were also tackling mobile deployment and thats a whole other discussion.

THANKS! Jason Craft jason.craft@pearson.com Andrew Rousset andrew.rousset@pearson.com http://githubenterprise.pearson.com/DCD https://neo.pearson.com/groups/neocortex