POTM for May: jQuery

Submitted by Larry on 30 May 2007 - 12:31am

There was a time when I hated Javascript. I'm sure many people hated Javascript at one point. Many still do. Back in the 90s, Javascript seemed to exist primarily to confuse web developers, to provide buggy stock code that designers could copy and paste to provide pointless effects that broke in every browser but the one they were using, and to make web pages cute and therefore unusable.

In the modern day, though, that has changed. Javascript is now cool, and actually fun to program in. There are two main reasons for that, in my experience: browsers that only mostly suck instead of completely suck, and jQuery.

jQuery was not the first Javascript library by any means. That honor goes, I believe, to Prototype, which spun off from Web 2.0 poster child Ruby on Rails. jQuery is the one I use almost exclusively, however, for a number of reasons.

Size

jQuery, despite being a fully functional Javascript library with DOM handling, effects, Ajax support, and other goodies, is only about 20 KB compressed. Compare that with Prototype, which adds over 50 KB of baggage to every page load, minimum. And let's not mention the 300 KB behemoth that is Dojo.

Terseness

One of the reasons jQuery is so small is that it's very terse while still being expressive and readable. Everything in jQuery can be accomplished by stacking a few key concepts together in the right way, and those concepts are extremely flexible. A complete jQuery plugin can quite frequently fit on a single screen in my text editor, despite having a remarkable amount of power.

Learnable

jQuery at its core offers two fundamental tools: Find DOM nodes and do something to them. Finding DOM nodes is accomplished via CSS 3 and XPath selectors. If you know CSS, you can use jQuery. It's as simple as $('div#foo a.bar');. (That is, find all a elements of class bar that are descendants of div with id foo.) jQuery even supports more of the CSS 3 spec than the browsers themselves do.

Modular

Virtually any of the "do something to them" operations in jQuery are plugins. You can cherry pick which you want from a large collection of contributed plugins, or write your own quite easily. $('div#foo a.bar').fadeIn(); will cause all the selected elements to, you guessed it, fade in using a cross-browser-compatible method.

Community

I can't over-state how important this part is to any open source project. jQuery has a very active community around it, including a huge number of plugin developers, a very active and supportive mailing list, and even first-rate 3rd party documentation to support the official documentation.

Language-friendly

The main problem with Prototype is that is tries to turn Javascript into Ruby or another class-based language. That takes a whole lot of bytes and gives you a more verbose result. MochiKit tries to turn Javascript into Python, and is quite proud of it. Why, I'll never know. jQuery uses Javascript as, well, Javascript. Javascript is not a class-based language. It's a prototype-based object model with some functional language semantics borrowed from languages like LISP and Erlang. jQuery leverages that language design to provide a very small, very flexible, very readable system.

Almost all of the Javascript I write these days is in jQuery. If you use Drupal then you're already using jQuery. Drupal 5 and later include jQuery by default, and use it for all of Drupal's pre-packaged Javascript and Ajax effects. Adding your own effects is trivial.

jQuery is available under the BSD or GPL licenses. Most 3rd party plugins are as well, although a few are GPL-only.

For making Javascript fun again in a way that doesn't break the browser or the language, I hereby name jQuery my Project of the Month for May and award them this month's donation.