Dr Nic

Ajax on Rails – Prototype vs JQuery

[Original article published on DevLounge - please post comments there]

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 Javajscript language, e.g. the each method to iterate a closure over an array. Sexy stuff.

But the following effect 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.

Related posts:

  1. Instant new Rails applications with the App Scrolls When I start a new project I want to start...
  2. Using CoffeeScript in Rails and even on Heroku I’m pretty excited about CoffeeScript as a clean-syntax replacement for...
  3. First look at rails 3.0.pre This article is out of date in some aspects....
  4. Rails themes can remember things I was getting annoyed at having to remember all the...
  5. Install any HTML theme/template into your Rails app Have you ever even bothered to Google for “rails...

4 Responses to “Ajax on Rails – Prototype vs JQuery”

  1. [...] But the following effect isn’t done using Prototype: [...]

  2. [...] jquery vs prototype II (Misc) Wednesday, August 23rd, 2006Another article focusing on differences between the two large javascript frameworks. Dr Nic on Ruby on Rails » Ajax on Rails – Prototype vs JQuery. This article mainly focus on the rails-perspective. Prototype and scriptaculous has become the main framework for that environment. I think jquery will be the standard framework in a future to come. Bookmark: digg – de.licio.us – ma.gnolia.com – technorati [...]

  3. [...] This was done with the increasingly popular jQuery, an up-and-coming javascript framework/library. (via Dr. Nic) [...]

  4. [...] Dr Nic’s Ajax on Rails – Prototype vs JQuery [...]