jQuery vs. prototype.js

I’m basically a jQuery developer. I had little knowledge about prototype.js. All I knew is jQuery is better than prototype, so I never got interested about it.

However, for some reason I started a project with prototype.js and each line of code makes it clearer that which one is better. Somehow I finished the project using prototype.js along with scriptaculous.js and effects.js. Everything was fine in IE7 and FF 3. But it breaks in IE6. I was not happy with the unnecessary huge code. For example there is no live event in prototype.js, you can not apply an event to a group of elements with same class (You have to use loop for it), there is nothing like jQuery.animate function by which you can do any css animation (You have to add scriptaculous.js for some pre-built animation effects!) and a lot more limitations.

Even the scriptaculous.js is not that rich, for example using ScrollTo effect you can smoothly scroll to any anchor tag “vertically” only but no way of ScrollTo horizontally(!) in case your page is landscape orianted. Here is the code that I used instead(I found the idea from the source code of ScrollTo function):

var scrollOffsets = document.viewport.getScrollOffsets();
var elementOffsets = $$('div.active ul li')[index].cumulativeOffset();
new Effect.Tween(null,scrollOffsets.left,elementOffsets[0] - lo,function(p){window.scrollTo(p,scrollOffsets.top);});

The equivalend jQuery code is:

$("html,body").animate({
scrollLeft: ($('div.active ul li').eq(index).offset().left - leftOffset) + 'px'
}, "slow", "swing");

There are a lot more examples like this. The summary is the code using prototype.js was 180 lines and the equivalent code using jQuery is now only 160 lines + a lot of mental relief that it would work on all browsers

One thing I want to make clear is I have no intention to boost anything. In fact both of them are free.

Tags | code compare, code optimization, coding, compare jquery prototype, comparison, JavaScript, jQuery, jquery vs. prototype, optimization, prototype.js