Creating a fluid user experience in the Amaxus Web CMS interface requires a vast amount of sophisticated client-side development in JavaScript.

Because JavaScript is an interpreted language, it does not go through a compiler to give us syntactic peace of mind before reaching the browser. This can be problematic as Internet Explorer is a fiddly beast at times. Lots of things that work on Firefox do not work on Microsoft’s browser.

The most common IE problem we encounter is trailing commas in arrays. It doesn’t cause problems with Firefox, but it’s syntactically invalid and crashes IE. IDEs like NetBeans do highlight such errors but sometimes things slip through. IE7 and earlier versions have particularly vague error messages, so with a large product like Amaxus, we decided to play it safe and check all our code on a regular basis.

Douglas Crockford first developed a tool called JSLint way back in 2002. You can paste JavaScript into this tool to find errors, which is great, but it is a lot of work and hard to automate. Rhino is a JavaScript engine that runs in Java. In this example, we worked in Debian Linux, but you could just as easily implement this on a Mac or Windows box. We installed Rhino via:

apt-get install rhino

We then downloaded and concatenated http://www.jslint.com/fulljslint.js and http://www.jslint.com/rhino/rhino.js into a single file /usr/bin/jslint.js. We edited this file to set the options we wanted to check for. In our case, we only wanted to find the errors that cause IE7 to die. We also set up some of the common global objects we use (“predef” section).

...
if (!JSLINT(input, {bitwise: true, eqeqeq: false, immed: true,
            newcap: true, nomen: false, onevar: false, plusplus: false,
            regexp: true, rhino: true, undef: true, white: false,
            sub: true, browser: true, laxbreak: true,
            predef: ['Ext', 'Amaxus', 'jQuery', 'window', '$', 'ActiveXObject']
    }))
...

Next we created a simple script that checks an individual file for errors and highlights them in red. We put this in /usr/sbin/checkForJsErrors.sh:

echo $1
rhino /usr/sbin/jslint.js $1 | fgrep -e 'Extra comma' --color=always

We created the wrapper script /usr/sbin/chkThisDirForJsErrors.sh to make it easy to run:

find . -name "*.js" -exec checkForJsErrors.sh {} \;

Finally, going into the root directory of the project and running “chkThisDirForJsErrors.sh” will highlight any trailing comma errors.

Summary

This is a pretty rough solution but it has proven effective in finding those pesky trailing commas.

We’ve incorporated it into our CruiseControl build loop so that any errors that get introduced will be flagged up immediately.