Friday, March 19, 2010

Why I left Prototype for Jquery

How I Found Prototype
The reason I first stumbled on Prototype was because of digg.  This is not the modern day digg that seems to enjoy lambasting Sarah Palin, but the prehistoric digg that was only tech news (the digg I miss that was slashdot++).  I discovered it while digging (no pun intended) through their page source.  I even "borrowed" one or two of their functions (Effect.FadeKeepSpace()) in my own digg clone that I wrote for TribalWar. 

Prototype was great.  It dealt with all of the cross-browser nonsense that made web development suck (mostly the fault of the engineers behind that abomination we call Internet Explorer).  I still remember the day that I gave up using document.all for document.getElementById().  I relished in doing something the way it was supposed to be done.

The joy of typing $() over document.getElementById() still exists to this day.  Short, sweet, and incredibly useful.  I will admit that I did not really understand the power of $$() and css selectors until after my indoctrination to jquery but, it really does not matter in the grand scheme of things.




Prototype Was Great
As a modern student of computer science object oriented programming is king.  Prototype brought javascript into the object oriented mainstream like no other library (please excuse my ignorance of mootools here).

Followed closely by the introduction of scriptaculous, the web had a nice simple library to do some neat effects and simplify AJAX operations.

With the object-orientedness of prototype combined with the super cool effects of prototype, the web really had a winner.  The only problem was over the years scriptaculous seemed to stagnate.  It doesn't seem like there's been much of an update in a long time (other than bug fixes).  I have a few bug reports of my own that haven't been dealt with in months.  Prototype seems to spend more time overhauling their docs recently than working on the library.

However, the combination of the scriptaculous library with prototype is still impressive.  For a work project I extended the autocompleter to search within the first ajax search request as subsequent characters were typed by caching the results locally.  It made for fewer HTTP requests which should make Steve Souders happy.

And Then There Was Jquery
I kept hearing about this other library that seemed to be gaining quite a following.  After just a quick look over some sample code I dismissed it as messy and lacking simplicity.  I did not dig into it to quite understand how simple, yet powerful the library was.  After all, I was very happy with what I was already working with.


I took my first serious look at jquery when looking for what turns out to the the prototype equivalent of $document.ready(...).  It turns out it did not really exist (until recently that is as document.observer('dom:loaded', ...), but that did not help me at the time).  This piqued my interest enough to take a closer look at Jquery, and I'm glad that I did.  The syntax was shorter, quicker, more robust, and well documented with plenty of examples.

To this day one of the best thing Jquery does is function chaining.  Having (almost) every function return the Jquery object is a brilliant yet simple philosophy.

Instead of:
me = $('findthis');
me.doThis();
me.doThat();
me.andThat();

It's all down to one line:
$('#findthis).doThis().doThat().andThat();

Wonderful!

Want to zebra stripe all of your tables?
$('table tr:odd').css('background-color', '#aaaaa');

Let's add a hover for the row:
$(".stripeMe tr").mouseover(function() {
    $(this).addClass("over");
  }).mouseout(function() {
    $(this).removeClass("over");
  });


Minified, Jquery weighs in at only 71k.  Scriptaculous and prototype don't even offer official minified versions so you either have to do it yourself or hope your server and browser support gzip (most should this day and age but it's usually up to the server admin to turn it on). 

I could go on but I feel I've said my part.  I haven't even touched on plugins and the massive library available right on jquery.com (note to prototype/scriptaculous people, you need something like this badly.  I have found a few good repositories but nothing beats an official one).

What I Miss About Prototype
This discussion would not be complete without a lament for my former love.  I would like to take this opportunity to say that Prototype is not a bad framework.  In fact it is far from it.  It's just I find the way jquery does things overall to be better.

I miss the object orientedness, specifically the ability to override functions but still being able to call parent the parent (like any good object oriented language).  Jquery it's a little more messy to do this; you have to save off a pointer to the old function yourself and call that.  Be nice and do it in a closure to not step on things. 


No comments: