Channels ▼
RSS

Web Development

An Overview of JavaScript Libraries



The implementation of AJAX features requires the execution a lot of JavaScript from within the client browser. Typically, the code will issue remote calls to some URL and arrange some nice user interface effects around your page. It may perform data binding, refresh templates, do some polling, or perhaps offer client-side caching. Who does write this JavaScript code? Unless you opted for a tool that automatically generates user interface code for you (for instance, Google Web Toolkit or the upcoming Microsoft Volta), the pleasure of writing lines and lines of JavaScript code is reserved to you. Not too bad if it were only plain application logic code. Developers don't usually mind to implement use-cases as long as they have proper tools to script and combine. Enter JavaScript AJAX libraries.

There are quite a few JavaScript frameworks available out there that offer AJAX and UI-related features. You can find a comparison of them on Wikipedia here. In this article, I briefly go through three of the most popular libraries: Dojo, jQuery, and PrototypeJS.

It should be noted that all libraries work in a cross-browser manner, as this is a key requirement for any such library or toolkit designed to simplify and possibly speed up the development of AJAX front-ends and Web sites.

In Dojo you find prepackaged components for common user interface elements such as menus, tabs, tooltips, date-picker, time-picker, treeview with drag-and-drop, readymade forms, input validation. Dojo also offers sortable tables, 2D vectorial graphics, animated effects like fades and wipes and it also abstracts the popular XMLHttpRequest object to a custom component. This component automatically falls back to using an IFRAME when this is convenient. Dojo also provides local data storage that extends cookies and leverages any browser's capabilities. The abstract model works with Internet Explorer, Firefox, and Safari.

A lightweight JavaScript library, jQuery comes with all of its features packaged in a single file. It offers DOM and CSS manipulation and navigation, event handling, nice user interface effects, and AJAX capabilities. A specialty of the jQuery house is the $ function that is essentially a factory for the root jQuery object. You typically use the $ function with a CSS selector and grab a few DOM elements in the page. Because the returned object is another jQuery object, you can chain new commands to the object up to building an effective workflow. The jQuery library excels when it comes to animating your HTML. Quite simply, the animate function -- the animation engine -- works by varying numeric style values over time. In this way, you can animate size, position or visibility of an element. For more on jQuery, see Getting Started with jQuery, by Bear Bibeault, Dave Crane,and Jord Sonneveld, with Ted Goddard.

The PrototypeJS library also comes in the form of a single JavaScript file and is distributed either as a standalone product or as part of larger projects, including Ruby on Rails and Script.aculo.us. In addition to providing an abstraction over XMLHttpRequest, the library offers an emulation of classes and thus a flavor of object-orientation. There's no magic or special trick-the JavaScript prototype property is used. It is the same approach that Microsoft has taken in the client JavaScript library that ships with ASP.NET AJAX. The abstraction over XMLHttpRequest is two-folded: You find a function to receive XML data from a remote call and a function to receive a chunk of HTML to be injected as-is in the existing DOM.

Regardless of the tools you use to do AJAX programming, you need a JavaScript library. But how to choose your JavaScript library? The three libraries that we briefly examined have slightly different goals. Dojo is a richer toolkit and not simply a library. The other two are essentially a collection of functions to simplify and speed up development. The Microsoft's client library, instead, is a small framework: not many quick-and-dirty facilities, not many cross-cutting Web-specific features, but a good emulation of class programming and general facilities for developers


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV