Posted by Kevin D Smith @ 10:35 am on January 19th 2008

Prototype and jQuery and MooTools, Oh My!

I’ve been playing around with writing web applications lately and have been looking for a good Javascript library to help with Ajax and web browser differences. After doing a little searching, two libraries floated to the top: Prototype and jQuery.

Prototype was definitely the most popular, partially because of the script.aculo.us user interface library. Prototype is definitely extensive and fairly well-documented. On the other hand, it plays a lot of dirty tricks under the covers to do it’s work. I wouldn’t count it out just for that reason, because it is very popular and well-tested in the real world. I do find the script.aculo.us web site to have absolutely horrible navigation, which is very odd since it is claiming to be the premier user interface library.

The other problem I have with Prototype is that is is fairly large (~100k). I want to make my web application usable by people with dial-up access, so file sizes are very important. Through compression and other techniques, you can minimize the download time, but it is not something that can be ignored.

jQuery was the next candidate. jQuery seems to have a somewhat different focus than Prototype. Prototype is more of an application building framework, whereas jQuery seems to be more of a quick-and-dirty query-and-modify toolkit. I really liked the idea of jQuery and can see why it has a large following. Being able to use CSS selectors to locate elements and chain functions is very powerful. So powerful that I almost chose jQuery as the toolkit to use for my projects. What stopped me was the somewhat ugly API. The method names and arguments seemed to be somewhat inconsistent and overloaded to excess. It felt more like an accident than a design.

While deliberating over whether to choose Prototype or jQuery, I came across a forum of Ajax developers where MooTools was mentioned. I didn’t really want to research any more tools especially ones that didn’t have that big of a following. After seeing the MooTools web site though, I thought I’d give it a shot.

I really like the look of the MooTools web site. This may sound superficial, but I figure that if they have a good aesthetic for their web site, they probably care about what their code looks like too. Looking at their API confirms this. The API is very consistent and powerful. In addition, it is also modular so that you can simply include the pieces you need rather than having a monolithic library.

MooTools seems to be a happy medium between Prototype and jQuery. It has enough application building tools and extensions of native Javascript objects without getting too invasive or outrageously large. It also has the power of jQuery’s CSS selector method of locating document nodes.

If you haven’t figured it out yet, I’ve decided to use MooTools for my applications. I’ve been playing around with it for the past couple of days and am quite happy with the results. The API is very easy to work with and extremely powerful. It’s not all a love-fest though. I have had some major problems with getting the correct keys for key-based events, but I think that has more to do with the inconsistencies between browsers than anything else. Hopefully, they’ll come up with a fix for these problems soon. Until then, I’ll continue to learn more MooTools tricks and idioms and let you know how it goes.