This is republished from The SitePoint Tech Times #132
JavaScript is hard, but it could be a lot harder. These days, choosing your tools can actually be most of the work.
Many, many years ago (okay, five), JavaScript code on a web site was a sign of a code-savvy developer with some extra time on his or her hands. Cute effects like mouseover image swaps (and not-so-cute broken right-click menus) were usually the result. Even on such technically adventurous sites, writing more than 100 lines of JavaScript code was virtually unheard of.
Today, the poster children of web application success consist of numerous beefy and interdependent JavaScript files with a light dusting of HTML and CSS. With JavaScript codebases easily outweighing markup and style sheets, should most of the sensitive, new age web developer’s time be spent scripting?
Well, unless you’re trying to solve a problem that no one has tackled before, the answer is “probably not.”
A great deal of energy in the web development arena is being put into building reusable solutions. Here at SitePoint, we just sent The JavaScript Anthology, nearly 600 pages of such solutions, to print. And today Yahoo! joined the growing number of entities offering libraries of reusable JavaScript functionality with the Yahoo! User Interface Library.
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.
In this post, I’ll run through Yahoo!’s new offerings for web developers and also review some of the other options you should be considering. If you haven’t picked your horse yet, now would be a good time. JavaScript is hard, but making use of it on your sites doesn’t have to be.
How to Do It: JavaScript Libraries
I’m a hand coder from way back. I take great satisfaction in crafting every part of a complex system with my own blood, sweat and tears. These days, however, it seems like I’m always reinventing the wheel when it comes to JavaScript.
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.
There are JavaScript libraries available to suit every taste. Here’s an overview of the most significant, including Yahoo!’s brand new offering:
Dojo
The Rolls Royce of JavaScript libraries, Dojo provides tools for every occasion. In fact, the library is so big that you probably won’t need to use every aspect of it in anything but the most complex of web applications. You can therefore choose to download the edition of the library with the features you are likely to need, and save your visitors from having to download the over 300KB of JavaScript code that makes up Dojo.
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.
Prototype
Rather than providing a whole new framework to build on the way Dojo does, Protoype enhances the existing JavaScript features of browsers so that they’re a lot less painful to use. With Prototype, you can leverage your existing skills while taking advantage of the clever shortcuts that the library provides.
In addition to invaluable shortcuts like the $ function, which is a shortcut for document.getElementById (e.g. $(‘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. 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.
AjaxTK
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.
It’s particularly refreshing to see Yahoo! opening up its box of goodies and sharing them with the web development community. This move contrasts sharply with Google’s approach of protecting its JavaScript assets by hiding them away in obfuscated code.
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:
- Auto-Complete
- Breadcrumbs
- 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:
—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!
Whether you dive into a new JavaScript library or explore some design patterns that apply to the type of work you do, now is a great time to infuse your web development skills with new life.
