Introduction to JavaScript toolkits

By Hans S. Tømmerholt

Introduction

This article is a guide to the most popular JavaScript toolkits out there, giving an overview of what they can do for you, and giving a comparison of their strengths and weaknesses.

Sometimes during JavaScript development you will inevitably find yourself writing the same code over and over again. Perhaps you've even put that code in a reusable library. If so, toolkits are for you. This article and its companions are intended for JavaScript developers who want to get rid of the repeated tasks in their work that ought to be simple.

This article is intended for people with previous JavaScript experience; for those of you who want to brush up on the JavaScript language, you might want to take a look at the following articles:

• Simon Willison's A re-introduction to JavaScript
• JavaScript: The World's Most Misunderstood Programming Language and other articles on JavaScript from Douglas Crockford's Wrrrld Wide Web
• Mark 'Tarquin' Wilton-Jones' Introduction to JavaScript

I also recommend the following book:

• Flanagan, David (2002). JavaScript: The Definitive Guide. 4th edition. O'Reilly Media

JavaScript toolkits simplify your development work and save you a lot of time in many ways - they:

• 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

Some call them JavaScript toolkits, frameworks or libraries. Regardless of name, they are designed to make your work simpler and more productive, while abstracting away the bare bones of AJAX, animation, event handling, DOM manipulation and aspects of the JavaScript language itself.

We'll update this article continuously with more introductions and links, so be sure to check back often.

Table of contents

1. Comparing the toolkits: Functionality, characteristics, and support
   • Functionality definition
   • Characteristics definition
   • Available support definition
2. The toolkits
   • jQuery - Find things, do stuff
   • Dojo - the kitchen sink approach
3. Toolkit comparison tables
   • Functionality
   • Characteristics
   • Available support
4. Summary

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 definition

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.

Characteristics definition

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.

The toolkits

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.

Resources:

• Website
• Download
• Documentation

Dojo - the kitchen sink approach

Dojo is a very expansive toolkit, providing an enormous wealth of different functionality with a very modular approach. It provides pretty much everything you could want to do in JavaScript, packed into one fairly weighty package (you can also download the modules separately if you only need a small subset of functionality). To find out more, read our Introducing the Dojo toolkit article.

Resources:

• Website
• Download
• Documentation

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.

Functionality

Characteristics

Available Support

Summary

In this article I've introduced JavaScript toolkits and given a quick comparison of them, so you can get an idea of what each one offers. The article will be expanded as we go through more toolkits, and more full articles will be added to this site in time, to give you more details on each toolkit.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.