HTML5 prototyping with Node and Knockout

Over the past couple of months, a small team at Red Badger has been working on a number of HTML5 prototypes for an interesting client. Speed of development and easy iteration have been essential so we've taken the opportunity to try out a new technology stack which has given what we were looking for and is exciting the whole business.

Maybe a demanding prototype schedule isn't the ideal place to chuck away everything you're used to and start afresh, but actually a lot of the front-end development has built on tools and themes we've worked with throughout 2011 and we've found that the speed and ease of using Node has more than compensated for the learning curve. So, what have we been using?

Server

Node - Underpinning everything we've been doing in our prototyping project; Node is fast, event-driven and built on Javascript. Its been fascinating for myself, as a primarily front end developer, and Stuart with an ASP.net background to see how our respective specialisms are converging on a single set of tooling. The module loading system, NPM, which is similar to Ruby's Gem ecosystem, also makes it incredibly easy to pick up and play with the many extensions that are out there - and to create your own too.

Express - A development framework for Node, giving RESTful routing and content negotiation. After working with Open Rasta in .net MVC on a previous project, the ease of setting up applications using Express has been a delight.

Jade - With Express providing the application routing and view rendering, we next add Jade for templating. A HAML-style syntax, offering us simplicity and brevity but compiling to really well-formed HTML and easy to use with HTML5 data-* attributes for Knockout (which we'll come to later). In fact having used Jade for a while now I'm not sure I want to go back to writing "proper" HTML.

Step / Async - Node's asychronicity takes some getting used to after having worked with linear control flows for such a long time. Imagine AJAX callbacks as the fundamental way a language works - you can't rely on other parts of your application providing data at the moment you need them, so you need to be able to create queues for parallel and serial execution. Step and Async are two modules we've tried out for this, both have their benefits but Async seems to be slightly in the lead for what we're doing.

Now - The other great benefit of Node is its ability to serve real-time applications, and the Now module takes this to almost magical levels. Existing as a namespace on both the client and server simultaneously, you can call client methods from the server (and vice-versa) to push data instantly as a general or targetted broadcast. Seeing this in action has really convinced us that Node is something to get excited about, and has wowed the client too!

Client

Knockout - We used Knockout on other projects throughout 2011, but with Node's inherent ability to supply real-time data its really coming to its own. It's a Javascript library implementing the MVVM (Model-View-View Model) pattern, which should be familiar to Silverlight developers, and makes rich UIs a breeze to update. The new 2.0 version, released during the Christmas break, removes the reliance on jQuery for its default templating which really opens up its flexibility.

Underscore - Described a 'utility-belt library' for Javascript, Underscore is another tool that is compimentary to the likes of jQuery and adds a whole raft of functional programming methods to objects and arrays (among other things). It also runs as a Node module so we can make use of it on both client and server, great for code consistency.

Ender - In fact with Knockout and Underscore at work, it was beginning to feel like jQuery had been relegated to just a "ready" utility, DOM selection and effects. That's a lot of weight for something we weren't using very much so as an alternative we're trying out Ender, which allows you to compile your own library from smaller modules - such as the lightweight DOM selector Qwery. And it all installs and builds in a similar approach to NPM.

LESS - A CSS pre-compiler, and another tool we used during 2011, but as a native Node module its integration is now much easier. If you're developing in a Node environment you can use it to watch for LESS file changes and compile locally (we also use LESS.app on OS X), and then deploy the LESS and have the server startup create a complled and minifed version in production. Alongside Jade and Coffeescript its beginning to feel like compilation from more efficient syntaxes down to browser-readable files is becoming a key element to web development.

The whole picture

As well as this Javascript-oriented development we've also been trying out MongoDB and Redis for data storage as part of the stack, with equally encouraging results. And to make project compatibilty and pair programming between our Windows, Mac and Ubuntu users easier we've given JetBrains' Webstorm (and PHPStorm) IDE a thorough test drive - given it has all that familiar Reshaper goodness from their Visual Studio tools its looking like a great combination so far.

It might seem that, with all these Javascript-heavy technologies in HTML5 documents, older browers won't get a look in. As we're prototyping on this project perhaps its not important, but actually support is pretty good. Every view Node creates is sent as rendered HTML, just like any other web server, and in fact due to its speed we're finding that we can make sites less "AJAX-y" than we might otherwise - which of course is better overall for accessibility and discoverabilty. On the client side, Knockout is compatible back down to IE6 and even the 'magic' of Now is mobile compatible, with beta support for older IE versions. Of course we want to move away from those legacy browsers as much as any other developer, but if it's a client requirement this stack can still provide it.

So as a result of these experiences we're investigating using Node and its related technologies more widely at Red Badger during 2012, its already looking like its going to be an exciting year!