WARNING: you are not looking at the live version but at an older version.

Choosing a JavaScript library

Intro

We need a library to provide common, reusable functionality and save us from writing lots of repetitive code. Libraries also provide a layer of abstraction, thus hiding browser differences.

We do not want to write one ourselves because it saves time to use an existing one, plus these libraries are more likely to contain fewer bugs because of the significant user base.

Because of the multitude of Javascript libraries, we started our search by selecting only the most-used, most-popular and up-to-date Ajax-enabled libraries.

The contestants


 Latest (non-beta) release
 Size
 the good
 the bad

Licence

Browser compatibility
Dojo

1.0.2 (12/15/07)

50kb+
  • OOP
  • CSS3
  • buildsystem with compression
  • unittest
  • widgets (Dijit)
  • buggy
  • ugly code
  • big

modified BSD or Academic Free 2.1

Safari 3.0.x
Opera 9.0+
IE 6.0+
FF1.5+
Konqueror 3.5+
Prototype

1.6.0.2 (01/25/08)

~120kb
  • poor documentation
  • extends Object.prototype (*, *) not since 1.4
  • extends js built-in objects

MIT

IE 6.0+
FF1.0+/Mozilla 1.7+
Safari 1.2+

jQuery

1.2.2 (01/14/08)

~26kb
  • documentation
  • easy to use
  • fast
  • CSS 1-3, basic xpath
  • CSS selector
  • lightweight
  • chainable
  • plugins
  • namespaced
  • jQuery UI for widgets
  • cross site Ajax
  • compatible with others (trough jQuery.noConflict())
  • xml as context object (if($("status",xml).text() == "2")...)
  • only selector+effects+some-XHR
  • only for simple and small projects

MIT or GPL

FF1.5+
IE 6+
Safari 2.0.2+
Opera 9+
Ext JS

2.0.1 (01/23/08)

500kb
  • support
  • good collection of widgets
  • UI-centric (+ or -)
  • on top of jquery/yui/prototype or standalone
  • fast
  • client-side data model (*)
  • CSS 3
  • xpath

LGPL 3.0

IE 6+
FF1.5+
Safari 2+
Opera 9+
Yahoo UI Library

2.4.1 (12/19/07)

29kb+
  • history manager
  • documentation
  • modular (fetch what you need)
  • event driven
  • namespaced
  • CSS framework
  • Skins
  • YUILoader
  • slow
  • big
  • complex
  • verbose

BSD

IE 6+
FF1.5+
Safari 2+
Opera 9+
MooTools

1.1 (05/07/07)

9kb+
  • lightweight
  • fast
  • easy
  • modular
  • Object Oriented
  • chainable
  • dynamic loading for images, css and javascript files
  • extends many of js built-in objects

MIT

IE 6+
FF
Safari
Opera
Camino
qooxdoo

0.7.3 (01/14/08)
  • buildsystem for optimazing  and packaging
  • namespaced
  • event binding
  • cross-browser back button support
  • bookmarkability
  • AOP
  • IFrame IO
  • non-CSS-based styling

LGPL or EPL

IE 5.5+
FF 1.0+/Mozilla 1.3+
Opera 8+
Safari 3

GWT

1.4.61 (11/03/07)
  • browser history
  • JUnit
  • i18n
  • Java compiled to javascript

Apache 2.0

IE
Firefox
Mozilla
Safari
Opera

The pros and cons are (possibly biased) opinions collected from blogs and fora, or features promoted on the homepages.

Disqualified:

  • MochiKit: seems to be deserted
  • Rico: dying community, low support

The requirements

  1. base for client-side restletport
  2. cross-browser issues:
    • syntax
    • DOM model
    • event model
  3. dynamic loading of js-files
  4. event binding
  5. unit testing
  6. (widgets, effects)
  7. integration of external widgets (Simile)
  8. size, stability, maturity
  9. compression
  10. i18n, L10n

Popularity (by number of searches)

gtrends-javascript-libraries

The other frameworks (qooxdoo, Rico, Ext js) didn't have enough search volume to show up on the graph. The seeming extreme popularity of Prototype is caused by the added searches for the prototype object of JavaScript.

Language

Custom event-binding

OO

namespaced API

Namespacing

Chaining

Modular

Prototype

Dojo

jQuery

MooTools

(at build-time)

ExtJS

qooxdoo

YUI

There are arguments why a js framework should not try to be an OO programming language (see *,* and *).

XmlHttpRequest

All libraries contain specialized methods for Ajax calls, with support for GET and POST requests, parameters and callback functions. IFrame I/O is mostly used for file upload.

XHR API

custom HTTP request headers

Callback

Error handling

Cross-site scripting

IFrame IO

Synchronous

Prototype

Dojo *

jQuery

MooTools

ExtJS

qooxdoo

YUI

CSS Framework integration

GWT wrappers

GWT + ExtJS: gwt-ext, MyGWT
GWT + Dojo: Tatami
GWT + Script.aculo.us: Script.aculo.us integration

Java + qooxdoo: QWT

JavaScript Native Interface (JSNI)

Test 1: GWT Integration

Test 2: Simile

Simile Timeline and Timeplot are based on jQuery 1.2.1, which could cause conflicts.

Test 3: i18n support

  • Dojo: has a specific i18n module (*).
  • jQuery: no built-in i18n support. Localization is available for the datepicker-widget
  • Prototype: no built-in i18n support.
  • ExtJS: localization support (*, *).
  • YUI: no built-in i18n support, there is however an internationalization plugin (*).
  • MooTools: no built-in i18n support.
  • qooxdoo: i18n and L10n are fully supported (*).
  • GWT: internationalization support (*).

Test 4: Unit test

  • qooxdoo: testrunner
  • Prototype: there's a test framework that can be extended for custom unit tests (*).
  • jQuery: internal test framework
  • Dojo: has a unit testing harness, D.O.H.
  • MooTools: no unit testing
  • Ext JS: no unit testing (*, *)
  • YUI: YUI Test
  • GWT: JUnit integration

Standalone js unit test tools:

Test 5: Building custom widget

jQuery: Writing your own plugins
Dojo: Creating new Dojo Widget, Dojo Custom Widget Tutorial, Create a Custom Javascript/AJAX Widget with Dojo
ExtJS: Writing Ext 2 Plugins

Dojo, MooTools, jQuery, prototype: Creating an AJAX Rating Widget

The first 3 loosers

  • MooTools:
    • extends many of js built-in objects
    • lack of namespace
  • Prototype:
    • extends js built-in objects
    • no namespacing
  • qooxdoo
    • not mature enough (still beta)

The final 4

  • jQuery
    • blooming community
    • beautiful and concise language
  • Dojo
    • most powerful
  • Ext JS
    • possibility to combine with JUI or jQuery
  • YUI
    • modular
    • docmentation
    • CSS framework included

Links

Comments (2)