D

JavaScript Tools

Writing JavaScript is a lot like writing in any other programming language, with tools designed to make development easier. The number of tools available for JavaScript developers continues to grow, making it much easier to locate problems, optimize, and deploy JavaScript-based solutions. Some of the tools are designed to be used from JavaScript, whereas others can be run outside the browser. This appendix provides an overview of some of these tools, as well as additional resources for more information.

VALIDATORS

Part of the problem with JavaScript debugging is that there aren’t many IDEs that automatically indicate syntax errors as you type. Most developers write some code and then load it into a browser to look for errors. You can significantly reduce the instances of such errors by validating your JavaScript code before deployment. Validators check basic syntax and provide warnings about style.

JSLint

JSLint is a JavaScript validator written by Douglas Crockford. It checks for syntax errors at a core level, going with the lowest common denominator for cross-browser issues. (It follows the strictest rules to ensure your code works everywhere.) You can enable Crockford’s warnings about coding style, including code format, use of undeclared global variables, and more. Even though JSLint is written in JavaScript, it can be run on the command line through the Java-based Rhino interpreter, as well as through WScript and other JavaScript interpreters. The web site provides custom versions for each command-line interpreter.

JSHint

JSHint is a fork of JSLint that provides more customization as to the rules that are applied. Like JSLint, it checks for syntax errors first and then looks for problematic coding patterns. Each JSLint check is also present in JSHint, but developers have better control over which rules to apply. Also similar to JSLint, JSHint can be run on the command line using Rhino.

JavaScript Lint

Completely unrelated to JSLint, JavaScript Lint is a C-based JavaScript validator written by Matthias Miller. It uses SpiderMonkey, the JavaScript interpreter used by Firefox, to parse code and look for syntax errors. The tool has a fairly large collection of options that enable additional warnings about coding style, undeclared variables, and unreachable code. JavaScript Lint is available for both Windows and Macintosh, and the source code is available as well.

MINIFIERS

An important part of the JavaScript build process is crunching the output to remove excess characters. Doing so ensures that only the smallest number of bytes are transmitted to the browser for parsing and ultimately speeds up the user experience. There are several such minifiers available with varying compression ratios.

JSMin

JSMin is a C-based cruncher written by Douglas Crockford that does basic JavaScript compression. It primarily removes white space and comments to ensure that the resulting code can still be executed without issues. JSMin is available as a Windows executable with source code available in C and many other languages.

Dojo ShrinkSafe

The same people responsible for the Dojo Toolkit have a tool called ShrinkSafe, which uses the Rhino JavaScript interpreter to first parse JavaScript code into a token stream and then use that to safely crunch the code. As with JSMin, ShrinkSafe removes extra white space (but not line breaks) and comments but also goes one step further and replaces the names of local variables with two-character variable names instead. The result is smaller output than with JSMin without any risk of introducing syntax errors.

YUI Compressor

The YUI team has a cruncher called the YUI Compressor. Similar to ShrinkSafe, the YUI Compressor uses Rhino to parse JavaScript code into a token stream and then remove comments and white space and replace variable names. Unlike ShrinkSafe, the YUI Compressor also removes line breaks and performs several other micro-optimizations to save bytes here and there. Typically, files processed by the YUI Compressor are smaller than those processed with either JSMin or ShrinkSafe.

UNIT TESTING

Test-driven development (TDD) is a software-development process built around the use of unit testing. Until recently, there weren’t many tools for unit testing in JavaScript. Now, most JavaScript libraries use some form of unit testing on their own code, and some publish the unit-testing framework for others to use.

JsUnit

The original JavaScript unit-testing library is not tied to any particular JavaScript library. JsUnit is a port of the popular JUnit testing framework for Java. Tests are run in the page and may be set up for automatic testing and submission of results to a server. The web site contains examples and basic documentation.

YUI Test

Part of the Yahoo! User Interface Library (YUI), YUI Test can be used to test not only code using YUI but also any JavaScript on your site or application. YUI Test includes simple and complex assertions, as well as a way to simulate simple mouse and keyboard events. The framework is completely documented on the Yahoo! Developer Network, including examples, API documentation, and more. Tests are run in the browser, and results are output on the page. YUI uses YUI Test to test the entire library.

Dojo Object Harness (DOH)

The Dojo Object Harness (DOH) began as the internal unit-testing tool for Dojo before being released for everyone to use. As with the other frameworks, unit tests are run inside the browser.

qUnit

qUnit is the unit-testing framework designed for use with jQuery. Indeed, jQuery itself uses qUnit for all of its testing. Despite this, qUnit has no dependency on jQuery and can be used to test any JavaScript code. qUnit prides itself on being a very simple unit-testing framework that lets people get up and running easily.

DOCUMENTATION GENERATORS

Most IDEs include documentation generators for the primary language. Since JavaScript has no official IDE, documentation has traditionally been done by hand or through repurposing documentation generators for other languages. However, there are now documentation generators specifically targeted at JavaScript.

JsDoc Toolkit

The JsDoc Toolkit was one of the first JavaScript documentation generators. It requires you to enter Javadoc-like comments into the source code, which are then processed and output as HTML files. You can customize the format of the HTML using one of the prebuilt JsDoc templates or you can create your own. The JsDoc Toolkit is available as a Java package.

YUI Doc

YUI Doc is YUI’s documentation generator. The generator is written in Python, so it requires a Python runtime environment to be installed. YUI Doc outputs HTML files with integrated property and method searches implemented using the YUI’s Autocomplete widget. As with JsDoc, YUI Doc requires Javadoc-like comments to be inserted into the source code. The default HTML can be changed through the modification of the default HTML template file and associated style sheet.

AjaxDoc

The goal of AjaxDoc is slightly different from that of the previous generators. Instead of creating HTML files for JavaScript documentation, it creates XML files in the same format as those created for .NET languages, such as C# and Visual Basic .NET. Doing so allows standard .NET documentation generators to create documentation as HTML files. AjaxDoc requires a format of documentation comments that is similar to the documentation comments for all .NET languages. AjaxDoc was created for use with ASP.NET Ajax solutions, but it can be used in standalone projects as well.

SECURE EXECUTION ENVIRONMENTS

As mashups became more popular, there was a greater need to allow JavaScript from outside parties to exist and function on the same page. This opens up several security issues regarding access to restricted functionality. The following tools aim to create secure execution environments in which JavaScript from a number of different sources can exist without interfering with one another.

ADsafe

Created by Douglas Crockford, ADsafe is a subset of JavaScript deemed safe for third-party scripts to access. For code to run within ADsafe, the page must include the ADsafe JavaScript library and be marked up in the ADsafe widget format. As a result, the code is assured to be safe for execution on any page.

Caja

Caja takes a unique approach to secure JavaScript execution. Similar to ADsafe, Caja defines a subset of JavaScript that can be used in a secure manner. Caja can then sanitize this JavaScript code and verify that it is doing only what it’s supposed to. As part of the project, a language called Cajita is available, which is an even smaller subset of JavaScript functionality. Caja is still in its infancy but shows a lot of promise for allowing multiple scripts to run on the same page without the possibility of malicious activity.