The Javascript Renaissance

Whilst working for PA Sport, I first stumbled across AJAX under the guiding hand of Nick Johns whilst we were developing a proof of concept site for on-demand statistical services for the English Premier League.

I remember at the time it was somewhat of a revelation and it proved a really nice solution to the problem of giving the user a timely feedback response when their script had (eventually) generated. Once I’d seen the possibilities for this I looked at a number of alternative situations that it could be applied, but in doing this it served as a reminder of just how fiddly and unforgiving Javascript can be.

After leaving PA Sport, I gave the AJAX a bit of a rest. However having seen what was possible when used correctly, and looking around at other’s thoughts and end user applications I began to realise that it was probably time to resurrect the those ancient javascript skills.

Much of the development communities refamiliarisation has been driven by Web 2.0. Personally I’m really grateful for this, as I think its added the finishing touch that was missing from a few of my web apps.

So for those interested, I’ve put together a bit of a list of the libraries, tools, links and other ‘bits and bobs’ I’ve found useful whilst rebirthing myself as a Javascript hacker.

I’ve split these down in to:

• Prototype
• DOM
• Unobstrusive Javascript
• Effects
• Verifiers & Minifiers
• Debugging
• Testing
• Other worthwhile reads

Prototype

For me the Prototype library really is one of the best finds. I wasn’t aware of how it stood up against the multitude of other frameworks out there. However after a quick post on DesignateOnline both Luke Redpath and Jordan Harper were more than happy to put my mind at rest.

After the getting the library downloaded it really is a case of getting you’re sleeves rolled up and getting familiar with the library. After working with it for a while, you begin to appreciate just how much of the hard work the library does for you, removing you from the inconsistencies in the different implementations of the DOM.

Personal favourites are the $() function, Ruby style arrays, Form Observers, Insertion classes, Ajax object, Form object and thats for starters.

That said documentation is a little on the scarce side once you’ve got past the all too familiar gushing, about just how god the library is blah, blah, blah.

• Prototype - get the library
• Sergio Pereria’s Prototype Documentation - probably the most comprehensive collection of Prototype documentation at the time of writing.
• Script.aculo.us Prototype Documentation - slightly less comprehensive, however provides some clearer examples of certain implementations
• Prototype Cheat Sheet - nice little summary of the library courteousy of Jonathon Snook

DOM

Once I’d began to fiddle with Prototype I was quickly able to get up and running and fortunately know my way round the DOM fairly well thanks to my XML apprenticeship.

That said with a bit of reading behind you, you should be able to quickly pick up the concepts. What I had struggled with is the browsers inconsistencies with certain implementations - this is where the hard work and frustration begin!

A Rough Guide to the DOM

The niggly bits

Unobstrusive Javascript

For me unobstrusive javascript is like music to my ears. Most web pages are like shifting sand, its not long before they change again. We’ve come a long way in seperating out presentation and structure using XHTML/CSS and now we can do it with Javascript.

Online Tools Intro - Christian Heilmanns intro to Unobstrusive Javascript

Beginning JavaScript with DOM Scripting and Ajax - Christian’s Apress book

Effects

Being honest barring a couple of initial experiments I’ve done very little with the effects side of things. As most people who know me will say its more about the backend grunt, than the frontend niceities.

Script.aculo.us - Thomas Fuchs heavy-hitter effects library

Moo.fx - lightweight effects library written on top of Prototype, weighing in at 3K!

Verifiers & Compression

Whilst not the same thing these two tools go hand in hand, and I’d class these as must haves as part of any development process.

First up is JSLint, works much the same as PHP Lint, verifying that the Javascript is valid and reporting on any errors both syntactic and stylistic. It isn’t going to set the world on fire, but Javascript is very fiddly and an extra set of (automated) eyes always helps.

Once you’ve got you’re Javascript through JSLint, why not think about some compression. Some of the Javascript libraries are fairly weighty, if you start using Prototype, Script.aculo.us and some SIFR javascripts on the same page you could comfortably be pushing 60K before images, css.

JSMin is my recommendation for this providing a windows exe file, and also PHP scripts and a handle of others to handle the compression. The results I’ve seen are fairly impressive averaging around 50% reduction in larger scripts.

JSLint

JSMin

Integrate both this in an automated build process like Phing, and you should be laughing.

EDIT: JSLint doesn’t currently have a PHP port like JSMIN, see Harry Fuecks post on sitepoint from 2004! So integration in to a build process may prove troublesome.
Debugging

This is really where alot of people feel really frustrated with JS. After all you can’t really on using alert for all you’re debugging.

Firefox really is the king of browsers for this type of thing with the likes of Firebug and Venkman.

I’d generally suggest using Firebug for the Status bar icon, console window and the Javascript command line. Its also very handy for the DOM inspector and viewing XMLHTTP requests.

When you want be big guns bring out Venkman, its pretty much the type of debugging engine you want with the ability to view different elements of you’re Javascript - project view, script view, stack view, console view source view. Along with debugging we should all be used to break points, step over, continue etc.

Firebug

Venkman

Testing

I’ll hold my hand up and say I haven’t done much with the unit testing side of things, but I’ve been doing some reading in to JsUnit and will definately be using this as part of my testing framework when the opportunity allows.

Other worthwhile reads

ParticleTree

Dustin Diaz

Encytemedia