JavaScript Frameworks

December 19th, 2008

Nowadays there are many different JavaScript Frameworks around the web. Many developers use them to speed up their work and to make the result cross-browser compatible. Every web developer (or even someone creating a website for personal needs) faces the challenge to choose the best framework for their specific needs. In this article we’ll try to compare the most famous JavaScript Frameworks: Prototype, jQuery and MooTools.

Effects

There are only a few effects in Prototype itself, show and hide, but there are enough effects in script.aculo.us, besides there is a window manager for Prototype.
jQuery has only a couple of effects (like smooth appearance) and all the rest is realized by plug-ins.
What distinguishes MooTools is compilation of MooTools core. We think it’s very convenient and beautiful. It is very difficult to say what to consider as plug-ins in MooTools. You can choose some plug-ins during the compilation but there are only a few of them, the main part is in MooTools core. Mootools is one of the most developed in plug-ins. We would say that the core is more focused on effects, especially now in 1.2 version. Besides as well as Prototype, Mootools has a window manager called Mocha, though it is still undeveloped.
All the jQuery descriptions and plug-ins are described in wiki. Probably Prototype is on paid stikipad wiki - one of the most popular wiki. While jQuery suffers on wikimedia. As for MooTools – everything is done completely differently, the description is performed on some internal engine (it is done rather good).
Don’t forget that jQuery also has a manager - jQuery UI. There is no sense to compare them, but it is necessary to say that only jQuery - UI is represented as official development, in Prototype and MooTools they are exterior developments.

Sizes

Prototype+script.aculo.us: 70KB
jQuery (clear): 26.5 KB
MooTools with ALL plug-ins: 87 KB

I think I do not need write some comments here.

Documentation

API:

Prototype has excellent API, perhaps this impression remains to everyone.
jQuery – details and even examples are done very well which we can’t see in Prototype. But Prototype is designed very qualitatively while jQuery is rather dirty and scattered.
MooTools - a beautiful cover but everything is not completed somehow, especially when version 1.2 is coming up and we still don’t see new API.

Tutorials:

Prototype – there are a lot.
jQuery – of cource there are less.
Mootools – it is strangely enough but the documentation is limited by Mootorial which describes only API.

Work speed

A very important indicator of any library is its work speed. The main functionality of these libraries are convenient DOM selectors which can find a line by similar to CSS ways. We have decided to compare work speed of such selectors in these libraries. The following selectors have been used:

body	div	body div
div p	div > p	div + p	div ~ p
div[class^=exa][class$=mple]	div p a	div, p, a	.note
div.example	ul .tocline2	div.example, div.note	#title
h1#title	div #title	ul.toc li.tocline2	ul.toc > li.tocline2
h1#title + div > p	h1[id]:contains(Selectors)	a[href][lang][class]	div[class]
div[class=example]	div[class^=exa]	div[class$=mple]	div[class*=e]
div[class\|=dialog]	div[class!=made_up]	div[class~=example]	div:not(.example)
p:contains(selectors)	p:nth-child(even)	p:nth-child(2n)	p:nth-child(odd)
p:nth-child(2n+1)	p:nth-child(n)	p:only-child	p:last-child
p:first-child

Please see the graphs below showing the results of testing the given selectors in Mozilla Firefox 3, Internet Explorer 6 and Google Chrome:

As these tests and graphs show jQuery surpasses in work speed in many positions. MooTools goes after it.
At this time our company recommends to use jQuery library. You can download these libraries and try to write your own test:

We hope to compare these three outstanding frameworks again sometime.

Good luck!

BRAINFART