Thursday, February 14, 2008

JQuery vs Prototype JS Libraries

Here are my thoughts on JQuery vs. Prototype - I do not think either is better. It's just a tradeoff based on your needs and team.

JSQuery positives:
Easier
Better Containment
Better Chaining
More Active Community
More Active/Verbal Maintainer
Designer-centric
More concise code

JSQuery Negatives:
Memory hog
Cross-browser support is not so great
Dom centric programming (not so easy for Java folks to wrap their heads around this)
No class support or inheritance (again, odd for Java folks to wrap their head around this)

Prototype positives:
Amazing cross browser support
Low memory footprint (compared to other frameworks)
Great Object Orientation/Functional based programming (easy for Java/back end developers to jump in the game)
OO Coder-centric
More readable code
Better security awareness/responsiveness for Ajax functionality

Prototype negatives:
sizable download file
not as concise as JQuery
community not as active (at times)

Summary: Most designers prefer JSQuery. Most Java Programmers prefer Prototype. But if you would like to have your cake and eat it to, then use both, together.

11 comments:

Jim Manico said...

I have been putting some real time into JQuery lately - and all I can say is - screw prototype. It's all about JQuery - JQuery is so powerful, easy, cross browser rich-client amazing stuff that it's the only client site library I'm using in the future!

David Mintz said...

Prototype has an extraordinarily elegant API, but the reason I am switching to JQuery is that the Scriptaculous Autocompleter is not working as advertised in IE6.

One thing I miss in JQuery is Prototype's classy Element API for creating and manipulating DOM elements. With JQuery -- as best I can understand it so far -- you have to type lot of ugly raw HTML and string concatenation to insert variables. It is ugly, hard on the eyes, and error-prone.

Jim Manico said...

Thanks for your comment. DOM manipulation is trivial in JQuery - if your DOM elements all have unique id's.

$(#idvalue).attr("name", value);

JQuery does allow for chaining of many commands on top of each other - and it misused, things get messy fast.

David Mintz said...

Yeah, agreed that changing elements is graceful in JQuery, but adding new ones, and new ones within those new ones -- ugly. Again, unless I haven't figured it out yet. (If so, so much the better).

As for the chaining thing, indeed. both APIs encourage it but if you get too carried away, you can end up with a one-line symphony that may be a masterpiece but is very damn hard to read.

Unknown said...

There are a few plugins for jQuery that allow creating DOM elements on the fly like Prototype's new Element() functionality. But as far as I can tell, it's not supported in the base library. Most likley an attempt to keep file size smaller, although IMHO this should be core lib functionality. So any comparison of file size between the two libraries should take this into account.

Jim Manico said...

What are the use cases for creating dom elements on the fly?

I usually get away with creating elements on the primary markup page - even if I do not need them right away - and then hide/show them as needed, even for complex apps.

Unknown said...

this plugin is helpful for creating DOM elements on the fly like Prototype's new Element() functionality.
http://plugins.jquery.com/project/DOMEC

i found this easy to use and helpful while converting prototyped code in jquery.

--regards,
usamurai

Unknown said...

There's a WikiVS article for:
jQuery vs Prototype

Hopefully others can contribute. Basically, the decision comes down to what type of programming you're doing. For simply attaching behavior to elements, use jQuery. For organized Javascript programming, use Prototype.

Dale said...

When you say "Java" are you really talking about "Javascript"?

Jim Manico said...

No, I really meant Java in the original post.

Paul Kevin said...

I prefer prototype because it gives me all I want in one. Look at its implementation of Ajax and full for post. Onsubmit, onloading functions are brilliant. As compared to jquery where onloading u must do something manually......jquery is big for nothing in my opinion. Like getting an element by id u have to use the attr function. While in prototype its just a .id