Javascript libraries

This page lists notes on various Javascript libraries that might be handy for SNF projects.

Single-purpose libraries

Ago — Formats numeric timestamps into relative timestamps, like “3 days ago.”

Behaviour — An unobtrusive Javascript library. Lets you attach Javascript functions and events to HTML elements by using CSS-style selectors.

DateBox — A date parser that accepts natural language strings like “1 day ago” and “tomorrow.”

DOMInclude — An alternative to using pop-up windows that displays pop-up content in a new page layer rather than a new window.

Lightbox — Overlays an image over the current page. Nice for zooming in on thumbnail images.

Lightbox 2.0 — Adds fancy transition effects and navigation between grouped images.

Sajax — Sajax allows client-side Javascript code to easily call server-side PHP code; it was one of the first Ajax libraries and was used when building 15 Ways. Sajax is no longer updated frequently, and has some serious limitations, like Unicode handling bugs and no ability to pass arrays. In retrospect, I would have been better off implementing the Ajax code for 15 Ways by hand, but the Javascript for 15 Ways was already pretty complicated, and I wanted to keep things easy on myself.

Tooltip.js — Lets you implement fancy tooltips. The Netflix-style tooltip on the demo page looks nice.

General-purpose libraries

Since the general-purpose libraries tend to be heavy, it would be nice for SNF to standardize on a single library. Prototype/Scriptaculous is a widely used combination, but the combined library size is staggering, so I’m currently using MooTools.

Prototype — Prototype is one of the most popular new Javascript libraries, and several other libraries are built with it. Prototype provides a wealth of convenience functions that extend the language, such as various string-handling functions and a Try() object that is used to iterate through a list of functions, calling each one until one is found that works on the current browser. Prototype’s documentation is meager, but third-party docs are available.

Scriptaculous — Built with Prototype, Scriptaculous is probably the most popular Javascript effects library. Supports drag-and-drop and a huge number of effects, and the file size is correspondingly large. Fairly easy to use.

MooTools — The successor to moo.fx; no longer depends on Prototype, though it borrows some ideas and syntax from it. Provides many convenience functions that extend the core language and ease DOM manipulation, and it also provides some good visual effects. Its main selling point is its relatively small size. Currently used by shoplifters and the link-o-matic. Relatively easy to use once you get the hang of it.

moo.fx — Another effects library built with Prototype, but very, very small — 3kb. Used for the links “drawer” on the SNF Labs home page. Very small and very fast, but usage seemed a bit odd to me.

Rico — Also built with Prototype, Rico adds drag-and-drop, visual effects such as fading and rounding, etc. I ignored it before because it explicitly lacked support for Safari, but I can’t find any compatibility info for it anymore.

MochiKit — MochiKit focuses on extending the JS language in convenient ways (for example, date/time handling, string formatting, logging, etc.) and seems intended for serious programmers who don’t necessarily need visual effects. (It can work alongside other effects libraries, though.) Very well documented.

JQuery — “New Wave Javascript.” A smallish library that provides a terse, efficient syntax for ‘querying’ the DOM. Includes some effects based on the moo.fx library. Looks very promising.

Dojo — This is used by one of the projects at my employer. Big, slow, and full of features.

Yahoo UI Library — A real grab bag of UI controls, effects, and more. The documentation is good. Looks very promising.

The Google AJAX Libraries API

Google now hosts the major Javascript libraries on its servers. This is nice because:

  • Google’s servers are fast, and Google takes care of optimizing the HTTP configuration (caching, compression, etc.).
  • Google takes care of keeping each library up to date, but also maintains older versions of each library.
  • Any given user is more likely to already have a cached copy of the library when they visit SNF, because they’ll probably have already downloaded it while visiting some other site.

Here’s an example of loading version 1.x of Mootools:

<script src=""></script> <script> google.load("Mootools", "1"); </script>

Here’s how to specifically load version 1.11:

<script src=""></script> <script> google.load("Mootools", "1.11"); </script>

If you don’t want to use google.load(), then you can load a library old-school style:

<script type="text/javascript" src=""></script>

[ article last updated 2008-06-16 11:02:51 by cobra libre ]