Prototype vs jQuery

So, several days ago Ash White and I had an exchange on Twitter about jQuery vs Prototype as far as JavaScript Frameworks. Ash has been using both for awhile, and I used to be a Prototype user – but over the course of the last year I’ve switched camps over to jQuery. At Ash’s suggestion, I decided to type of some of my thoughts on why I prefer jQuery these days.

Everything is an Array

One of the first things that I love about jQuery is that anytime you retrieve something from the DOM using the “$” selector, you get an array of elements. Always. This irritated me when I first migrated to using jQuery, because it meant that the following snippet of code didn’t work right:

$('#someelementid').value;

My first instinct when I realized what was going on was to do something like this.

$('#someelementid')[0].value;

Now, before you laugh at me, keep in mind that I rarely read tutorials. I’m more of a “open the API reference and roll” type of learner. This method is less than perfect, and it certainly leads to a lot of mistakes. Eventually I did discover the val() method for jQuery which allows me to pull the value of the first item in the array.

Despite this initial learning curve, I’ve come to really appreciate the power of everything being an array in jQuery. This puts you at a significant advantage when it comes to designing your applications to be flexible in the long term. Instead of using an ID for a particular CSS-styled button, you can use a class – and define a click handler for all of the elements in the DOM using that class like this:

$('.btn').click(function() {     //do something with $(this) });

Additionally, when I’m working with Prototype, I’ve got a lot that I need to do with regard to keeping track of variable types. Things returned from the Prototype $ function are DOM elements. Things returned from other functions are arrays. Also, since Prototype extends the default JS objects, I’ve also got to keep track of which variables are Prototype-extended objects and which variables are plain old DOM object.

Honestly, I’d rather everything be an array.

Function Overloading = Time Saved = Money Made

To accomplish the same on click task mentioned above in Prototype, your code will look something like this (to the best of my knowledge):

$$('.btn').each(function(i) {     i.observe('click', function(event) {         //do something with "$(Event.element(event))"     } });

So, you save yourself a few lines of code, which is nice – but to be honest, I feel as though the former is actually easier to remember without going back to an API reference. In the example with jQuery, I have to remember the name and argument list for one method. For the Prototype example, I’ve got to remember the the names of three methods, and the argument combinations for six (because I count the callbacks).

Now, what if I wanted to send a click event to an object in Prototype? According to a StackOverflow question from two years ago you’ve got to do some digging to figure out how to do that. I do see that the current version of Prototype has a “fire” method that you can use, but in all of their examples they are firing a “custom” event. So, I’m not entirely sure it works for native events.

In jQuery, however, all I have to type is this:

$('.btn').click();

You may notice that this method is named identically to the method that we use to define an “on click” event handler. The jQuery developers made heavy use of overloading to minimize the amount of code you’ve got to remember offhand. They also do a pretty consistent job of holding true to this pattern across the board.

Natural Order of Things

This may just be a personal thing, but the natural order of things in jQuery has appealed to me. You always lead with the object(s) you’re working with whenever you’re making a jQuery call. It’s always “object, action, callback” whereas with Prototype I feel as I’m working in the awkward order of “action, object, callback”. That’s more of a qualitative issue, I suppose.

Smaller Size, For the Win

Prototype, quite frankly, is a beast. Clocking in at 163KB by itself. More if your project requires script.aculo.us. jQuery, on the other hand, requires only 31KB. In  a world where Google Page Rank is determined partially by the load time of your web page, those numbers can make all the difference. In addition, you get one file you’ve got to include in your HTML header, as opposed to the five or six that Prototype/script.aculo.us requires you to use.

So, it seems that for some reason Prototype’s default distribution isn’t minified – a detail that escaped my notice. For that matter, it probably escapes the notice of many a developer, so I’m leaving the comments above in strike-out form. But it doesn’t change the fact that this discrepancy makes the comparison above somewhat unfair, as pointed out my Mark. See the comment thread for more information.

Conclusion

This has been a really quick post, and I know there are probably a few points in here that are less than bulletproof. But since I’ve switched to jQuery – I feel as though I’ve been able to get more done with less code, so jQuery is the framework for me.

As always, I’d love to hear your thoughts on the matter! Leave me some comment love, and I’ll see you later!