Thursday, August 23rd, 2007

jQuery vs. Prototype: OO JavaScript with or without training wheels

Category: jQuery, Prototype

Brian Dillard has written about his experience playing with jQuery after time as a Prototype-r.

The piece walks us through Brian’s understanding of JavaScript and OO as he worked with different libraries:

Learning from Prototype

For developers like myself – long-time UI folks who have used JavaScript’s Object datatype for years but lack significant experience writing in a strongly typed, truly object-oriented language like Java – Prototype has been a revelation. It doesn’t enforce OOP principles, but it encourages them. And its source code is like a Rosetta Stone for how to implement them in the dynamically typed, prototype-based world of JavaScript.

Learning from jQuery

Once I started using a different library, though, Class.create was suddenly useless. I had to figure out different inheritance and encapsulation strategies. The training wheels were off, and I had to find my own of balance. My first hurdle was figuring out how to organize my jQuery procedures into reusable methods. I felt totally adrift without the built-in ability to bind functions to their execution environment; the this keyword was always assigned to a DOM node. I thought about simply porting Prototype’s Function.bind and Function.bindAsEventListener methods, but that seemed at odds with the design of jQuery’s own API. Finally, I turned to Douglas Crockford’s module pattern for JavaScript. Now I had a new way to organize my objects and methods in a reusable way that worked well with jQuery. By defining private methods inside of a closure, I could access those methods with simple function calls, no binding necessary. As with Prototype, a whole new world opened up.

Posted by Dion Almaer at 6:52 am
29 Comments

+++--
3.7 rating from 99 votes

29 Comments »

Comments feed TrackBack URI

I learned a lot by looking at the ExtJs (http://www.extjs.com) code.
Its well written OO all the way and with lots of comments.

Comment by Rodrigo — August 23, 2007

“…truly object-oriented language like Java…”
yeah right … after that, i couldnt keep reading the note.

Comment by cocotapioca — August 23, 2007

Yep, imho jquery does an excellent job of creating a programming style that more truly exploits javascript as a language with no hang ups visible from any other non relevant languages. (or at least cut way down)

Comment by Jesse Kuhnert — August 23, 2007

The comparison with Java deserves a little more comment. Java is not truer OO, but rather it is follows the traditional class-based OO approach influenced by C++ and others. JavaScript on the otherhand follows the approach used by the Self language which sought to take OO a step further, and allow the concepts of methods and inheritance (through prototyping) to work with any object, not just the special entity of objects called classes. In essence, JavaScript is actually more object oriented than Java, which is object-class oriented. However, the rather purer prototypical approach is unfamiliar to most developers, and the Prototype library provided the sugar to emulate the more traditional object-class oriented programming style.

Comment by Kris Zyp — August 23, 2007

I’m wondering why you haven’t tried MooTools? (http://mootools.net/)

I bet you’ll be surprised how much we try to enforce OO approach and the methodology. I think you’ll be surprised how much further we’ve gone in implementing OO in JS.

Comment by ibolmo — August 23, 2007

It’s not called My Object Oriented (JavaScript) Tools for nothing… ;)

Comment by Tom Occhino — August 23, 2007

I’ve learned a little bit with each of these JavaScript frameworks too. I’ve learned that jQuery does magic for you so you don’t even know how the illusion happens. I’ve learned that Prototype’s class support can be relatively slow during page refreshes with Firebug turned on (where’s my faster PC anyway?). I’ve learned that Dojo is a very opaque project, as if it had something to hide. :-) I’ve learned that MooTools likes animations and dislikes dumb questions (newbies). I’ve learned that ExtJS is heavyweight and can be relatively slow when compared with more lightweight solutions. I’ve learned that YUI is a little verbose. I’ve learned that sometimes it’s better to avoid picking just one. :-)

Comment by Joao — August 23, 2007

I bet for mootools, this guys really set the limits out of bounds and not just by doing cool things, but making everything work wiser. Mootools is focused on the more common approaches of today’s web-apps and also let you develop as much OO as prototype does, simply perfect!

“I’ve learned that MooTools likes animations and dislikes dumb questions (newbies)”

Mootools implies more effort into learn than jQuery at the begining I admit. But after the first days it makes you fall in love.

Comment by Luis Merino — August 23, 2007

@Joao – Prototypes Class support isnt slow what you are probably seeing is the over-use of mis-use of Object.extend. By The way Prototype 1.6 now has more OO Class methods similar to MooTools and others.

Comment by Mike — August 23, 2007

This article is about Prototype and JQuery, not Moo Tools…
Moo fans, quit advertising your crap in every blog post on ajaxian.

Moo Tools is little more than a copy of the Prototype API. There’s hardly any original ideas in the Moo source. And they don’t even have any unit tests. Who in their right mind would use an untested framework??

Comment by NR — August 23, 2007

No “NR” you are wrong and it feels like your aren’t really know something about it!
Maybe MooTools got inspired by Proto. but they got beyond.
There are Unit Tests and it is not only for animations. :)
It’s a pleasure to work with and very OO coded.

Back to the article … I had more from the comments.

Comment by Jens — August 23, 2007

@NR =)

Comment by Jesse Kuhnert — August 23, 2007

Don’t be rude because of people posting about MooTools … and 1.2 will have Unit Tests I heard ;-) . You should really try MooTools to see that it took of course some ideas from Prototype, but provides a lot more out-of-the-box tools for all your JavaScript and Ajax needs. Its simply more fun to write JavaScript … writing extendable and reusable Code. I’m sure that u’ll like it, NR.

Comment by mike — August 23, 2007

I didn’t think I was advertising. I was just curious why he had to compare apples and oranges. He mentioned in the article that jQuery you had to add “training wheels” so that it felt more OO (hence, apples and oranges). When in fact he could have compared oranges and oranges (Prototype vs. MooTools). I’d be interesting.

Comment by ibolmo — August 23, 2007

@NR – Moo …. moo …. MOO! Moo, I say. Don’t be jealous just because our framework is better =)

Comment by Marat Denenberg — August 23, 2007

Yeah, the Moo spammers are annoying. There is hardly any article without a “have you tried MooTools?” comment.
/end

I prefer Prototype, but recently I worked on some small projects were I did not have full control of all scripts included, so I used jQuery. It plays nicer in these environments.

I missed all the additions to String. And I also struggeled with the missing bind()/bindAsEventListener() I am used to, so I recreated these functions.

My biggest complaint about jQuery is that the code is so opaque. It is full of one and two letters variable names. I have not seen this style since the eighties. Makes it really hard to understand, add or change code. The code looks like it already ran through a obfuscater :-( The Prototype.js code is a bliss compared to that.

Comment by Martin — August 23, 2007

ya “Evangelism Team”’s are annoying… and make me dislike their framework more…

Comment by Mike — August 23, 2007

And I thought this article is about “understanding of JavaScript and OO as he worked with different libraries”. So adding comments about other libraries is not that wrong when you read the article and not only complain about comments that do not praise your favourite framework … especially here at Ajaxian which seems to be the main advertising platform for all kind of frameworks, in the sometimes weird articles and even more in the comments. Also the happy-commenters from the Evangelism team.

Martin: I agree, the code for jQuery is very hard to read. Its maybe their way to obfuscate or to stay under the holy 20kb limit. Code should be readable and in coding guidelines, packing and obfuscating is for gzip and all the packers out there.

Comment by -McC- — August 23, 2007

I’ve learned a little bit with each of these JavaScript frameworks too. I’ve learned that jQuery does magic for you so you don’t even know how the illusion happens. I’ve learned that Prototype’s class support can be relatively slow during page refreshes with Firebug turned on (where’s my faster PC anyway?). I’ve learned that Dojo is a very opaque project, as if it had something to hide. :-) I’ve learned that MooTools likes animations and dislikes dumb questions (newbies). I’ve learned that ExtJS is heavyweight and can be relatively slow when compared with more lightweight solutions. I’ve learned that YUI is a little verbose. I’ve learned that sometimes it’s better to avoid picking just one. :-)

I couldn’t have found a better summary myself. I’ve evaluated all of those libraries and agree with you 99%! (The 1% is because I don’t quite understand what you are saying about Prototype.)

Comment by Jordan — August 23, 2007

@Mike – “Prototypes Class support isnt slow what you are probably seeing is the over-use of mis-use of Object.extend. By The way Prototype 1.6 now has more OO Class methods similar to MooTools and others.”

First of all, good guess! It’s somewhat related with “Object.extend” as I do some “mixin” work too. I was using Prototype 1.6RC, but trying to incorporate it in my framework which has plenty of files and classes already. I definitely deserve some of the blame for the slowdown, but without trying to adopt Prototype’s class it’s much better. I decided to give up on Prototype for now just because of my fear of starting to make things slow for myself. I’ve gotten till here without depending on it anyway. :-) This slowdown reminded me of ExtJS BTW, which has it too but it’s even worse. So I was afraid of making it go that way. Prototype is a good one and I am going to use it indirectly once in a while because it’s used by Plotr, a little chart library. My little test with Prototype’s 1.6RC class support was successful so I am sure it works to some extent, which is great! :-) But I am going to take a stance of avoiding “class magic” in JavaScript which kind of sucks…

Comment by Joao — August 23, 2007

I like prototype because it works, and yes, you can actually read prototype.js like a book and understand its inheritence methods. I built a “custom meal builder” using mootools (with a hack to prototype as well, to allow the Ajax.Update to evalscripts), and as for jquery I haven’t gotten around to it.

Anyway, just wanted to say… “I like FLEX.

Ha, j/k… a poke at those in who read Ajaxian that like to bring whatever they do into the mix no matter how irrelavent. I guess it is relevant, but you could at least start out with something like I did (i.e. relate to the article then digress)

Cheers ~Chad
no hard feelings *^^*

Comment by Chad — August 24, 2007

well i have used all these libraries and seem to enjoy working with JQuery and Mootools more than Prototype. the reasion behind .. as a beginner i need libraries that are properly documented and give samples to the functions available. i found it hard go get a list of available selectors in Prototype as there is hardly any sample document available for that…

Comment by sharad — August 24, 2007

@sharad – try the user groups or their awesome api docs. You didn’t try their “discuss” section.

Comment by Mike — August 24, 2007

@sharad – http://www.prototypejs.org/api/utility/dollar-dollar

Comment by Mike — August 24, 2007

I’d definitely take jQuery or Mootools over Prototype, I’d agree with Martin that the source code for jQuery is kinda poor and looks obfuscated though (which is why I usually stick with Mootools). If they cleaned up their code and actual named their objects well, I’d probably use it more.

Comment by Andy Kant — August 24, 2007

In my experience, I prefer MooTools and JQuery over Prototype as well. I use MooTools for the most part though, as I am rather smitten with it.

Comment by John — August 24, 2007

By day, I am a C++ programmer. By night, I script in Javascript.

Javascript’s prototypal-inheritance is great, it served me well for a short period of time. Eventually, however, the lack of a true native ‘class’ implementation (with constructors and initializers) led me to repeatedly try to emulate this behavior (rather lamely).

In an attempt to circumvent my reinventing the wheel, I googled for existing solutions and came across Prototype. It was like a breath of fresh air, I could finally fully modularize and subsequently minimize my fugly linear code.

I found MooTools shortly after and was pleasantly surprised to find that it had taken Prototype’s ideas and had run far far away with them. MooTools simply lets me write powerful, readable code with less lines.

jQuery and MooTools are similar in functionality and performance. To me, however, the API of the latter is more intuitive and well-organized, and that has made all the difference.

I apologize for turning this into yet-another-ad-for-MooTools; I’m just mad for milk.

Comment by Ajean — August 24, 2007

Look, to all those people talking about MooTools spammers:

I’m just a guy who wanted to have a javascript framework. I heard of prototype as being the most famous, and had people start plugging jQuery to me lately, even though it’s not ready. I discovered mootools /moofx somehow, and thought at first that it must be less full-featured than prototype / scriptaculous, because it kept saying it was a small, lightweight library. But having looked at the documentation, man this thing is just nice! Why don’t you guys stop shunning a framework because you think people are spamming it? I for example have no reason to toot mootools’ tune, but I do enjoy its design. So I’m gonna recommend it obviously.

I came to this page because I just saw YUI and I googled YUI vs Mootools. That’s my next order of business — i wish people added more components to moofx though. Like tabs.

Greg

Comment by Gregory Magarshak — September 9, 2007

I’ve started a WikiVS article that writes out couple differences between jQuery and Prototype:

http://www.wikivs.com/wiki/JQuery_vs_Prototype

In the end, I think it’s the “feel” of the frameworks that will make you decide one or the other. If you’re doing highly sophisticated programming in Javascript, you’d probably go with Prototype because it’s more of an extension to the base language. jQuery is more for attaching behavior to elements.

Comment by dlee — February 25, 2010

Leave a comment

You must be logged in to post a comment.