Appendix A. JavaScript Tools You Should Know

JavaScript is a young language in many ways. Although it has been around for about 15 years, only recently has it been used for large-scale projects. So the tools to help programmers do robust, debuggable programming are still being developed. Here are a few you should strongly consider using.

JSLint

This is Douglas Crockford’s JavaScript syntax checker. JSLint can test JavaScript code for all manner of possible problems. You can run JSLint from the website (http://jslint.com) or locally. There is a Drag and Drop widget in the Yahoo! widget set, and you can run it from the command line with Rhino (discussed later). A simple bash script will make this easy to run (see Example A-1). You can even hook JSLint into your editor.

If you use one tool for JavaScript, it should be this one. To understand why, read Crockford’s JavaScript: The Good Parts. That book describes in detail why JSLint makes the choices it does. It will catch many very common JavaScript bugs and should be considered a key part of every JavaScript programmer’s tool set.

To configure JSLint on a per-file basis, you can put comments at the top of the file. These can turn options on or off in the file as well as tell JSLint about global variables that are defined elsewhere.

Example A-1. JSLint shell wrapper

        #!/bin/bash

java -jar ~/bin/rhino/js.jar ~/bin/jslint.js $1
JSMin

It’s a fact of life for JavaScript programmers that our programs are downloaded in source form to the user’s web browser. This can be done more quickly through minification. JSMin performs a number of actions on a file, such as removing comments and whitespace. After running JSMin, files generally are about 30% of their original size. This means many fewer bytes have to be transmitted to the client.

Warning

JSMin is a one-way process, so make sure you have a copy of your files around. It also should not be used in development, as it makes debugging very difficult. And before running JSMin, make sure to run JSLint.

JSBeautifier

If your JavaScript code tends to get messy, JSBeautifier is a good tool to know about. It takes a JavaScript file and reformats it according to some basic rules. You can run this from the website or using Rhino from a command line on your desktop. All the JavaScript code in this book was formatted with this tool.

JSBeautifier can take a number of command-line options to specify indentation style and bracket style. Indentation can be tabs or spaces. The -i option controls indentation level.

JSBeautifier can also format JSON strings. Since it is written in JavaScript, you can embed it in other JavaScript programs. If you need to display a JSON structure at some point to a user, you can use this library to pretty-print it (see Example A-2).

Example A-2. JavaScript pretty printer

        #!/bin/bash

cp $1 $1.bak
export WORKING_DIR=`pwd`
cd    ~/bin/js-beautify

java -jar ~/bin/rhino/js.jar  beautify-cl.js -d ~/bin/js-beautify/  
-i 1 -b -p -n $WORKING_DIR/$1 > /tmp/$1
 
mv /tmp/$1 $WORKING_DIR/$1
Emacs JS2 mode

Emacs JS2 mode is a very nice framework for JavaScript editing. For those who already live in Emacs, this is very helpful.

Aptana

For those who wish to have a full IDE to develop JavaScript in, Aptana is a good choice. Aptana is a version of Eclipse customized for JavaScript. It has a lot of options that can be customized.

Warning

Aptana will reformat code, but it sometimes does so in strange ways—not bad, so much as just a little different.

YSlow

In a large web application, it is not unusual for loading to go slowly. If this is happening, you can use YSlow along with Firebug to find out where the bottlenecks are. The tool goes along with High Performance Web Sites by Steve Souders (O’Reilly), who also created YSlow. It covers much more than JavaScript, because it shows when each file is transmitted as part of the web page.

FireRainbow

FireRainbow is a Firebug plug-in that colorizes JavaScript in the Firebug script tab. It’s a very nice way to make code a little easier to read in the debugger.

Speed Tracer

Speed Tracer is a Google Chrome plug-in that lets you know what the browser is spending time on. Before you spend a few days optimizing JavaScript, find out if it will actually help. If CSS is the real bottleneck, this will tell you!

CoffeeScript

CoffeeScript is a cool new language that uses JavaScript as a compile target. If you like functional programming, this should interest you. It has been getting a solid following of late. There are several CoffeeScript books out or in the works. CoffeeScript claims to produce code that will always pass JSLint validation.

ClojureScript

If you like Lisp, check out ClojureScript, which is a compiler that will compile the Clojure dialect of Lisp into JavaScript. It comes from Rich Hickey, who created Clojure.

Rhino

Rhino is a Java-based JavaScript implementation. If you want to build tools to run on a command line in JavaScript, this is the tool for the job. A number of JavaScript programs, such as JSLint, will run under Rhino as well as the browser. In addition, Rhino can be used to allow JavaScript to script Java objects, which can be pretty useful.

Node.js

Node.js is a new server-side platform under development as of this writing. It uses the JavaScript event loop to create a nonblocking server that can handle a great number of requests very efficiently. Watch this project for cool things in the future.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.128.173.53