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. 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.

  • Rauan Maemirov

    In this case U don’t need full scriptaculous library, but just effects (38Kb). Moreover, U might obfuscate it.

  • Colin

    You don’t need an onclick in the tag in prototype:

    $(‘mydivtrigger’).observe(‘click’, toggleMyDiv);

  • Pingback: Web 2.0 Announcer

  • http://www.webmaster-source.com Matt

    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

  • http://blog.solnic.eu solnic

    “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.

  • Pingback: Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger

  • Hever

    Yes. You don't need onclick attribute. But you don't need a scriptaculous library too. Function Element.toggle() is in prototype library.

    compare actually size of library files: prototype 126kB vs. jQuery 112kB

  • http://yuppframework.blogspot.com/ pablo pazos

    the loading of the javascript is only done the first time you load the page, so is no 27 sec every time you access a page… long life to browser cache!

    • http://www.facebook.com/profile.php?id=100003407105443 Dellian

      You’re supposed to view it in 720p, then the font size is iditnecal to what you would normally read. Just click the tab on the bottom right-hand side of the player that says 360p and change it to 720p .You’ll be able to read it then

  • http://intensedebate.com/people/redwall_hp redwall_hp

    True. Google's JavaScript CDN is pretty neat too: http://code.google.com/apis/ajaxlibs/

    That allows your browser to cache and use the files across multiple sites.

  • http://www.cesutherland.com Carl

    This article is very dated.

    Regardless, Scriptaculous is modular and you can pick what you do/don't want. Prototype and Scriptaculous can also be minified for production, drastically decreasing their size.

    Just getting into jQuery and Mootools recently on some projects, but they both have their strengths and weaknesses too I'm sure.

  • David Lee

    Here’s a more updated article that everyone can contribute to:
    http://www.wikivs.com/wiki/JQuery_vs_Prototype

    I’ve updated some info to include newest information for jQuery 1.4 and Prototype 1.6.