jQuery vs. Prototype
Tuesday, November 20th, 2007 by MattThe two biggest JavaScript frameworks in use are jQuery and Prototype. Until recently, I used Prototype a bit. After having to use jQuery for a recent project, I’ve actually started to enjoy using it. It’s easy to use, and it’s lightweight. I’m probably going to re-code a bunch of things over at NTugo so I can use jQuery there instead of Prototype. It’s a lot better.
Enough of my personal experiences, here are the hard facts:
jQuery
File Size: 21KB
Code Required to Toggle a DIV:
<script type="text/javascript">
$('#mydivtrigger').click(function() {
$('#mydiv').toggle(400);
return false;
});
</script>
<a href="#" id="mydivtrigger">Toggle!</a>
<div id="mydiv">
Lorem ipsum.
</div>
Prototype
File Size: 63.3kb + 126kb for Script.aculo.us
Code Required to Toggle a DIV (requires Script.aculo.us):
<script type="text/javascript">
function toggleMyDiv() {
Effect.toggle('mydiv','slide');
return false;
}
</script>
<a href="#" id="mydivtrigger" onClick="toggleMyDiv()">Toggle!</a>
<div id="mydiv">
Lorem ipsum.
</div>
The amount of code is similar, though Prototype + Script.aculo.us requires an onClick event handler. Not too big of a deal, though it’s kind of annoying. The biggest problem is file size. Do you honestly want to load 189.3KB…just for your JavaScript framework? That’s 27 seconds at 56 kilobits per second.
jQuery can do pretty much everything Prototype can do, and there’s even a Script.aculo.us equivalent: jQuery UI. It’s pretty big, but you can hand-pick the parts you want, and save a lot of kilobytes.
3:27 am on November 21st, 2007
In this case U don’t need full scriptaculous library, but just effects (38Kb). Moreover, U might obfuscate it.
6:22 am on November 21st, 2007
You don’t need an onclick in the tag in prototype:
$(’mydivtrigger’).observe(’click’, toggleMyDiv);
6:24 am on November 21st, 2007
jQuery vs. Prototype…
[...]The two biggest JavaScript frameworks in use are jQuery and Prototype. Until recently, I used Prototype a bit. After having to use jQuery for a recent project, I’ve actually started to enjoy using it. It’s easy to use, and it’s lightweight. …
3:14 pm on November 21st, 2007
Good points, all of you.
Also, you may want to take a look at this post I just found:
http://www.quarkruby.com/2007/.....-to-jquery
11:21 am on November 24th, 2007
“jQuery can do pretty much everything Prototype can do” - nope, it doesn’t have OOP features like Prototype and some other small extensions which are quite useful.
Lack of modularization in Prototype is a bad thing, I agree, in example have a look at:
http://mootools.net/download
isn’t it just wonderful? jQuery is also much better on that field, but when it comes to functionality, well…IMHO Prototype offers much more then jQuery, but I won’t make a statement that it’s better then jQuery, because I haven’t written any real project using jQuery.
Regarding all that jQuery-vs-Prototype-thing Justin Palmer did some comments, I totally agree with his opinion:
http://alternateidea.com/blog/.....-vs-jquery.
2 weeks ago I did performance tests of both libraries, see my blog for details.
12:53 pm on August 30th, 2008
[...] (Teil2) http://www.box.net/shared/8ld3xfa82h#1:9195731 jQuery Cheat Sheet (zum Runterladen) http://www.webmaster-source.co.....prototype/ http://docs.jquery.com/Tutorials:How_jQuery_Works [...]