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 technology-enhanced 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 can’t we use class-based inheritance?Can’t we have pixel-perfect control of layout?Why do we have to do cross-browser testing?

... to BARGAINING

Let’s get a library for class-based inheritance in JavaScript!Let’s do all of our text rendering in Canvas!Let’s 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 opinionsWe 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

Let’s be honest, dead or not, Flash isn’t all flowers and ponies.

● The payload of our app is large and we’ve 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?

We’re also tackling mobile deployment and that’s a whole other discussion.

THANKS!

Jason Craftjason.craft@pearson.com

Andrew Roussetandrew.rousset@pearson.com

http://githubenterprise.pearson.com/DCD

https://neo.pearson.com/groups/neocortex