The question of which library is "the best" comes up every now and then, I don't want to talk about that here. I have seen a lot of good examples of jquery use here and a lot of good examples of what's possible with prototype around the net. What I would like to hear is from people who have experience with both: what are the main differences? What are the strengths and weaknesses of both?
So it's not about which one is better, but more when to use which library. I have a little experience with both libraries, but not enough to be able to judge this well.
jquery vs prototype
Moderator: General Moderators
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
I'm obviously a jQuery nut, but I can appreciate prototype as well (and have used it more than a few times).
Prototype's approach is to replace the repetitive code you write most often with shortcuts, like replacing "document.getElementById()" with "$()" and smoothing out the process of getting form values with the "$F()" function.
Another strength of prototype is that it's well supported by other projects, likely since it was the first good, widely used javascript framework. Ruby on Rails integrates tightly with prototype, and includes it by default. Scriptaculous is based on prototype as well.
The final attribute of prototype that many people value is that it still smells like old-fashioned DOM scripting. You do everything the exact same way you always have, except now you type less. It's a very comfortable transition for old-school DOM scripters.
jQuery takes sort of a sideways approach to DOM scripting (but a welcome on IMO). Instead of just giving you shortcuts to commands like "document.getElementById()" (which it does, sort of) it applies the theory that what you really want to do is to find stuff, then do things to/with it.
Half of jQuery is just matching elements on your page and giving them special methods. One of the things that you may find helpful is that you match these elements with CSS3 selectors, which (chances are) you already know. To hide all the h1 elements on a page you simply need to write: "$('h1').hide();" - jQuery finds all the elements that match the selector "h1" and applies the hide() method to them.
Another nice thing about jQuery is that it's chainable, which saves you from having to match elements again and again: "$('p').append(', yo').addClass('cool');" - adds ", yo" to the end of every paragraph and then adds the "cool" class to every paragraph.
There are lots of visual effects libraries based on jQuery as well (as plugins), some are quite mature.
I personally find jQuery's approach better suited for DOM scripting, but your mileage may vary. I would encourage you to run through an intro to both and see if one grabs you. You may also be interested to know that jQuery allows you to modify the name of the $() function so you can use prototype as well... maybe you'll end up choosing both!
Good documentation is key:
for prototype: http://snook.ca/archives/javascript/pro ... heatsheet/
for jQuery: http://www.visualjquery.com/1.1.1.html
Prototype's approach is to replace the repetitive code you write most often with shortcuts, like replacing "document.getElementById()" with "$()" and smoothing out the process of getting form values with the "$F()" function.
Another strength of prototype is that it's well supported by other projects, likely since it was the first good, widely used javascript framework. Ruby on Rails integrates tightly with prototype, and includes it by default. Scriptaculous is based on prototype as well.
The final attribute of prototype that many people value is that it still smells like old-fashioned DOM scripting. You do everything the exact same way you always have, except now you type less. It's a very comfortable transition for old-school DOM scripters.
jQuery takes sort of a sideways approach to DOM scripting (but a welcome on IMO). Instead of just giving you shortcuts to commands like "document.getElementById()" (which it does, sort of) it applies the theory that what you really want to do is to find stuff, then do things to/with it.
Half of jQuery is just matching elements on your page and giving them special methods. One of the things that you may find helpful is that you match these elements with CSS3 selectors, which (chances are) you already know. To hide all the h1 elements on a page you simply need to write: "$('h1').hide();" - jQuery finds all the elements that match the selector "h1" and applies the hide() method to them.
Another nice thing about jQuery is that it's chainable, which saves you from having to match elements again and again: "$('p').append(', yo').addClass('cool');" - adds ", yo" to the end of every paragraph and then adds the "cool" class to every paragraph.
There are lots of visual effects libraries based on jQuery as well (as plugins), some are quite mature.
I personally find jQuery's approach better suited for DOM scripting, but your mileage may vary. I would encourage you to run through an intro to both and see if one grabs you. You may also be interested to know that jQuery allows you to modify the name of the $() function so you can use prototype as well... maybe you'll end up choosing both!
Good documentation is key:
for prototype: http://snook.ca/archives/javascript/pro ... heatsheet/
for jQuery: http://www.visualjquery.com/1.1.1.html
Wow, thanks for your thorough reply Kieran. It's information like this that's useful.
I think I like the fact that prototype stays close to DOM scripting, but from what I've seen of jquery so far isn't bad either.
One thing that's absolutely important for me is that I'll use the library in an unobtrusive way. So, if javascript is enabled and the correct functionality is supported, hijack whatever element and do something with it. The CSS-way, so to speak. But I think that both libraries can do that.
I've seen too many "libraries" which let you do "showSuperDuperFancyCollapsingStuff" with a single command, but without js it completely falls apart.
Maybe I should use both then
I think I like the fact that prototype stays close to DOM scripting, but from what I've seen of jquery so far isn't bad either.
One thing that's absolutely important for me is that I'll use the library in an unobtrusive way. So, if javascript is enabled and the correct functionality is supported, hijack whatever element and do something with it. The CSS-way, so to speak. But I think that both libraries can do that.
I've seen too many "libraries" which let you do "showSuperDuperFancyCollapsingStuff" with a single command, but without js it completely falls apart.
Maybe I should use both then
Kieran already summed it all up nicely, so I'll just add that I'm also a jQuery nut now. It takes a subject I already know well (CSS3 Selectors) and lets me use those to find things/do stuff instead of document.getThisByThat and element.style.display = "none" and all that nonsense with simple statements like $("#idOfElement").hide(); It gives you the ability to EASILY write non-obtrusive javascript because it's so easy to find what you need and do stuff to it. In short, it's Superman.


- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
You also may want to look at moofx which is an effects library that can sit on top of Prototype or its own mootools library. The mootools lib strikes out in a different direction from either Prototype or jQuery. I some ways this is just the natural splintering that occurs in the 2nd/3rd generation of tools for any language. PHP is suffering through similar shenanigans.
(#10850)