5 Ajax Libraries to Enhance Your Mashup
Date : 2008 07 28 Category : Tech & Development ProgrammableWeb
Earlier this year Google released its AJAX Libraries API as a content distribution network and loading architecture for some of the more popular open source JavaScript frameworks (our AJAX Libraries API Profile). According to Google:
The AJAX Libraries API takes the pain out of developing mashups in JavaScript while using a collection of libraries. We take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc.
The API currently provides access to these open source libraries:
jQuery Prototype script.aculo.us MooTools dojoThe scripts for these libraries can be accessed directly using a tag or via the Google AJAX API Loader’s google.load() method.
If you are a mashup developer that currently utilizes AJAX or if you are looking to utilize these frameworks, it is worth checking out this API, as it has good potential to streamline your development efforts while improving the user experience. Initially it may seem odd to link to these libraries via Google’s API when you can host these libraries locally on your web server, but once you delve into the rationale behind consolidation of these libraries you begin to realize that this approach has several benefits, including speed optimization and consistent versioning.
Dion Almaer has a great post on Ajaxian that gives more detail on the many benefits of using this approach, including:
Caching can be done correctly, and once, by us… and developers have to do nothing Gzip works We can serve minified versions The files are hosted by Google which has a distributed CDN at various points around the world, so the files are “close” to the user The servers are fast By using the same URLs, if a critical mass of applications use the Google infrastructure, when someone comes to your application the file may already be loaded! A subtle performance (and security) issue revolves around the headers that you send up and down. Since you are using a special domain (NOTE: not google.com!), no cookies or other verbose headers will be sent up, saving precious bytes.Not sure which library to use for your mashup? We have provided a brief roundup of the libraries below to give you an idea of some potential uses.
jQueryOriginally released at BarCampNYC in 2006 by John Resig, the jQuery library can be used for a variety of AJAX and non-AJAX interactions. From the jQuery web site:
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.
One of the early projects built with jQuery was ThickBox a popular JavaScript library that has been used to overlay HTML pages and images on an existing web page. Web sites that currently use the jQuery library include Google, Twitter, WordPress, Mozilla, Netflix, and a slew of other popular sites (including our own ProgrammableWeb). Be sure to check out jQuery UI, a set of visual controls that utilize the jQuery library.
PrototypeThe Prototype framework, developed by Sam Stephenson, is ideal for AJAX calls and polling. From the Prototype web site:
Prototype framework enables you to deal with Ajax calls in a very easy and fun way that is also safe (cross-browser). Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling.
There are numerous web sites and JavaScript extensions out there that utilize Prototype, including Apple, last.fm, Nasa, and Reddit.
script.aculo.usscript.aculo.us, developed by Thomas Fuchs, is an add-on to the Prototype framework that allows you to provide some nifty effects and drag/drop functionality for elements on a web page. From the script.aculo.us web site:
script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more.
script.aculo.us provides a good variety of effects, including fading, sliding, and resizing. Other UI functionality includes easy creation of accordion and slider menus. Given its close relationship to the Prototype framework, it’s no surprise that many of the same sites that use Prototype also use script.aculo.us.
MooToolsInitially developed by Valerio Proietti, MooTools is described as:
A compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
MooTools is similar to jQuery in some ways, although it has been developed with a different approach. The MooTools library includes event calls, effects, AJAX calls, and additional plugins such as sliders and sortable lists. Some of the sites that use MooTools include Vimeo, CNET, and GameSpot.
DojoDojo, described as a JavaScript Toolkit, was started by Alex Russell, Dylan Schiemann, David Schontzler, and a few other developers. According to the Dojo web site:
Dojo allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely. You can use the components that Dojo provides to make your web sites more usable, responsive, and functional. With Dojo you can build degradable user interfaces more easily, prototype interactive widgets quickly, and animate transitions.
Dojo provides several types of functionality. As with jQuery, script.aculo.us and MooTools, it can be used for animation effects and AJAX calls, as well as for user interface design through ’skinnable’ widgets called Dijits. Ning, AOL, and Plaxo among many others use the Dojo Toolkit.
Note that most of the libraries have been developed to ensure compatibility across most browsers, making cross-browser integration for your mashup that much easier. We think there is some great potential for these JavaScript libraries to enhance existing and future mashups, and we’d love to hear more from mashup developers out there who are using these libraries.
Related ProgrammableWeb Resources
Google AJAX Libraries API Profile and Mashups