I also recommend the following book:
- Offer handy short cuts to the DOM, CSS styles and AJAX
- Provide services on top of the basic web technologies, like more comprehensive AJAX handling
- Include features like animations and effects like drag and drop, and so on
- Hide cross browser complexity
We'll update this article continuously with more introductions and links, so be sure to check back often.
Table of contents
- Comparing the toolkits: Functionality, characteristics, and support
- The toolkits
- Toolkit comparison tables
Comparing the toolkits: Functionality, characteristics, and support
There are many toolkits out there, including jQuery, Yahoo UI, Prototype, DOJO, MochiKit and others. Which do you choose? Many of them offer the same functionality with different twists. Some toolkits focus on animations and effects, while others are more general.
In the articles that follow this one, I'll look at the functionality, characteristics and support structure available with the different toolkits. In this article I'll offer a brief summary of the different characteristics the toolkits offer, and how they compare to each other. I have defined the characteristics as shown in the following sections.
Functionality indicates what actual functions, widgets and other features the toolkit provides. We'll look at the following different types of functionality:
- DOM selection: Shorthand and mechanisms for selecting parts of the DOM, like aliases of getElementById and friends, and more comprehensive selectors.
- DOM manipulation: Utilities for changing the DOM or style of the document. Examples include creating elements with contents or setting multiple styles with one call.
- Event binding and handling: Frameworks for listening to and handling events. Some toolkits offer customized events in addition to the DOM events.
- AJAX: Utilities for doing AJAX, for example by providing more comprehensive methods on top of the XMLHttpRequest object.
- Animation: Support for animating parts of the document. Examples include expanding boxes, changing colors and drag and drop.
- UI Widgets: Ready made and reusable UI widgets you can put into your document like trees, tabs, accordions and so on.
By characteristics I mean emergent properties of the toolkit rather than specific functionality they provide:
- Extendibility: How easy it is to add functionality into the toolkit using plugins, registering functions and so on.
- Compatibility: How well the toolkit plays with other code eg whether or not it hijacks the global space, uses a namespace and so on.
- Modularity: Whether or not the toolkit is split up into modules or plugins that can be loaded separately.
- Size: Physical size of the toolkit. If the toolkit is compressed, I use the compressed size.
- Opera support: How well does the toolkit work in Opera? I'm not totally objective here of course - I wouldn't recommend it to you if you couldn't use it with the Opera browser!
Available Support definition
By available support I basically mean how well the library is supported by the creators of the library, the community, etc:
- Support mechanisms: Do the makers supply some form of support service, for example an e-mail list? Is this a community effort?
- Documentation: Up-to-date and comprehensive documentation, including APIs, demos and getting started guides.
- Community: Is there a living community of developers around the toolkit? Is the community helpful and friendly?
In follow up articles, we'll also take a look at the performance of these toolkits on various Opera browser versions like the desktop browsers, Opera for mobiles, TVs and other devices.
Here we provide some summary information of each specific toolkit, to give you a taste before we move on to the dedicated articles.
jQuery - Find things, do stuff
This toolkit is based around a powerful mechanism for selecting different elements on the page. You can then apply animations, event bindings and AJAX downloads to several elements all at once. Read the article on jQuery.
Dojo - the kitchen sink approach
Toolkit comparison tables
In the following tables I summarize the aspects of the different toolkits. Read the articles on the specific toolkits for more information. The comparisons will be updated as we cover more of the toolkits.
|UI Widgets||Yes - jq UI||Yes - Dijit|
|Accessibility tools||Yes with plugin||Yes|
|Internationalization tools||Yes with plugin||Yes|
|Extendibility||Very good||Very good|
|Compatibility||Very good||Very good|
|Support for Opera||Good||Good|
|Commercial||Liferay||SitePen / Uxebu|
|Documentation||Very good||Very good|
|Community support||Very good||Very good|
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.