Javascript Build Tools

OCLC Developers are fans of the annual No Fluff Just Stuff conference, and we attended in force when it passed through Columbus, Ohio in early June. This year, Nathaniel Schutta led a particularly interesting session on Javascript build tools. His point that "you have no excuse for not testing your Javascript" was well taken. We've been thinking about tools and thought you might be interested in some we are working with.

Node.js

Many of you are familiar with this lightweight server that lets you run Javascript on the server side. Of course, a Javascript server alone does not have a Document Object Model, so more tools are required to fully test a website during a build. However, many of the build tools we consider require node.js to run.

Grunt

Grunt is build tool with many modules written for it that handles all aspects of the build task, runs on node.js and uses node.js's npm loader to install a variety of modules. For example, grunt can take your Javascript files, combine them, compress them and copy them to a build directory. Ditto for your CSS. And with a few directives inside your HTML file, grunt will install links to the JS and CSS files so the entire build package is a cohesive whole. It can also call test runners, so that your build won't complete unless the tests pass.

Testing

A classical assert-based testing tool is Mocha, although it can do BDD (Behavior Driven Development) style testing as well. One issue with Javascript testing is finding a way to test code that manipulates the Document Object Model. One solution is to incorporate a "headless webkit" tool such as Phantom into your build. Phantom can even capture screen shots for example. Finally, don't forget to check the quality of your Javascript with jsHint, which will remind you when you hoist a variable or test a value with a double equals sign instead of a triple one.

At NFJS, Nathaniel went into many more tools and frameworks, and I would encourage you to attend one of his talks to get a sense of the magnitude of what is available for creating your own Javascript build strategy.

Do you have a build strategy for your front end? One key point that was brought up again and again is that "a uniform build with tests means sleeping soundly at night." This discipline is standard practice on the server side with .NET and JAVA developers, and now most shops are moving to implement it on the front end as well. What is your experience with Javascript build tools? Let us know at [email protected].