Jquery vs Prototype/Scriptaculous

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

$("ul li").droppable({
hoverClass: 'droppable-hover',
greedy: true,
tolerance: 'pointer',
drop: function(ev, ui) {
}
});

Scriptaculous

$A($('draggables').getElementsByTagName('img')).each(
function(item) {
new Draggable(
item,
{
revert: true,
ghosting: true
}
);
}
);

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

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

$("#someid").load(url);

Prototype

new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
});

new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
$("someid").innerHTML(response);
},
});

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!

var $j = jQuery.noConflict();

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!

Published on Mar 26, 2009

Tags: scriptaculous | JavaScript | jQuery Tutorial