Jquery vs Prototype/Scriptaculous

About two years ago I started learning AJAX and drag and drop.  The first project I applied it to was an existing project that was using Prototype and Scriptaculous.  So, I didn’t really have a choice as to what library I was going to use.

Two years later, I do not know Jquery all that well, but I am absolutely falling in love with.  Doing things with Jquery seem to be 10 times easier to me.

I always struggled with the each() function that I seemed to be constantly using with Prototype.  Jquery seems to understand this and simplify things for us.

In this article, I’m going to describe my top reasons why I am becoming a Jquery lover over Prototype.

1. Set up draggable/droppables
2. Perform AJAX call
3. Jquery “noConflict()”
4. Jquery is minified

Set up draggable/droppables

Below are two examples.  One example is Jquery and setting up all <li> elements to become droppable elements on my page.  The second example is Scriptaculous and setting up all <img> tags to be draggable elements.

Jquery

[code]$(“ul li”).droppable({
hoverClass: ‘droppable-hover’,
greedy: true,
tolerance: ‘pointer’,
drop: function(ev, ui) {

}
});
[/code]

Scriptaculous

[code]$A($(‘draggables’).getElementsByTagName(‘img’)).each(
function(item) {
new Draggable(
item,
{
revert: true,
ghosting: true
}
);
}
);
[/code]

As you can see there is not a lot of difference in lines of code, but it’s so much easier for me to remember Jquery’s syntax of $(“ul li”) because I use the exact syntax with every other Jquery statement I perform.  I can never remember the .each() with a function inside of that that contains an item.

Perform AJAX call

Below are four examples.  One example is Jquery perfoming a GET request and when it’s complete a custom function to perform something with the data.  The second example is simply loading the results of a GET request directly into an element.  The next two examples are similar, but for Prototype.

Jquery

[code]$.get(url, function (data) {
// do something with that data
});
[/code]

[code]$(“#someid”).load(url);
[/code]

Prototype

[code]new Ajax.Request(‘/some_url’, {
method:’get’,
onSuccess: function(transport){
var response = transport.responseText || “no response text”;
alert(“Success! \n\n” + response);
},
});
[/code]

[code]new Ajax.Request(‘/some_url’, {
method:’get’,
onSuccess: function(transport){
var response = transport.responseText || “no response text”;
$(“someid”).innerHTML(response);
},
});
[/code]

As you can tell, the first examples of each are very similar, but the second example is so much slicker in Jquery.  We simply tell it to load this page into the HTML of this element!

Jquery “noConflict()”

Below is an example of how to configure Jquery to not use the $.  This is extremely useful if you are in the process of migrating to Jquery with an existing site that uses Prototype.  If it were vice-versa it could be a very messy process!

[code]var $j = jQuery.noConflict();
[/code]

Reference: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Jquery is minified

In that first project I discussed earlier, I had spent hours and hours attempting to convert Prototype and Scriptaculous into a format that I could minify.  Unfortunately, after much pain and suffering I was unable to do it and had to rely on simply GZIPing my Javascript to increase the load time.

When downloading Jquery, they provide a production version that is already minified for you!  On top of that, if you are working with Jquery’s UI, you are able to customize the download and make it smaller if you only require a couple of the features.

Now, I know Scriptacuolous allows you to only load the libraries you need, but this process in itself is not very optimized compared to Jquery.
If you were previously on the fence about which library to use, I would suggest Jquery for the above reasons and I’m sure there are many more, but I only have so much time in one night to list them!