This is republished from The SitePoint Tech Times #132
Well, unless you’re trying to solve a problem that no one has tackled before, the answer is “probably not.”
Meanwhile, the experiences that can be crafted using these rapidly evolving tools are growing richer every day. While the code monkeys keep pushing back the bounds of what’s possible, usability experts are compiling documentation on how best to create applications that people will be able (and willing) to use. The Yahoo! Design Pattern Library is a new and promising entry into this area.
Thankfully, there are some people out there who like reinventing wheels. Or rather, they like having the best wheels in town so that everyone will want to check out their sexy alloys, and get a set for themselves.
Dojo takes the unstable footing of the modern browser landscape and replaces it with a reliable set of interfaces. While Dojo handles the browser compatibility headaches, you get to write simple code for animation, event handling, remote scripting (AJAX), and tons more.
At its most powerful, Dojo lets you build browser-based user interfaces composed of widgets that provide all the interactivity of desktop applications. You can build your own widgets within the framework provided by Dojo, or use the library of built-in widgets. Dojo even provides sophisticated support for drag-and-drop, all without the headaches of ensuring browser compatibility.
Dojo’s downside is its complexity, and the fact that large parts of it are currently undocumented. Doubtless this will improve over time, but if you plan to get into Dojo today, expect to do a lot of learning by example.
In addition to invaluable shortcuts like the
$ function, which is a shortcut for
$('content')), Prototype provides functions for event handling, array handling, form scripting, DOM manipulation and remote scripting (AJAX).
Because Prototype is so good at making low-level scripting less painful, a number of higher-level libraries have been built with Prototype as a basis. Most notably:
- script.aculo.us is the king of eye candy, offering easy-to-apply animated “cinematic effects” that can be used to enhance most web applications.
- Rico aims at the same level as Dojo, providing everything you need to build desktop-like web applications out of a library of widgets. Unfortunately, it has even less documentation than Dojo.
The Zimbra Ajax Toolkit (AjaxTK) was developed as the foundation for the web interface to Zimbra, a collaboration server that allows an entire company to manage email, calendaring and contacts and access it through the browser or through desktop clients like Microsoft Outlook. You can download AjaxTK separately for use in your own applications.
AjaxTK is in an awkward position right now, having one very impressive example of what it can do in circulation (the Zimbra web client), but not seeing much community adoption beyond that. With a recent announcement that AjaxTK would be contributed as the foundation for Apache Kabuki, an open source AJAX toolkit, its future is looking brighter.
At present, AjaxTK is heavily focused on building web applications with interfaces that are as rich as desktop apps. A full set of widgets, with a framework for building more, is provided.
Unlike most of its competitors, AjaxTK was designed so that you could embed widgets anywhere you like in a “normal” HTML document, or break out of the framework and render some “normal” HTML inside any widget. This ability to use the toolkit where you want and use more traditional methods elsewhere within a single application is perhaps AjaxTK’s biggest selling point.
Yahoo! User Interface Library
Announced only yesterday, the Yahoo! UI Library is still in its infancy, but with the momentum of Yahoo! behind it, it promises to be a very influential player.
If there is one thing to love about this library, it’s the documentation. From day one, every available component has full API documentation as well as a short “Getting Started” guide complete with working examples. No trawling through the developers’ blogs, no pulling apart complex applications: this toolkit has all the spit and polish of a commercial product.
For now, the library’s scope is somewhat limited. Beyond the core utilities for animation, remote scripting (AJAX), event handling, DOM manipulation, and drag-and-drop (which are certainly nothing to sneeze at!), the library currently offers only three actual widgets for building user interfaces:
- Calendar for selecting dates
- Slider for visually choosing from a range of values
- TreeView for browsing through a hierarchy of items
Though the selection isn’t overwhelming, these three widgets alone already solve some problems that have traditionally taken a lot of work to overcome. No doubt future widget releases will address some of the more mundane needs of web application user interfaces.
Of course, there are many other libraries besides the four that I’ve mentioned here, so if I’ve left out your favourite please don’t dismay. That said, I selected these four because of the community support, active development, and freedom they afford to the developer. If you think your library of choice belongs in this list, let me know why.
What to Do: Web Design Patterns
Just when I was getting my head around web design–logo at the top, navigation on the left, annoying Flash ad on the right–the new wave of web apps seem to be breaking all the rules. Suddenly there are new usability pitfalls everywhere you look. Thankfully, there are ways to learn from the mistakes of others.
Along with its UI Library, Yahoo! yesterday announced the publication of the Yahoo! Design Pattern Library, a collection of solutions for common web design problems. Here are a few of the patterns you’ll find in the library:
- Drag and Drop Modules
- Module Tabs
- Navigation Tabs
- Object Pagination
- Search Pagination
- Review Architecture
- Rating an Object
- Writing a Review
Each of these patterns has an animated screenshot showing a typical implementation of the pattern in use, along with point-form breakdowns of the problem it solves, the important details to get right in implementing the solution, the rationale behind these details, and the accessibility considerations of the solution.
Although the Yahoo! Design Pattern library only contains a handful of patterns right now (their announcement says 13, but I could only find 10), the library promises to expand in the near future as Yahoo! polishes up its internal documents for public consumption.
As with its UI Library, Yahoo! isn’t the first to produce something like this. There are a number of other great resources when it comes to web design patterns:
welie.com – patterns in interaction design offers some very slick patterns, though most of them apply only to traditional web design, rather than rich web applications. Of particular note are the “site type” patterns, which provide a list of design elements that are typically needed by sites of different types (e.g. a museum site).
Designing Interfaces is a polished collection of general user interface patterns, many of which apply to web design. These patterns were recently collected in the book Designing Interfaces by O’Reilly, for which this site is the companion.
Incidentally, SitePoint has a similar book on usability slated for release later this year that is specific to web design.
Finally, John Allsop’s WebPatterns site looks like a promising future home for community-produced web design patterns, but for now is only just getting off the ground (slowly).
In short, while the code monkeys will keep exploring the limits of the web, some real solutions are being produced by the likes of Yahoo! that are stable enough to use in everyday web development. Don’t get left behind!
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja