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