RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Yahoo! UI Libraries Target Cross-browser Web Development Woes

The recently released Yahoo! UI libraries provide cross-browser DHTML and AJAX capabilities with a commercial-friendly BSD License. Unfortunately poor documentation, verbose syntax, and incomplete capabilities mar the experience.

ver since the 4.0 browsers were released, cross-browser dynamic HTML libraries have proliferated as a simple matter of necessity. Any developer who wants to take advantage of the latest and greatest HTML/Javascript capabilities while maintaining cross-browser compatibility has probably developed something of a library of "hacks" to normalize the API between the warring and buggy browsers.

Overall, Yahoo provides a decent library for general cross-browser hacks, but unfortunately, the effort doesn't measure up to some of the other open source APIs available such as DynAPI. You can download the free Yahoo! UI (YUI) libraries and experiment with them yourself.

A Quick Tour
After you've downloaded YUI and extracted the .zip file, you'll find the extraction creates eight folders, each with a similar sub-folder structure. Each folder contains several subfolders, but the only ones of interest are:

  • The build folders, which contain just the files you'll need to use the functionality.
  • The example folder that shows the functionality in action.
I wouldn't recommend bothering with the source directories as these contain some .js files that also exist in combined versions in the build directories, no doubt created by a utility they didn't include in the package nor reference on their Web site.

Overall, YUI is basically a function library that you access through a combination of anonymous methods and "namespace-like" syntax. For example, if you wanted to set the X/Y location of an element on the page, instead of writing code such as SetLayerLoc('MyID', 10, 10), you would instead make a library call as follows:

   YAHOO.util.Dom.setXY('MyID', new Array(10,10));
Although YUI gets the job done, the syntax is thoroughly verbose.

The documentation consists of some Javadoc-like API reference that was automatically generated from some sort of automated tool with no effort to clean it up or add useful detail to the generated class descriptions. It does include a fairly complete set of examples that go through most of the common functions in a reasonable and straightforward way, but without any linkages to or from the rest of the generated documentation.

The DOM and Event Libraries
YUI's capabilities in regard to core DOM and event handling are incredibly rock-solid, perform as expected, and cover a broad range of capabilities. Most surprisingly, this API gives you simple cross-browser transparency control. Most developers aren't even aware that magic tricks even exist (via DirectX calls) to make semi-transparency work in IE, much less the Mozilla-based equivalents, but YUI enables access to most, if not all, of the CSS properties you'd ever want. Here's an example:

   YAHOO.util.Dom.setStyle('MyDivID', 'opacity', .5);
The caveat of so many of these wonderful capabilities is again the documentation. The documentation implies that you can set the CSS style properties on all elements using their JavaScript equivalent names, for example, by writing backgroundColor rather than the CSS equivalent background-color, but the downside is that it lacks a full list of supported properties.

After you realize YUI has an amazingly cool cross-browser hack to enable transparency, your hopes will briefly rise that perhaps the libraries also implement cross-browser hacks to save you from having to remember every CSS hack around non-standard CSS properties. Unfortunately this isn't the case. Upon further inspection of the code you'll discover that the transparency hack is the only CSS hack supported by YUI—all other setStyle calls are passed directly through to the browser's DOM unchecked.

Fortunately, the event API is deeper than the DOM API and includes functions to normalize many of the cross-browser events. It normalizes the API to the more standards based addListener/removeListener functions.

Overall, the DOM and Event libraries do the job but require verbose syntax to accomplish what other libraries do with half the typing.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date