Home About Me

Ten Open-Source JavaScript Frameworks That Defined the Ajax UI Era

Here are ten of the strongest and most widely used open-source JavaScript frameworks from the Ajax-heavy, UI-focused web development world. Between them, they cover just about everything people wanted from browser-based interfaces and asynchronous web applications.

jQuery

http://jquery.com/

jQuery

If you were writing code and still had not heard of jQuery, that would have been hard to imagine. It became one of the most broadly adopted frameworks in Ajax development. Beyond its core DOM and event handling strengths, it also came with plenty of solid UI components, and it was well known for helping developers build polished page effects with relatively little effort.

What really made it stand out, though, was its size: only 18K. Tiny, practical, and easy to carry into almost any web project.

Here is one of its calendar UI examples:

jQuery calendar UI example

Prototype

http://prototypejs.org/

Prototype

Prototype is an object-oriented JavaScript library packed with a long list of genuinely useful features. A lot of other frameworks have relied on it as a base library. At 128K, it is not especially small, but still manageable.

A UI example looks like this:

Prototype UI example

script.aculo.us

http://script.aculo.us/

script.aculo.us

This framework was built on top of Prototype, and it was included with Ruby on Rails: http://rubyonrails.org/

MooTools

http://mootools.net/

MooTools

MooTools is a compact, modular framework with an object-oriented style. It is not the kind of JavaScript library you drop in just to get instant effects. Its main purpose is to make it easier for developers to build higher-level components.

Because it is aimed more at programmers than at plug-and-play usage, it is extremely flexible and very powerful. It is not large either—just 63K.

ExtJS

http://extjs.com/products/extjs/

ExtJS

ExtJS is an exceptionally powerful JavaScript library. It covers an enormous amount of ground—almost like a toolbox that keeps producing whatever you need. Its collection of UI components is huge, and its functionality is equally impressive.

Of course, that power comes with weight. The library reaches 6.6M even after compression. The UI sample below is only a small glimpse of what it can do.

Personally, I think this is the best framework of the entire group.

ExtJS UI example

Qooxdoo

http://qooxdoo.org/

Qooxdoo

If ExtJS at 6.6M sounds big, Qooxdoo goes much further: this library weighs in at 19.9M. It includes a platform-independent development toolchain, a state-of-the-art graphical user interface toolkit, and an advanced communication layer between client and server.

Here is a UI example:

Qooxdoo UI example

Yahoo! UI Library (YUI)

http://developer.yahoo.com/yui/

YUI

YUI was another massive, all-in-one style library. One of its biggest advantages was not just its very permissive BSD license, but also the way it handled distribution: aside from the core library, you did not have to take everything at once. You could download only the pieces you actually needed.

With all of that UI functionality, a size of 10.5M was still fairly acceptable by comparison.

Here is a demo:

YUI example

MochiKit

http://www.mochikit.com/

MochiKit is a lightweight library focused mainly on asynchronous request functionality.

MochiKit example

Midori

http://www.midorijs.com/

Another lightweight library, this one comes in at only 45K. It was not one I had actually used, but it appears to focus mainly on UI beautification and presentation.

Midori

Example:

Midori example

The Dojo Toolkit

http://www.dojotoolkit.org/

Dojo Toolkit

Dojo is another extremely capable library, offering a very rich set of UI components. It uses a BSD license and has a size of 1.7M. One look at the sample interface below is enough to see how much it brings to the table.

Dojo UI example