A few days with jQuery

I’ve been using Prototype as my main JavaScript library for a couple of years now. I never made the conscious choice to use it at first, it was bundled with Ruby on Rails and I slowly gained experience with it as I used Rails. Recently I’ve been doing more non-Rails applications with Prototype and have been having difficulties keeping the JavaScript maintainable and easy to understand. I’ve tried looking at several different ways to improve the code but they all called for some complex boilerplate or advanced JavaScript hackery.

Hearing a lot about jQuery and how easy it is to maintain, I decided to take a hard look at it. Several people have already recommended that I take a look at jQuery and was recently involved on a project that (mis-)used jQuery. Not wanting to be left in the dark anymore, I decided to take a look at jQuery on one of my larger JavaScript projects.

After using jQuery for a few days, I’m already hooked on three features:

  1. jQuery makes it really easy to wrap all your code in a namespace. Namespacing your JavaScript is important so you will not collide with other libraries or developers. By default you can put everything in the jQuery namespace, but it’s easy to extend jQuery to create your own namespace. I’ve been creating Prototype classes for this but they have a really dense syntax and are not commonly used.
  2. jQuery allows you to chain function calls. This means you can call a function on an object and then call another function on the object again. This allows you to pipe data through an object easily and reads a lot like Ruby. A great example I found on the jQuery wiki was hooking up a global Ajax indicator. This is a portion of a website that shows the user that something is happening in the background whenever an Ajax process is underway (like GMail’s red loading section)

 

jQuery("#loading").bind("ajaxSend", function(){
    jQuery(this).show();
}).bind("ajaxComplete", function(){
    jQuery(this).hide();
});

Looks like a normal function but if you break it down, it’s a one liner chained together.

 

jQuery("#loading").bind("ajaxSend", function(){ jQuery(this).show(); }).bind("ajaxComplete", function(){ jQuery(this).hide(); });
  1. The third benefit jQuery has is it’s plugin system. I’ve only explored it a bit but I see a huge community built up around third party plugins. I’ve always had issues with Event listeners with Prototype but I was able to just download a plugin that did the heavy lifting for me and let me move on to a more important part of the application. It will also help maintainance by being able to build custom plugins for each application.

I hate to echo what everyone else is saying but if you are doing a lot of JavaScript development, take a look at jQuery. There is also a project attempting to replace all the Rails Prototype/Scriptaculous helpers with jQuery versions. I’m not ready to rewrite all my Prototype code yet but I’m seriously considering using jQuery for all new development.

Eric

3 comments

  1. Joshua Clanton says:

    I don’t use that much Javascript, but when I do need it, JQuery is where I turn. It’s much more intuitive for me than trying to figure out JS from scratch (though I know I need to dig deeper).

  2. Wynn Netherland says:

    Great points, Eric! I agree with your three main bullets. Folks should keep in mind that it’s not all-or-nothing. jQuery can coexist in your Rails project with Prototype/script.aculo.us even without wholesale replacement using jQuery’s jQuery.noConflict() method.

  3. edavis10 says:

    Wynn: Exactly. In fact the project I’m using it on already has some Prototype code so I’m using @noConflict()@ already. I actually prefer using the @jQuery@ object over @$@.

Comments are closed.