Friday, October 26th, 2007

Prototype and jQuery: A code comparison

Category: JavaScript, jQuery, Library, Prototype

<p>Remy Sharp has gone through the jQuery and Prototype frameworks, which are probably the two closest to each other, and has done a side by side comparison of the frameworks by showing you how similar things work on both.

The presentation looks into the utility functions, selectors, DOM manipulation, DOM walking, events, Ajax transport, and browser detection.

Related Content:

Posted by Dion Almaer at 6:06 am
50 Comments

++++-
4 rating from 319 votes

50 Comments »

Comments feed TrackBack URI

There really isn’t that much between them, unless you’re after a specific piece of functionality which has been provided via a community produced plug-in for one or the other. I’m a prototype user myself, but I would prefer consistently selecting by CSS selector rather than by ID, or having to use a different utility function for CSS selection.

Comment by Ben — October 26, 2007

I’m a Prototype user as well, but I like the ID selection… CSS selection is rather slow if you have more then a couple of items to select, so I most often end up doing $(‘parent’).getElementsBySelector(‘.something’) to narrow down the search any way.

As far as jQuery vs Prototype, it all comes down to syntax. Prototype uses names such as onComplete and onSuccess for callbacks… names that mesh better with the onClick and onMouseover events exposed to javascript. Plus, syntax like $.ajax() rather then new Ajax.Request() might be shorter, but it just plain looks weird to me.

Comment by Jon Hartmann — October 26, 2007

I don’t know about jQuery (I don’t actively use it) but in Prototype:
Slide 13: [el1, el2].each(fn(el, i)) will pass the index as the second parameter.
Slide 16: Element.hasClassName for class matching.

Comment by Marc — October 26, 2007

So wich one do you recommend ?

Comment by Guillaume — October 26, 2007

In almost every example, the jQuery code was more concise than the Prototype code. That just goes to show how well thought out the jQuery API is.

Comment by beppu — October 26, 2007

CSS selection is rather slow if you have more then a couple of items to select, so I most often end up doing $(’parent’).getElementsBySelector(’.something’) to narrow down the search any way.

In jQuery it’s the same in terms of speed:

$(‘#parent .something’)
$(‘#parent’).find(‘.something’)

Prototype uses names such as onComplete and onSuccess for callbacks… names that mesh better with the onClick and onMouseover events exposed to javascript

If you’re using the 1995ish event binding via element.onclick = function() {} then maybe it’s true. ;) However, when you use modern solution basing on element.addEventListener(type, listener, useCapture) then you write:

element.addEventListener(‘click’, callback(), false)

As you can see, no “on”. OnClick & OnMouseOver remember 4.0 wars, leave them.

Plus, syntax like $.ajax() rather then new Ajax.Request() might be shorter, but it just plain looks weird to me.

Interesting explanation (“weird”). However, this is the result of differences in both frameworks. jQuery registers all “global” functions under $() (which can be used as selector engine, DOM creation utility or “jQueryfying” anything) aka jQuery(). Prototypes chooses to create rock-solid class-like constructs Ajax, Element, Event…

Comment by Riddle — October 26, 2007

I don’t know about jQuery (I don’t actively use it) but in Prototype:
Slide 13: [el1, el2].each(fn(el, i)) will pass the index as the second parameter.

In jQuery you can pass index the same way:

$(elements).each(function(i) {
if (window.console) console.log(i)
})

Comment by Riddle — October 26, 2007

Um on slide #9 it could be written

$$(‘#final-speech div.final-dialogue’).hide();

which is almost identical to jQuery

Comment by Aaron Bassett — October 26, 2007

In jQuery you can pass index the same way:
$(elements).each(function(i) {
if (window.console) console.log(i)
})

Yeah, i got that from the slide. I was just pointing out that the index is also available in Prototype.js.

Also, slide #12, Prototype will also have a dom content loaded event in 1.6:
document.observe(“contentloaded”, function() { … })

Comment by Marc — October 26, 2007

JQuery is to concise. There is in JQuery a real a lack of syntax friendliness. IMHO, Prototype wins

Comment by Donegarden — October 26, 2007

Nobody wins.
jQuery attracts with its elegant, short and consistent style, but goes just a little way too much, imho. The concise way of doing things is its curse and blessing at the same time (some get scared, while others get ecstatic feelings)

Comment by kangax — October 26, 2007

Very helpful. One slight change: Slide 12 says that Prototype uses
Event.observe(window,’load’,function{});
but Prototype 1.6 uses
document.observe(‘contentloaded’, function {});

Comment by John Dyer — October 26, 2007

some of those examples are not the best (at least for prototype). instead of
$$(‘dialog’).each(Element.show)
you can do
$$(‘dialog’).invoke(‘show’);

Comment by realgt — October 26, 2007

@Marc – thanks, I’ve updated the slides and will be uploading shortly.

@Aaron – I couldn’t get that syntax to work at all – it said .hide wasn’t a function:

$$(‘final-speech div.final-dialog’).hide()

Isn’t it because the $$ method returns an array, and the hide method is on the Element object? Happy to be correct on this!

I ran my tests on the URL below (which is pulling in Prototype 1.6)

http://tinyurl.com/2b3pp7

Comment by Remy Sharp — October 26, 2007

Regarding this not working in Prototype:
$$(’final-speech div.final-dialog’).hide()

Because $$ returns an array of elements, you need to use the invoke() method to execute a method on each item.

Like this:
$$(‘final-speech div.final-dialog’).invoke(‘hide’);

Comment by Scott Becker — October 26, 2007

@Scott – yep that definitely works. I’ve updated the slides, but somehow slideshare.net has nuked the physically location of the slides (those externally linking to the slides, as Ajaxian is doing works fine) – and also somehow missed the updated to slide 9 – which included using ‘invoke’.

Comment by Remy Sharp — October 26, 2007

Out of the two, the best choice is…

Mootools.

Comment by Karl M — October 26, 2007

> which are probably the two closest to each other

Because they are both Javascript libraries with a $ function? One has an OOP approach the other one builds all around a super-magic $/jQuery function. Every better JS framework out there has DOM methods, CSS Selectors and Ajax transports. So a better comparison would show and compare them all.

Comment by -McC- — October 26, 2007

@Remy: Thanks for the overview.

I use Prototype as well, as it fits well with Ruby on Rails. It also has a good pdf reference. But I am interested in jQuery, just ordered the Learning jQuery book last night. One thing is that jQuery seems to be a smaller package for end-users to download, esp. if you need some features of Script.aculo.us. Could be important for things like iPhone development.

Comment by Nathan Youngman — October 26, 2007

I think this is a case of “Agreeing to Disagree” between developers. I much prefer jQuery, and find Prototype’s way of doing things long-winded and confusing. I also prefer it’s smaller file size and plugin architecture. But I’m sure prototype users (or users of any other library) will disagree.

Comment by Tane Piper — October 26, 2007

@Tane: The problem with jQuery is that it does not have build-in support for classes and inheritance. Prototype, Ext, Dojo (and other libs) support classes and inheritance. This is the major difference between Prototype and jQuery.

Comment by Les — October 26, 2007

IMO the fact that jQuery is concise is a good thing. Your end-users don’t care how easy of a time you had in developing your app: they just want to use it without downloading half a meg of script. Broadband doesn’t excuse you from writing tight code.

Comment by Cal Jacobson — October 26, 2007

Forgive my ignorance if I’m way off base here – I have yet to write significantly large scripts with either of these libraries, e.g. 20K compressed to 16K gzipped to 4K. However, I’m always interested in comparisons since there are so many libraries to choose from and I’ll be soon be settling on one for a while (nothing more annoying to me right now then statements like – ‘mootools wins’ with no reasoning). So, this talk of the smaller size related to concise syntax and the end user’s download time has me wondering… Once scripts are compressed and gzipped – is it still a significant difference warranting choice of one over the other in this case? Many other factors seem related to personal developer style but this one is important. If the end user experience is actually impacted by one library over the other that’s a deal maker.

Comment by Eric — October 26, 2007

@Nathan Youngman: http://static.popcap.com/iphone/ The .js is packed with MooTools and their propietary code, so I can’t estimate what they used. You have an idea, however, of an iphone app.

@Eric: I think size is always a concern. Most important is speed, however, which no one seems to compare. Recently there’s been the SlickSpeed (http://mootools.net/slickspeed/) but there’s no definitive benchmark for all frameworks yet.

Comment by Olmo Maldonado — October 26, 2007

Many Thx Olmo! Now, clearly you have a bias but your argument still seems strong. Once again I’ve come across data that supporting MooTools as comparable, at least, to JQuery and Prototype yet getting MUCH less attention. JQuery posts here at Ajaxian – 42, Prototype – 160, MooTools – 5.

Was MooTools late on the scene? Was Prototype first on the scene? Are some just better at networking/promoting and/or having more of the right contacts?

Comment by Eric — October 26, 2007

Prototype vs jQuery, is not interesting

script.aculo.us vs jQueryUI…. ah… jQueryUI better catch up!!!

Comment by henry — October 26, 2007

There is only one feature of Prototype keeping me using it, that is Ajax.Responders, otherwise I’d have switched to MooTools which is superior to jQuery and Prototype in every other way. I find this obsession with conciseness to be exaggerated, who cares if jQuery is sometimes 10 characters shorter than equivalent Prototype code? Much of Prototype code is more readable in my opinion, but then Prototype also has some very inconsistent code because the developers are often pioneers and change their mind about things later.. That’s why I like MooTools, it’s API is like Prototype’s but more consistent and the code is MUCH smaller.. Prototype also has lots of features that are “cool”, but so rarely used that they are just a complete waste.

Comment by Colin — October 26, 2007

I work for a web shop where we used to use Prototype and Scriptaculous for a while. Then we decided to look around. We found Dojo to be crazy, and jQuery to be amazing. Now I need only write about half as much JavaScript as I used to – jQuery is just so fast to develop with. IMO, I see a lot of people judge jQuery too early without really getting to know it.

Comment by Steve Nolte — October 26, 2007

You’re right henry. Interface isn’t any more the official interface of jQuery but it is jQueryUI (ui.jquery.com) which is totally awesome.
JQuery and prototype are both good but it is really more pleasant to write jQuery code.

Comment by jean-sebastien — October 26, 2007

Thanks for the comparison… it would be nice to see more variations between other libraries, makes porting and generally picking up the syntax of new libraries that much easier…

On a note of “Prototype vs jQuery”… from my perspective both are excellent libraries… as are MooTools, Ext, etc… and there is WAY WAY too much touting of one library over another… they each have their uses and with file sizes in the low kilobytes, who really cares which is smaller, simpler, etc… its all about what can be done… or more importantly what can be skipped when developing…

Personally right now my leaning is on EXT with YUI for application development and jQuery for website development… I choose jQuery for one simple reason… the selector-based structure is very very easy for a designer who gets CSS but not JS to tweak without messing something up… while this can be done with other languages including Prototype… the “one method fits all” approach of jQuery makes me more comfortable with handing it off to someone less capable of reading and understanding the code…

Comment by Owen — October 26, 2007

Hello,
Speaking Spanish,
and I commented that I prefer Jquery

Greetings

Comment by Ajaxman — October 26, 2007

Just use Ext and put prototype or jquery underneath it

Comment by Steve Roussey — October 26, 2007

Was MooTools late on the scene? Was Prototype first on the scene? Are some just better at networking/promoting and/or having more of the right contacts?

I believe the order of apperance (public release) was: Prototype, Scriptaculous, Moo.fx, jQuery, MooTools, and so on… Perhaps YUI before jQuery, but I’m not familiar.

I’m not sure how to explain the discrepancy, but MooTools doesn’t focus on advertising. We tend to focus on our code. Today might seem like an advertisement, but I was honestly just providing an opinion ;). Coincidently MooTools has worked on SlickSpeed. If anything YSlow is rather nice benchmark, but I haven’t spent a lot of time understanding what it does.

Comment by Olmo Maldonado — October 26, 2007

I’ve been working on “translation”, “localization”, “data grids”, “file dialogs”, and so on and so forth. I ended up with my own JavaScript library and I was unhappy with having to do it all by myself. That’s why I tried Prototype 1.6 beta about two months ago, and that’s why I tried it again this past week, but now it feels good to use it because I didn’t have to do anything special for adopting its new Class system for one thing. To top it all, I liked the appearance of it which was close to my home made system in the “mixins”. :-)

Prototype is a miracle as far as I am concerned. I like that it has its focus on basic JavaScript support, allowing third parties to build on top of it all the animations, UIs, etc, that they want. While Prototype can be a pain in the way it integrates with JavaScript, it might be worth it in the end. Also Prototype is one of the more solid alternatives to libraries like Ext, GWT, YUI, Dojo… Which can be much more painful to work with and “download”. :-)

Lest assured that I think jQuery has an upper hand in being easy to sell and use, which means it could well take over the leader position. Where I think jQuery fails is in appealing to the types of developers who use libraries like Ext, GWT, YUI, Dojo… Which includes me. :-)

Also, it’s my understanding that Prototype works like a solid base on which to build other libraries like Dojo, jQuery, Ext… So not all is decided yet. While the newer libraries have pushed the envelop many times and became even better than Prototype in some regards, remember the turtle’s story. :-)

Comment by Joao — October 27, 2007

Actually, the latest prototype 1.6 uses
document.observe(’dom:loaded’, function {});
instead of
document.observe(’contentloaded’, function {});

And slide 17: Prototype 1.5* already supports Element.observe
@Karl M
Go back leeching on articles that are actually about Mootools.
@Cal Jacobson
The user wouldn’t care either way, if webmasters would learn to gzip their content. It is my opinion as a developer however, that self explanatory code is much better than concise code with many comments.
@Colin
Once again, this is not an article about Mootools. It doesn’t even mention Mootools. But at least you were nice enough to provide constructive criticism. That being said, I personally use about 90% of the features prototypejs offers, so I wouldn’t call them useless. If you don’t, either use a smaller library, or just pick the components you want (prototype is split into many js files in svn) and use only those.
@Olmo Maldonado
Seriously, if you don’t focus on advertising, how do you explain people like Karl M? Every post on this site that mentions a js library other than Mootools always gets a couple of retards like him that always mention Mootools out of the blue. Even on entirely unrelated topics.

Comment by /dev/urandom — October 27, 2007

@/dev/urandom
http://mootools.net/developers — my point is self explanatory

Comment by Olmo Maldonado — October 27, 2007

If you have to pick winners Prototype will come out as the winner syntax wise, while jQuery will come out as getting the job done with less code.

But the reasons to use jQuery because of that are getting smaller. Using jQuery because of chaining is not a valid point anymore now that Prototype (1.6) does the same thing. Those experienced with the frameworks can write most examples in these slides even smaller. Getting both frameworks down the the same amount of code.

In the end you will want better syntax.

Comment by Trulli — October 27, 2007

In the end it’s a question of scripting style. The user experience usually is the same, so every developer should use the library of his/her choice – prototype and jQuery are the best in the moment.
I like the cleaner syntax of prototype, which correlates in a better way to native JavaScript syntax. If you have learnt JS from the basics you prefer prototype because function/method names say what they do. Example:

click( ) Returns: jQuery
Triggers the click event of each matched element.
click( fn ) Returns: jQuery
Binds a function to the click event of each matched element.

The first one triggers a click, the second one adds a listener. Same names – quick but not clean.

Comment by Andreas Kalsch — October 28, 2007

@Andreas: Actually, I believe click( fn ) has been deprecated in favor of bind(‘click’, fn ).
Sounds like a lot of developers here don’t have to worry about handing off their js. Either they can take the time to train or they are self-appointed “supermen.” I don’t have that luxury. The more concise the framework, the more consistent its implementations. JQuery’s terseness may be inelegant to some developers, but its a common point that frees up the exchange of JS responsibility.
If I wanted to become a “Superman,” I would probably go proof of concept with any given framework, then rip the guts out of that framework until it is job-specific, obfuscate, and then put my email address in the comments and wait for that sweet, consultation dolla!

Comment by Brad — October 30, 2007

I’ve done a lot with jQuery recently, and really like the compactness of it. However, I’ve really come to dislike the way most jQuery methods stack off a new object (for the sole purpose of supporting .end() in massively chained jQuery operations). I also really like the implicit iteration, as a jQuery object is always a set, rather than a single element. (I like it better than the .invoke() syntax.) OTOH, jQuery is basically just a DOM manipulator. I’m really coming to appreciate the way Prototype extends the core JavaScript language, and that’s starting to tip the scales back to Prototype for me.

Comment by Fred Polgardy — November 8, 2007

Am running a collaborative comparison of the various javascript libraries and frameworks. http://mytechrantings.blogspot.com/2007/11/comparing-prototypescriptaculous-dojo.html

please submit your valuable opinions :D

Comment by Rohit Rai — November 16, 2007

The thing I like about jquery is that looks as though it’s designed to work with the DOM. Javascript (and therefore Prototype) looks as though it was designed to look like Java (…because it was). However, when it comes to manipulating the DOM, who wants to write Java unless they have to?

Jquery’s use of CSS3 selectors (designed for the DOM) makes it all so much simpler!

Comment by Rob — November 21, 2007

down/up in prototype is not the same as children/parent in jquery. down() traverses down the entire DOM starting from the current node searching for the selector you give it, where as children only looks through the children of the current node.

Comment by s — November 22, 2007

I’m a PHP programmer in China.
I dont know JQuery at all,but I use PROTOTYPE and I feel very well.
my php experience is more than 4 years,
but I’m very confusing about the JS in early time,
untill I’ve met PROTOTYPE,i learn JS thery and AJAX,rapidly.
And I must say I’ve made a huge progress.
now I can write any perfect programe,either server side ,or client side effects.
I support prototype because I can only use it,I’m not CSS and FLASH player,I’m a pure PHP player,I use KOMODO IDE,I never mind the code’s length cause’ I can use the KOMODO tools/snippet.
PROTOTYPE真棒,我喜欢它。我不羡慕JQuery,因为我不会用,也没有想研究它的意愿。(prototype is better for me cause I cant use jquery and I have no idea to learn JQuery)
And now I learn from the script.aculo.us , a EBOOK(PDF) help me.

Comment by 1341 — May 6, 2008

It’s amazing the library wars. Prototype was my first library. I loved it, then I learned jQuery. I’d consider myself an expert in both, having developed extensive projects with each language. I just finished porting a web app at work from Prototype to jQuery because I vastly prefer it.

Chaining is a big source of contention, some developers hate it, others love it. i think it is useful in many circumstances but can be taken overboard. The implied iteration in jQuery is just awesome, and the consistency of not passing in a parameter to a function to invoke it and passing one in to set it makes guessing when you don’t remember something easy.

The .click, .hover, .toggle shortcuts for the bind events rock. The automatic unbinding of events that both libraries do to prevent memory leaks in ie is very cool. Even so, I had memory leaks from .bind() in Prototype that switching over to jQuery fixed.

JQuery makes better use of ‘this’ references:
$.each(array, function() {
alert(this);
});

instead of

array.each(function(a) {
alert(a);
});

I hate that prototype extends the DOM. It provides a lot of nifty functions for arrays and strings, but those should be encapsulated in a single object instead of extending the DOM. Imagine a Java library changing the way arrays work in Java. That’s crazy talk.

In my experience, jQuery requires about 30% less code to do the same thing as the equivalent code in prototype.

I’ve also played a little bit with mootools. They approach javascript a bit differently then jQuery or Prototype but they don’t do as many things as these two do. I don’t really see a point to that library, I think that people who learned with mootools or developed for it have developed an attachment to it and it really does handle 90% of the things you need so there is no compelling reason to change from mootools if that is what you know. But if you don’t know any right now, I’d say learn jQuery.

Comment by seasoup — October 28, 2008

So for me the difference between the two is with jQuery, you are writing jQuery code. With Prototype you are writing enhanced JavaScript.

jQuery is very good at manipulating and finding stuff in the DOM. But if you need to write a framework or any logic, jQuery isn’t very useful. It has a few methods for manipulating arrays, but they don’t allow you to specify the context so they aren’t always useful.

Prototype includes a lot of enhancements to JavaScript that make writing a framework, or logic, easier. Methods added to the Function object and the Enumerable class, which is used in a lot of places in Prototype, provide very advanced mechanisms for working with groups of objects. It’s DOM manipulation functions are useful, but it’s plugin ecosystem isn’t as rich as jQuerys.

Comment by skoon — March 26, 2009

Thank you very much for difference comments . I have also like JQuery.It is easy to coding.

Comment by 01714355911 — October 21, 2009

I’m using Prototype firstly.Then change to JQuery and finally I’m using Mootool. All of them are good. http://quickmessageapp.com used one of them.

Comment by morz — March 5, 2010

Good blog. My major concern is browser compatibility. I don’t know if anything works flawlessly across all browsers to let me know when focus leaves an input text field (this includes all the different ways that focus can leave the field…). Let me know your experience on this one specifically. I’d be satisfied with a simple solution for IE6, IE7, IE8, and Firefox.

Comment by RayPhoenix — March 5, 2010

I had a website utilizing the lightbox that utilize the ajax framework of ptototype but when I tried to load the jquery libraray the design was destroyed.

I made a choice: “Use different designs for different technologies”.

I will not leave prototype but I will not ignore jquery! They are two superpowers in the war of browsers. I wish they will merge as one! Eitherside you go you have a gulf fixed that you can not cross over safely!

I wish and hope that there is a way to bridge this technologies together and I desire for the making of another one that will establish the end of prototype and jquery unless they be reconciled!

Oliver Bob Lagumen

Comment by oliverbob — May 18, 2010

Leave a comment

You must be logged in to post a comment.