Untitled Presentation
-
Upload
andrewrousset -
Category
Documents
-
view
10 -
download
0
Transcript of Untitled Presentation
![Page 1: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/1.jpg)
The Kubler-Ross Model of Transitioning from ActionScript to JavaScript/HTML5 Jason Craft and Andrew Rousset
![Page 2: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/2.jpg)
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
![Page 3: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/3.jpg)
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
![Page 4: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/4.jpg)
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)
![Page 5: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/5.jpg)
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
![Page 6: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/6.jpg)
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!
![Page 7: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/7.jpg)
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
![Page 8: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/8.jpg)
PROTOTYPING
Pure JavaScript implementation of sequencing and item
Mock node.js backend
Module Pattern, prototypal inheritance, pretty independent (just jQuery)
![Page 9: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/9.jpg)
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)
![Page 10: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/10.jpg)
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
![Page 11: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/11.jpg)
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
![Page 12: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/12.jpg)
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
![Page 13: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/13.jpg)
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.
![Page 14: Untitled Presentation](https://reader034.fdocuments.us/reader034/viewer/2022051608/5450845db1af9fd07b8b4f0c/html5/thumbnails/14.jpg)
THANKS!
Jason [email protected]
Andrew [email protected]
http://githubenterprise.pearson.com/DCD
https://neo.pearson.com/groups/neocortex