Feature
Post

Category
Code


Ajax on Rails – Prototype vs JQuery

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.


  1. By summae posted on August 23, 2006 at 11:34 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi,
    On your site, in my browser, firefox 1.5.0.6, your example is simply functioning as a link to Dr. Nic. I believe this is a bit confusing, as this is supposed to be the original article, and there is no mention that this is the way it is supposed to work, as in, “clicking on this example will take you to the site where it will actually be demonstrated. You may want to clear this up. Other than that great article.

  2. By aj posted on August 23, 2006 at 11:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    We were having (strange) problems getting the example to function right in my install of WordPress. I’ll try to get the in-post example working correctly today.

  3. By Ronalfy posted on August 23, 2006 at 12:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I think summae brought up a good point about the original article problem. I’ve noticed that several of the articles on this site are cross posted. Why is that? I feel if articles are written for this site, then this site should be the only place where the articles can be found. Just my opinion.

  4. By Dr Nic posted on August 23, 2006 at 12:16 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I agree that the article should be in one place. It was written for Devlounge, but the example wasn’t working. The solution was to link the article to a duplicate where WordPress allowed it to work.

    I’ll update the article to clear this up in the text.

  5. By Dr Nic posted on August 23, 2006 at 12:17 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Sorry, I spoke too soon. AJ has it working in a popup.

  6. By aj posted on August 23, 2006 at 12:18 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    The “the following effect” now opens in a popup window, so there’s no need to leave the site.

    @Ronalfy, all of our featured articles are usually not cross posted, for the same reason you have supplied. We like our content to be site specific. Some of our previous staff (who have since been removed), wrote some articles and did a lot of linking to their own sites, where they reposted the article. Anything is “Sidenotes” will usually point to full articles elsewhere, because that’s what Sidenotes is about.

  7. By summae posted on August 23, 2006 at 12:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I think the change you made, in turning it into a link for a popup example, did help. My problem was indeed simply that there was confusing that the example did not work on the page, and it did not. I would have even been fine if you simply stated that you were linking to an external page to demo the example, and left the link to Dr. Nic as it was.

    To Ronalfy, thank you for your support, but I do understand why these articles are cross-posted. The authors of these excellent articles would like to have the articles appear on there own websites, in addition to devlounge, and if devlounge did not allow this, well then they would have a very hard time getting so many good articles.

  8. By aj posted on August 23, 2006 at 1:54 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @summae, you’re also right, we have exceptions to our rule, for example, there’s no reason for Nic to remove his article on his site even though we’ve got the demo working here, because the original purpose of the cross linking between articles was to show the working demo. Anyways enough side talk, let’s get back to comments on this wonderful article :)

  9. By Matthijs posted on September 2, 2006 at 2:35 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice article, thanks. I do want to add though that the example is still confusing. First I opened the link to the demo in another tab (as I always do). But then you’ll just end up on the same article page, no demo popup. Then after reading the comments, I understood it’s a popup. So I just clicked the link and indeed, a new window opens. But then my no-script extension blocked the script. I did allow script from devlounge, so I was a little suspicious to allow js from drnicwilliams.com, a domain I didn’t know (xss anyone?). So to the author and anyone reading this: you can’t make it obvious enough. Never. Just mention in big fat letters what will happen. What about my 80 yr old grandma who … well ok, she’ll probably not be interested in jquery and prototype :)

    But a nice article and demo, cheers.

  10. By Aaron posted on November 26, 2007 at 6:35 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I just completed a plugin called jRails that makes using jQuery with Rails very easy. It is essentially a drop-in jQuery replacement for Prototype/script.aculo.us on Rails and you get all of the same default Rails helpers using the lighter jQuery library.
    http://www.ennerchi.com/projects/jrails

  11. By Snowcore posted on January 10, 2008 at 9:47 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I think that jQuery is the best framework and it will remove Prototype.js

  12. By theBecFromMontreal posted on March 30, 2009 at 9:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Quick question:

    I’ve been working hard trying to find a real meaning to the topic about the Javascript framework war (JFW).

    The thing is, this debate is not helping any of us.

    Designers prefer jQuery because it’s more fun and cute (From what I read on blogs and around me).

    Programmers like me love Prototype for one thing (amoung others): real event binding with data/OOP (which is non-sens in jQuery because jQuery is suddenly not cute when we add complexity. But, the thing is, I’m a complexity specialist. I develop Web Applications, which, sometimes, they must fit with the complexity of my clients. Designers do not deal with complexity: they make the application look good. And they are very good at it. Their work is very important and valuable, but Prototype gives me more power of abstraction.)

    Could we all of us be more productive and work togheter? A solution: Combine jQuery and Prototype?

    Combine the cute way of coding effects (because this is all about), and combine the powered structure of Prototype?

  13. TrackbackDr Nic on Ruby on Rails » Ajax on Rails - Prototype vs JQuery