Switching from Prototype to jQuery
The Prototype framework has been one of my most productive investments since I adopted it over a year ago. Not only have I resorted to using the framework itself, but also learned and extrapolated from its internals. Back then I evaluated both jQuery and Prototype but the latter seemed more stable and “serious” while jQuery seemed like the hobbyist alternative trying to do too much. A week back, I revisited jQuery and chose to drop Prototype like a hot potato, making the switch to jQuery for all future projects. jQuery’s expressiveness makes it a delight to use and it really understands and addresses the common usage patterns–which in Prototype require a lot more plumbing.
CSS Selectors and Command-Chaining
jQuery has the friendliest API and syntax hands-down, designed entirely around the user. The most useful are the jQuery Selectors with support for CSS level-3 selectors, hybridized with some XPath expressions and jQuery custom filters:
$('table.orders tr:odd checkbox[name=purchase]').css('border', '1px solid black').attr('checked', 'checked');
The single line above says it all. The selector in the first set of parenthesis uses part CSS selectors to find a table element with class ‘orders’, part jQuery filters to filter only the odd rows, and part XPath expression to narrow down the selection to check boxes with the “name” attribute set to “purchase”.
Using command chaining, the selected nodes are easily updated using the css() function to add a black border, followed by attr() to add an HTML attribute checked=”checked”.
A quick glance at the jQuery Selectors reveals the large vocabulary waiting to be exploited.
DOM Traversal and Manipulation
Walking the DOM has always been a the source of confusion because it quickly gets complicated for example when you want build a menu tree which requires expanding a menu item while simultaneously collapsing other menu items at the same level as well as their children. jQuery makes it easy to traverse siblings(), children(), descendants(), parents() or the closest() nodes while also offering the not() function to specify an exclude criteria. All expressions accept the selectors applauded earlier. For example if you want to clone() the parent() of a node and append() html() inside it you would write just that:
mynode.parent().clone().append().html('hello');
Event Handling
The Event handling features are standard-issue like the other frameworks but have some other practical offerings like the hover() handler (how many times have you used the onmouseover and onmouseout pattern?), the one() handler which registers an event handle for one time use, and even a live() event handler which works for nodes added well after the event has already been registered.
These features address common developer usage patterns. There have been dozens of occasions where I have registered a one-time event handler by removing the event handler inside the callback, or re/registering an event on newly added element. jQuery pins these scenarios without going overboard with API functionality.
The Rest
With Prototype a lot more plumbing had to be done by hand, and sometimes cutting and pasting snippets from prototype evangelists sharing their own solutions to the common scenarios.
jQuery’s documentation is also a pleasure to peruse if you want to find or explore new features. The visual documentation is indispensable for those just starting off with jQuery. Simon Willison’s overview of jQuery is highly a recommended read before you dive into jQuery. It is also the source for my own learning and consequently for this blog.
After spending less than 3 hours reading blog posts and perusing the documentation I was able to do a lot more in a lot less time then ever before. The huge community and neatly organized jQuery plugins make me feel like a sucker for not having jQuery for my Scrabble pet-project. jQuery is quickly gaining adoption while Prototype tries to stay light on features despite having a footprint that isn’t. I am such a sellout.
Update, Jan 17: The latest performance benchmarks came in around pretty much the same time I made this post. Prototype has embarassingly poor performance, in some cases nearly 4x worse than jQuery.
Shame on your former self for coming to the wrong conclusion! 🙂 I couldn’t understand what all the fuss was about Prototype, I thought it was ugly and very poorly documented. I think its problem was trying to shoehorn Ruby-isms into JavaScript.
Just a heads up, the @ in attribute selectors has been depreciated for a while and was removed in jQuery 1.3. (Your [@name=purchase] should be just [name=purchase] to work in jQuery 1.3)
Updated That. Thanks.
I came to the exact same conclusion about a month ago. I had a codebase about 18 months old that was wound around Prototype rather tightly. I’ve since ripped out Prototype and subbed in jQuery, and the result has been nothing short of sublime. I’m absolutely hooked.
[…] you are using jQuery, you can easily extend the core by adding a disableSelection function like so: PLAIN TEXT […]
I have been pondering this very question of switching from Prototype to jQuery the last couple of weeks after jumping on Prototype about a year ago. It definitely wasn’t a bad year with Prototype, however with every relationship comes ups and downs. Now i think it’s time for me to leave Prototype behind as Prototype has seemed to have left itself behind. With that said, now comes the time to create new branches on too many projects and start replacing js code in too many files.
Nice article.
I used to be a Prototype enthusiast until nine months ago, or so. A newcomer at work showed me the benefits of jQuery and I wouldn’t turn back to Prototype… oh man, jQuery rules for good!
Thanks for this.. I have spent a lot of time using prototype, always believing it was the only way to go and could never be bothered checking out JQuery, but now you’ve convinced me to give it a proper look.
It’s so funny, I read this over and over again and I just don’t see it. I mean, I get the performance benchmarks… and thus I’m reluctantly making the switch to jquery simply because I would like my app to perform that much better in IE. But… it’s been months and syntactically it’s still completely backward to me. I really just wish I could rip the selector engine out of jquery and retrofit it onto prototype. Most examples of jquery being “easier” really just betray the author’s ignorance of prototype… method chaining, adding multiple css attributes and then element attributes and then showing the elements, my lord I’ve been doing that all on one line in Prototype for years now. I cry for Function.bind() (I’ve already ported over that portion of prototype since it’s only a couple lines long on its own anyway… if any of my developers ever wrote a line like this=self I might choke… function () { … }.bind(this) is far more grokkable). And Object.extend? Element.descendentOf? And when I want one element, I want one element, not an array containing one element. I mean… there’s no excuse for being 4x slower than jquery… and I get that. But I love ruby’s syntax structure, it’s a model of readability, and yes, I loved being able to do the same things in Javascript. If the tables were turned, and Prototype had the better selector engine, I bet any sum of money that the bandwagon would just as easily say that Prototype had the better syntax and why would anyone go through all the extra trouble to have $(“#element”).hover? I hope sometime, in the not too distant future, someone manages to write a library that can traverse the DOM quickly, without tossing away all my syntactic sugar. If only I had the time.
Steve looks like my prayers, and yours, have been answered. A much needed update to Prototype is in the works and looks outstanding; 1.7 adds Sizzle.
My biggest beef w/ jQuery was the lack of OOP … wtf?!
http://www.prototypejs.org/2010/4/5/prototype-1-7-rc1-sizzle-layout-dimensions-api-event-delegation-and-more
Interesting article!
Funnily-enough, I’m a long-time jQuery user looking to use Prototype as I’m about to embark on a new project that will effectively need me to write a new mini-framework in order to model and manipulate theoretical objects. As part of this, I want to look into Prototype’s class structure and inheritance.
From a learning jQuery point of view, you may be interested in jQuery Deconstructed, an interactive visual breakdown of the code: http://www.keyframesandcode.com/resources/javascript/jQuery/deconstructed/
It’s been so well-received, I’m now planning to do a Prototype Deconstructed. My first looks at the Prototype code do indeed indicate that it’s certainly more cleanly-written, but it will be interesting to really break it down properly.
Cheers,
Dave
If you’re a bad programmer, then yes, you will have to copy and paste code you don’t understand from the web. This is not Prototype (or any framework’s) fault.