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.
by David Talbot
April 17, 2006
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.
Animation API The animation API is where the framework starts to provide real value. The approach of the API is to define a series of from and to key states as well as the duration the animation should last from start to finish.
Among the properties you can animate are: color transitions, location, size, and opacity. You can create fascinating displays with relatively little effort in a manner similar to the Dreamweaver JavaScript. However, these API capabilities are only truly useful if you know the precise path of your animation at design time, because the declarative syntax used makes it difficult to alter animation paths at runtime.
Drag and Drop Drag-and-drop support has always been an area of divergence among browser implementations. YUI does a masterful job of not only smoothing out the differences but adding some great functionality on top of it.
The Drag and Drop API provides a lot of advanced functionality not seen in other freely available JavaScript libraries. The end user experience with YUI drag-and-drop elements is very slick. You can specify what items are draggable and what items are drop targets in a relatively simple, though verbose, way.
I would have liked to have seen YUI behave a little more like some of the other freely available libraries out there in terms of associating drag sources with possible drop targets. In YUI you have to write code (there's an example in the documentation) to specify drop targets as opposed to simply adding grouping tags to your targets as you can with Script.aculo.us.
Connection API Remote scripting has been around for years but when Google launched Google maps it set the Internet afire with AJAX mania. The mania is of course well-founded, because AJAX can offer a dramatic user experience improvement. The result of this mania has been a tremendous proliferation of libraries that normalize the interface to the underlying browser hacks that enable you to make a round trip to the server for more data without refreshing the browser.
YUI provides a reasonably complete API for remote scripting. It includes the ability to make remote calls, handle successes, and handle failures. If you're using a server-side language that does not yet have a client side API for remote scripting, YUI is pretty good choice.
The code example below highlights the relative simplicity of the YUI connection libraries.
var handlers = { success: success, failure: failure } function success(t) { alert('Yea, success'); } function failure(t) { alert('Awww.'); } YAHOO.util.Connect.asyncRequest('GET', 'http://mysite.com/Remote.ASPx?GetPage=1', handlers,null);
Despite the fact that the connection library is one of the strong points of YUI, I would still recommend sticking with whatever AJAX libraries are specifically designed for your server-side language. The reason for this is simple—consistency in data type handling will reduce the overall amount of effort required to achieve the desired result. However, if you work in a multi-language or multi-platform environment, the YUI connection library is the better choice.
To be completely honest, I rewrote this article after my initial review. I had half of my review written based on playing with a few of the examples but repeatedly found myself disappointed with so many facets of the library that I had to delete the first article attempt and try again. Overall, YUI is filled with verbose syntax and undocumented bizarre parameter options. Personally, as a .NET man, I'll stick with writing good xbrowser DOM, using DynAPI for event normalization and ATLAS for my AJAX needs.
In sum, the YUI libraries attempt to provide a complete cross-browser DHTML and AJAX API, but while parts of the libraries are rock-solid and work well, the attempt falls short in a few areas and fails miserably in its overall syntax.
Page 2 of 2
David Talbot is the vice president of development for Data Systems International, a company that develops case-management software for the social services industry. His experience ranges from license-plate recognition using neural networks to television set-top boxes to highly scalable Web applications. He is also the author of Applied ADO.NET.
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.
David Talbot is the vice president of development for Data Systems International, a company that develops case-management software for the social services industry. His experience ranges from license-plate recognition using neural networks to television set-top boxes to highly scalable Web applications. He is also the author of Applied ADO.NET.