When you unpack your shiny new version of Rails and generate your first Ajax link, you are using the Prototype library. It’s beautiful to use. It adds many Rails-like constructs into the JavaScript language, e.g. the each method to iterate a closure over an array. Sexy stuff.
But the following effect (open for demo) isn’t done using Prototype:
It was done in a few lines of Javascript using the jQuery library [1].
$(".tick").hover(function() {
$(this).removeClass("tick-off").addClass("tick-on").announceButton(this)
}, function() {
$(this).removeClass("tick-on").addClass("tick-off");
});
Prototype provides a comprehensive library of base classes, such as Element and Hash, where as jQuery is fundamentally different. It provides just one entity – the jQuery object. This is created using the familiar $ function and represents a collection of DOM nodes, rather than just one.
The jQuery object is then extended and extended and extended with all the functionality you need – scriptaculous-like effects, Ajax calls, prototype-like manipulations, etc. JQuery plugins
Yehuda Katz – author of autoDB – the dynamic admin console for Rails apps – has his feet deep in jQuery land as well. He manages the Visual JQuery documentation, and recently wrote an article comparing the philosophies of Prototype and JQuery, to help people understand how they are different.
The core problem for Rails developers who might like to try out jQuery is that it eventually conflicts with the prototype library when you start to use Rail’s “in-built” helpers for prototype.
But perhaps you do not need to use these helpers, as an increasing number of jQuery plugins start to provide more and more elegant client-side functionality. For example, an InPlaceEditor extension, and many others.
Want something truly pretty developed using jQuery – how about the planets revolving around the sun?
Work is also underway to integrate jQuery into Rails, including its own set of helpers, code named JQuails.
Many Rails developers might not be familiar with the abilities of alternative Javascript libraries as they get prototype/scriptaculous embedded for free. Yet it would be wise for all developers to be aware and competent in multiple frameworks, so that the best tools for each job can be selected. There is certainly some momentum behind jQuery in the wider development community. To Rails developers I say, Keep a Look Out!
[1] The Hover Demo Script was written as pure Javascript to make it easy to download. Firstly it disables the static image (for RSS feed and non-JS environments), and then creates the DIVs for the effect. The hover effect is then setup by applying the hover function to all elements of the class tick. The two functions we pass it perform the CSS class manipulation that gives the effect. Note the use of chain calls that make the syntax so attractive.
Note also that we’ve added a custom function to the jQuery object – announceButton. It assumes that only one button is active at a time, uses this[0] to determine which one it is. The function then returns the jQuery object (stored as this) to allow the standard method chaining to continue.
