Transitioning to HTML5/JavaScript development

Recently, my duties changed from being primarily a Flash-based application developer to primarily being a HTML5/JavaScript developer.  I'm sure there are many developers who have undergone this change, however, my experience may be unique. Most Flash developers come from the Flex side, while I come from the OpenLaszlo side. OpenLazlo is similar to Flex, in that it compiles as a SWF to run in the flash player. But developing in OpenLaszlo involves writing a lot of your code in JavaScript, where Flex is ActionScript. Also, I come from a more Object-Oriented coding background (mainly Java with strict typing), and JavaScript coding is not OO by nature, so there were some challenges there.

Clint Smash! 	javascriptThe main discomforts I had to overcome were mostly in the way certain syntax styles, how closures work and their gotcha's, and how to fully embrace that JavaScript objects are not really objects, but functions. But JavaScript is a much looser language to work with than ActionScript 3: JavaScript is dynamically typed, while ActionScript is statically typed. So if a programmer can be disciplined and organized, coding can be quicker due to the flexibility and looseness of JavaScript syntax.

For a long time, developing rich user interfaces with OpenLaszlo was fun and exciting. Like Flex, it had a really extensive UI component set, as well as powerful data-binding capabilities. But OpenLaszlo is now pretty much a defunct project, so there is little to no developer support to improve the platform. We were starting to run into compatibility issues on different browsers related to the platform. On top of that, although Flash is supposed to have similar compatibility on all browsers, as new Flash Players were released, we started to notice new problems that were Flash-specific on certain browsers (especially on Macs and on Chrome). We also found it harder and harder to find really good developers who were Flash developers. On the side, we had been keeping tabs on HTML5 and the progress of its growing developer support, frameworks, and speed.

time to crush codeWhen we decided to make the plunge to rewrite our application, it was really fun to learn about the things you could do with HTML5 technologies — primarily Canvas — as well as the JavaScript frameworks and plugins that allowed you to build a pretty sturdy MVC architecture with data-binding, or use OO paradigms, or include fancy widgets in your application. Specifically with Canvas, we've been able to do all the things we've needed to do graphically, with improved performance on certain browsers.

Here are a few on my favorite aspects of doing HTML5/JavaScript development over Flash:

  • There’s no compile step, so we can increase productivity
  • We have access to great debugging tools like Firebug, as well as Unit testing frameworks like Jasmine
  • We can use CSS to do extensible styling of components
  • We get to join the vibrant HTML5 development community, where you can pretty much find any sort of framework or plugin to suit your needs and new things seem to appear daily
  • JQuery not only hides a lot of cross-browser issues, but also boosts up productivity with dozens of shortcut functions to most of the stuff people normally need to do on the web

Sometimes I miss the more robust graphics API, rendering logic, and frame-rate of Flash.  But seeing where the progress of the HTML and Canvas specs are going, and with much more browser support that is sure to include better performance enhancements, the opportunities to create productive and innovative applications is exciting.