Ajax: Tools of the trade

Sky-Tiger

Crosscheck

Browser quirks and incompatibility are the bane of JavaScript developers. "It works in Firefox" is a common refrain. And although you might be able to run your tests across various operating systems with multiple browsers, maintaining a small server farm isn't trivial (or in some cases possible). All of the testing tools I've discussed thus far ultimately require a browser, and browser testing is notoriously slow. How do we overcome these dueling problems? Crosscheck to the rescue!

Crosscheck runs on the JVM, taking advantage of its ability to run JavaScript. Instead of spawning browsers, Crosscheck tries to simulate the various browser/OS combinations. Because it runs on the JVM and doesn't need to launch browsers, Crosscheck tests are much faster than other options. It also offers a simple automation path, making it a natural for inclusion on your CI box.

Crosscheck is a bit out of date, but if you're struggling with the multi-OS/browser issue, you owe it a chance.

Sky-Tiger

Testing the UI

Unit testing your JavaScript is a good idea, but sometimes -- say in complex Ajax interactions -- you just need to test at the user interface level. This section takes a quick stroll down the UI testing aisle. Although UI tests tend to be slow and somewhat brittle, they can also provide a helpful safety net.
Selenium

Selenium is a Web testing tool from the good people at ThoughtWorks. The Selenium project is broken up into the IDE (a Firefox add-on), Remote Control, and Grid. The IDE, shown in Figure 6, allows you to record an interaction and then either play it back in the default runner or export the test to any of six languages, where you can add them to your preferred testing tool.

Figure 6. The Selenium IDE
Figure 6. The Selenium IDE

Remote Control is a simple server that can launch and kill browsers, allowing you to easily incorporate Selenium tests into your CI server. Grid takes Remote Control to the next level by distributing tests to multiple machines, thus speeding up your test runs.

Sky-Tiger

YUI Test

Although YUI Test is primarily a unit-testing framework, it does allow some simulations of the DOM and user interaction. Although its capabilities are not as complete as Selenium's or Watir's, it's a viable option, especially if you're already using it to test your JavaScript.
Utilities

A number of tools that don't fit into any particular category are very useful in developing JavaScript. In this section we'll take a look at tools that verify that you aren't committing basic crimes against JavaScript, shrink your code for production, and keep your code well documented.
JSLint

It can be tricky to write good JavaScript. Any number of corner cases can easily slip by if you're not paying attention. Add in the sheer volume of poorly written JavaScript that has been copied and pasted over the years and, well, you get a mess. JSLint examines your code looking for common errors and bad practices. If you follow its advice, you'll have better code when you're done. Your feelings might be hurt in the process, but the final result is worth it. To test your code, you can either cut and paste it into the verifier box (shown in Figure 7) on the JSLint Web site (where you can set a plethora of options) or you can run it from the command line, thanks to Rhino (an open source JavaScript implementation written in Java).

Sky-Tiger

Minifiers

As we write more and more JavaScript, we can end up with some pretty hefty page weights. And although more and more users are surfing on broadband, we still should minify our JavaScript. A variety of options, including Doug Crockford's JSMin and the YUI Compressor, are available. You may want to try a couple of different options until you settle on the one that works best for your code base and build system. Whichever tool you choose, do shrink your JavaScript before you go to production.

Sky-Tiger

Documentation tools

Documenting your JavaScript can be vital for long-term use and maintenance. You won't find anything as standard as Javadoc, but there are a variety of alternatives. The Prototype library uses PDoc, and YUI uses YUI Doc. You can incorporate either into your world; experiment to see what works best for you.

Sky-Tiger

In conclusion

The state of JavaScript development is strong. No longer are JavaScript developers relegated to alerts and a text editor. Today, we have IDEs with autocomplete, full-fledged debuggers, and a variety of testing tools. JavaScript is a first class citizen in any Web application and today, the JavaScript developers of the world have a top-notch set of tools for crafting world-class interactions.