Skip to content
July 9, 2007 / jphoward

Comparing JS Toolkits

I’ve spent the weekend looking at a variety of JavaScript libraries. I seem to have done something similar every year for the last seven years or so. In the past, it has always been a frustrating experience. The libraries have generally been poorly documented, buggy, and trying to do too much.

This time around, however, it’s been a completely different experience. Just about all of the libraries I have tried have been documented, robust, and effective. I used Aptana to quickly test a wide range of libraries. the libraries that I tried were:

Using Aptana made this very easy – since recent versions of Aptana have all of the libraries already built into it, it was as simple as choosing the "new project" wizard, and selecting each library. The Wizard even creates a sample page, showing that library in action.

I realised that there are really two types of library: those which try to be a complete application building toolkit, and those which simply try to make everyday scripting tasks more easy. Ext and Dojo are complete toolkits. The others are really "helper libraries" (Scriptaculous is actually an add-on to Prototype for UI glitz, and unit testing). I found a good description of this in a blog post entitled The sliding scale.

Along with Ext and Dojo, there are also some commercial libraries attempting to provide complete application toolkits. There’s a good review of these in an InfoWorld article: Top AJAX tools deliver rich GUI goodness. In my testing, these didn’t seem as robust as the open source solutions, although the InfoWorld reviewer came to the opposite conclusion.

Anyway, my interest at the moment is in finding a useful helper library, so I haven’t looked much further that these application toolkits (although they impressed me enough that I’d love to write a complete app with them some day – applications written in Ext in particular look very attractive and usable, without requiring much code).

JQuery, MochiKit, MooTools, and Prototype have more alike than they have differences. They all have the useful ability to use CSS selector notation to extract a range of elements from a page. They all then let you do things to these elements, such as select a filtered subset, attach an event, and change their class.

Some let JavaScript be JavaScript, whilst others try to turn it into something else. For instance, MooTools has a "class" module which attempts to add classical inheritance to JavaScript. I don’t really see the point of this — JavaScript already has an excellent way of providing code reuse, through its use of prototypes. On second thoughts… doing encapsulation properly in JavaScript does require some fairly messy code, which MooTools does a good job of encapsulating away.

jQuery has perhaps the most original interface, which also means that it has a substantial learning curve for programmers from other fields, when trying to achieve something complex. The good news is that there is already one jQuery book, and three more in development. My main concern with jQuery is that it doesn’t seem to play nicely with "regular JavaScript". It seems that you have to do everything using jQuery’s chained methods (or create ‘plugins’ for stuff which is missing in jQuery).

All of the "helper libraries" are pretty small (~20-30k), as long as you use the packed version. In terms of speed, MooTools and Prototype are twice as slow as the rest of them under Internet Explorer, but twice as fast as the rest of them under Firefox. JQuery has perhaps the most reliable performance under all browsers.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: