In response to an earlier Old MacDonald had a browser, Daniel McWeeney provided a link to the Yahoo UI Library. This was a rather interesting link. Not only for making a web developers task easier, but also for being cross browser. I wondered if Yahoo was the only one that had come up with that idea and I started looking for other JavaScript libraries. In the bag of tools tradition, I would like to share my collection so far:
Behaviour claims to be the missing link for your AJAX apps. The biggest missing link is the documentation. One has to find one’s way around armed only with a couple of snippets of code and some demos.
DHTML Goodies
This site can be put in the same category as in my other web logs where I mentioned plug and play scripts. It contains script for generating
- menus
- windows
- calendars
- slide shows
- trees
- Ajax
- games
All the scripts have a good description, an online and installation instructions. Furthermore an indication is given of the browser (versions) that are supported. One can also rate the scripts at hotscripts.com.
Besides the scripts, goodies such as colour schemers, a CSS reference and a regular expression tester are also provided.
Dojo
It is claimed that this framework makes professional web development better, easier, and faster. It wants to help you to achieve things that can be rather tedious to do using the classic JavaScript/HTML approach.
It has libraries for string, DOM, CSS and date manipulation. Furthermore it incorporates HTML operations, event handling regular expressions. It doesn’t have off the shelf ready made script, as such, but it does have so called sub packages for specific sub packages:
- dictionary/hash object support with sorting capabilities
- FIFO support
- implementation of a standard Stack (FILO).
- RPC support
- Animation & Drag and Drop support
- Data validation
- Fading, exploding visual effects
- colour manipulation
- SVG library (undocumented)
- Cryptographic routines.
- Math library
- Linear Algebra
- XML to JS parser.
- URI/URL manipulation routines
Widgets haven’t been forgotten either:
- Core Widgets for e.g. checkboxes, combo boxes , context menus, dropdown buttons, trees
- Layout widgets for e.g. floating panes
- Obligatory widgets like
- DatePicker
- TimePicker
- RichText
- Charts
- ColorPalettes
- FisheyeList
- InlineEditBox
- ResizableTextArea
- SlideShow
- …
Ajax support is of course a must these days.
JSAN attempts to mean the same as CPAN does for Perl. In contrast to the other libraries this one isn’t maintained by a central instance. DHTML goodies allow script uploads but one central person is still responsible for the site content wise. With JSAN it’s different. One can submit any code into the JavaScript Authors Upload Server (JAUSE). It doesn’t even need to be in the JSAN structure. Lack of strcture is probably the main problem with this whole site. It is still in beta, as it has been ever since July 2005, but that shouldn’t be any excuse.
MochiKit
The folks have been looking at Python, Objective C, etc. in order to make JavaScript more enjoyable. It doesn’t have any prefab scripts, but it does have toolkits for
- managing asynchronous tasks
- a Python approach to functional programming and comparisons
- DOM manipulation
- colour manipulation with CSS3 support
- date and time manipulation
- string formatting
- iterations
- logging
- event handling
- some visual effects
- AJAX
The site also includes demos with the interactive interpreter standing out.
Moo.fx is purely focused on creating visual effects in a compact way and limiting the code from it. One can choose to use either the 3K or 6K version. It depends on the lite version of prototype (see below), but has more documentation.
prototype is a Ruby on Rails style approach in making JavaScript a more up to date scripting tool, putting the focus on Web 2.0 and thus Ajax. The class driven framework should take the burden of developing rich interactive applications. Unfortunately, the documentation is very poor and thus one has to depend on derivates like script.aculo.us. The latter has at least more documentation and some demos to show what is feasible.
Yahoo UI Library
Yahoo is said to be inspired and motivated by the work done at Prototype, Sciptaculous and Dojo. The focus in this library is to put rich user interfaces and has two categories of components:
UI controls. People familiar with e.g. HTMLB will recognize the first two:
- Calendar
- TreeView
- A slider which enables an end to adjust values between determined boundaries in a visual way
Core Utilities for DOM scripting
- Animation utility, where one can animate the properties of page element. See also this demo page.
- DOM utility for more common DOM tasks like manipulating the CSS properties. See also this demo page.
- Drag and drop utility for a draggable interface. See also this demo page.
- Event utility for event handler management
- A connection manager for easier AJAX integration
Besides the UI Library, Yahoo also provides a Design Patterns Library. Yahoo claims that these patterns describe the optimal solution for common problems within a specific context.
So far, the list of patterns is limited to:
- Auto-complete for text boxes
- Breadcrumbs for larger navigation
- Drag and drop for rearranging layout
- Tabs for tabular navigation
- Object and search pagination for displaying large amount of data
- Object rating
- Review writing
Conclusion
As you can see there is a multitude of libraries. There is no wheat without chaff though. It’s up to shift it out. One can base oneself on the presence/absence of documentation, the learning curve, the amount of work to integrate them or the footprint. Personally, I would choose the Yahoo UI for its maturity. It might have its shortages - some consider Yahoo as one – and doesn’t provide the openness and flexibility like e.g. Dojo (my runner up) but it’s the most professional finished product.
