среда, апреля 30, 2008

On Prototype vs jQuery


I see more and more posts like this or this recently and I always see that when people are telling about how poor the Prototype framework is they really don't know even half of it's possibilities.

As it always happens, the code comparison in those posts is written by person who is not experienced in one framework or another.

I agree, that jQuery has some nice features: 1) actions on groups of objects (that you have mentioned), 2) more powerful selectors: prototype has support for css3 selectors only, but jQuery can handle more sophisticated queries like selecting hidden elements or inputs of particular type.

I haven't dug into what it takes to write custom effect or plugin (plan to do it soon), but I don't see how you can base your effects on existing ones in a way other than aggregating/compositing (the thing with Prototype effects is that you can inherit your effect from some base effect and have some nice features like configurable 'easing' function, which can control effect speed over time, or some other stuff for free).

But seeing syntax comparisons like that just makes me mad.
First, adding a class name to element in Prototype is just as easy as in jQuery:

$('element').addClassName('className')
$('element').removeClassName('classsName')

Second, the Ajax syntax. Prototype's variant is designed to do POST requests by default. You don't need to specify 'method' parameter if you do POST request. As for GET requests, in Prototype you can do just as in jQuery:

new Ajax.Updater('element', url + '&' + parameters)

(I believe, the '&' thing is needed in jQuery also, but author of code comparison just 'forgot' to mention that)

Moreover, if you don't like the wordy syntax of Ajax.Updater, you can extend Element to support whatever syntax you like:

Element.addMethods({
load: function(element, url) {
new Ajax.Updater(element, url)
}
})

and then you can do

$('element').load(url + params)

just as in jQuery.

And, yes, Prototype doesn't handle working with sets of elements by default. To add a particular class to a set of elements in Prototype you need to do some extra stuff, but not as it is mentioned in code comparison:

$$('.element').invoke('addClassName', 'className')

And yes, I agree, that Prototype and Scriptaculous have bad documentation and I personally have bought a book on them (see Pragmatic Programmers bookshelf) and my problems with Prototype and Scripaculous have gone since then.

I don't see any big reason to switch to jQuery.


PS There are lots of other javascript frameworks like mooTools (if I spell it correctly), Dojo, Rhino and such and I always haven't paid much attention to those, because usually my web application require custom solutions, not those that are present in such frameworks. But recently I came across some book ("Mastering Dojo" published by Pragmatic Programmers) and a podcast on it and it got my attention. They say that lot's of fortune 500 companies are using their framework because it is very solid and stable. And I'm curious about what particular features of Dojo make them think so. I have visited Dojo's site and tried to see at some of the examples (e.g. fish eye component) and they were running way too slow on my latest Firefox 2.x (which I consider as rather modern web browser). Probably, I need to give it one more chance and, probably, read that book.

6 комментариев:

Duane Johnson & Daniel Harmon комментирует...

Thanks for your input on this discussion. I think, now that you've pointed these things out, that the main weakness in Prototype / Scriptaculous is less-than-adequate documentation. I have the hardest time getting it to do what I want, when it seems so much clearer in libraries like jQuery and mooTools that have good documentation.

Anyway, I appreciate your experiences. Thanks!

Yehuda Katz комментирует...

Just a few corrections:

jQuery's load syntax does not require the "&" string concat. You do:

$("selector").load("url", {key: "value", key2: "value2"})

Additionally, all of your comparisons that showed that Prototype supports similar syntax should have been done with $$ and #invoke, as the jQuery variant supports selectors and automatic looping with its $ selector.

I have posted a more exhaustive analysis of the importance of an all-around philosophy, and not just tacked-on feature that are capable of emulating jQuery-like syntax at the original post. It might be interesting to you.

Also, I would check out the documentation for jQuery at http://docs.jquery.com/Main_Page, which contains full API documentation.

Finally, this conversation has left out what is perhaps the most important differentiating factor. Prototype overrides native objects and adds new global variables, which makes it much more difficult to use with other non-Prototype code. That isn't always a consideration, but when it is, it's very difficult to deal with.

dante hicks комментирует...

Hi,

For what it's worth, the Explorer at DojoCampus is a pretty good overview of what is available as far as components for Dojo, though the comparison in the previous blog was based more on core functionality. Feel free to contact me if you'd like more direct commentary on specifics.

http://dojocampus.org/explorer/

Regards,
Peter Higgins
dante at dojotoolkit dottt org

Maxim Kulkin комментирует...

Hey, Yehuda, you should have read it more carefully:

1. jQuery's load method does require '?' char (sorry for typo, actually I meant '?' instead of '&') if used as outlined in the original post (with 'url + params', not 'url, params'). And params should be string of 'name=value' parts, concatenated with '&'.
2. I was not comparing the possibilities of jQuery vs Prototype in terms of whether to use $ or $$. I'm not trying to emulate that syntax, because I don't need it. I just wanted to show, what the true framework API comparison should look like.

The problem is that people that writing framework comparisons know almost nothing about how to use them correctly. The write "see how it is easy and elegant in OUR framework, and how ugly and cumbersome it is in THEIR framework". And people who read those comparisons tend to believe, that it is how they are told it is.

I'm write javascript sometimes, develop components using Prototype for personal needs. And I know that I need to select by some css selector less often, than be ID attribute. And I don't feel that I need that feature.

What I like about Prototype is that it gives me foundation to write object-oriented (!) code with ease. It is not some API to manipulate DOM objects, it is extension to Javascript language. In Javascript there are some base classes like Object, String or Array. Prototype extends those classes to add some useful features that can help developer to write more compact and expressive code. But Prototype also adds more missing concepts to the language in form of new classes: observers, periodical executers, Ajax requests, extensions to DOM objects.

Prototype is more low-level, compared to jQuery. You can write jQuery equivalent on top of Prototype, but you can't do vise versa.

So, those who just want some bells and whistles and/or are too new to javascript to understand it and write in it - those use jQuery. But those who do some serious client-side programming in javascript will definitely like using Prototype.

Ivan комментирует...

Максим, возьми любой jQuery плагин и перепеши его на прототайпе.
Если кода получится не в два раза больше - значит ты победил :)

Анонимный комментирует...

Re: Ivan
+1, кроме того стоит рассматривать не столько сам framework, сколько имеющиеся под него расширения. Сначала и писал всё что только можно под mootools, потом под prototype, а потом попробовал использовать jQuery и с тех пор всё вошло в должное русло.
Dimitri.