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.