Learning the YUI Library

1 comment | Posted: 31 May 08 in Books, by Nathan Smith

Learning YUI I recently read Learning the Yahoo! User Interface Library, written by Dan Wellman. I had been interested in learning more about YUI for awhile now, and this book was a great way to digest all that documentation, distilled. As you may know, last month I started a new job at Viewzi as a front-end developer. What you might not be aware of, is that YUI is an integral part of what powers our site.

I have to say, after 30 days of using the JavaScript portion of YUI, and with the help of Wellman’s book, I have taken quite a liking to it. There’s nothing quite like trial by fire to expedite one’s learning process. For the purposes of this review, I figured rather than summarize all the contents, I would highlight a few of the things I like about YUI, and how the book brought those to light.

Ubiquity

Yahoo is one of the most popular sites in the world. It ranks #1 in traffic, according to the authoritative stat tracking company, Alexa. So what does that have to do with YUI? For one, it means that the code library is extremely well tested, put through its paces by roughly 3.4 billion page views per day. Their incentive to maintain reliable code quality is paramount.

In addition to being free to use, YUI is also generously hosted by Yahoo, meaning that you can link directly to their servers. The benefits here are twofold. First, it saves you the bandwidth cost of hosting the files yourself. Perhaps more importantly, it means if you link directly to their code, there is a high likelihood it will already be cached on a user’s computer. Since it’s already downloaded, this increases the perceived responsiveness of your site.

In addition to the numerous Yahoo subsidiaries that use the YUI library, other popular sites such as Newsvine also use it. For a comprehensive listing, check out the Powered By YUI page. As major companies are hot-linking to the YUI files hosted by Yahoo (remember, it’s permissible in this case), that means their visitors are potentially loading the same components needed by your site. This makes for a powerful, world-wide, redundant distribution hub.

DOM

From a practical standpoint, traversing the DOM is streamlined. YUI augments built-in JS methods like getElementsByTagName and getElementById, with functions like getElementsByClassName and the powerful get(), which can be made to retrieve just about anything imaginable. There are also numerous methods by which you can target the children or ancestors of any element.

It is also easy to extend the library to do what you want. For instance, I ran into a situation where I needed to check for the ID of a click event, and take action only if it was not present. As I searched the API docs, I realized that while there are getAncestorByClassName and getAncestorByTagName, there was not a getAncestorById. Perplexed, I asked my friend Ara Pehlivanian if he knew how to do it, and he was kind enough to oblige me with a custom function:

if (!YAHOO.util.Dom.getAncestorById) {
  YAHOO.util.Dom.getAncestorById = function(node, id) {
    return YAHOO.util.Dom.getAncestorBy(node, function(el) {
      if (el.id === id) {
        return true;
      }
      return false;
    });
  };
}

I liked it so much, I wanted to share, in case anyone else out there runs into a similar scenario. First, a check is done for the existence of getAncestorById, as the YUI library may very well support it down the road, and if so we’d not want to interfere with that. In the absence of that method, it is created. As for the actual implementation of using it, that would look something like this:

YAHOO.util.Dom.getAncestorById(node, id);

Events

Anyway, I digress. Enough geeking out, and back to the book review. The mark of any good library is the ability to add progressive enhancement via unobtrusive methods. Buzz words aside, that simply means that we keep our HTML clean of any unsightly behavioral markup. Wellman shows how this might have looked in the sites of yesteryear, and explains the better way to do it today, both via longhand JavaScript and in the YUI syntax.

The nice thing about using YUI is that is normalizes events across multiple browsers. This means that the incorrect implementations of Internet Explorer are abstracted from you, and you’re able to focus more on crafting the interaction, instead of worrying about obscure bugs. As I said previously, that has been battle tested already, by the numerous visitors to Yahoo’s sites.

There are three main ways to attach events: onDOMReady, onAvailable and onContentReady. For those of you familiar with the jQuery JavaScript library, onDOMReady is roughly equivalent to $(document).ready(). Rather than waiting for the window.onload event to fire, which is dependent on all image downloads to finish, you can instead begin to interact with the document as soon as the HTML is loaded. The other two let you check for the readiness of a particular element, firing a function as a result. More on that here.

Animation

What would a JS library be without a little pizazz? YUI’s animation utility serves that very purpose. Those familiar with Flash will appreciate the way that animations are defined, with start to end points, and tweening configurations in between. Wellman touches on this briefly, which is sufficient enough to get one’s mind racing about the potential possibilities. Coupled with the getX, getY and getXY methods included in the util.Dom core, this leaves the door wide open for some seriously cool effects. See Newspond for nice YUI animations.

Another nice thing about getStyle, setStyle and util.Anim is that they all normalize the opacity property. Depending on the browser, different CSS must be applied. With YUI, you can change these on the fly, creating fade effects. You can give even more life to it by adding motion. Here is an example of how you could fade something in, while changing its size.

var slider_go = new YAHOO.util.Anim('slider_id');
    slider_go.attributes.width   = {to: 500};
    slider_go.attributes.height  = {to: 500};
    slider_go.attributes.opacity = {to: 1};
    slider_go.duration           = 0.3;
    slider_go.animate();

Ajax

Again, what would a JS library be without some asynchronous page rendering capabilities? YUI does not disappoint. The Connection Manager and History components are both very robust. Connection Mgr. allows you to define trigger events for Ajax calls, success and failure states, as well as callback functions to be fired when various things happen. History allows for you to create faux application states, so that a user can bookmark where they’re at, even though it might not be a “real” URL. Additionally, this ensures that the back button continues to work as expected. Wellman explains how these work in tandem.

Drag + Drop

One of the hallmarks of any RIA is blurring the line between browser and desktop. Part of mimicking this interaction is the ability to drag + drop various elements. YUI has a robust solution for this. Wellman explains it adeptly. You can even specify boundaries beyond which an element cannot be dragged. For instance, restricting the viewport, to prevent an unintentional horizontal scrollbar via dragging an element outside the viewable area. YUI is all the more intriguing in conjunction with experimental plugins like BrowserPlus.

Conclusion

I hope that I have whet your appetite to learn more about YUI, and would highly suggest this read as a starting point. I have just scratched the surface of what this library can do. There are even entire CSS components to normalize fonts, grids, and build complex user interfaces. All of these topics are thoroughly documented by Wellman. Anyone looking to master a powerful client-side code library should definitely consider YUI, and this book.

Discuss This Topic

  1. 1 Nate Koechley

    Hey,

    Disclaimer: I work on the YUI team at Yahoo!.

    Thanks for the great overview of the Wellman book and the YUI library in general. You’re provided a solid introduction and survey that I think will indeed “whet people’s appetites.”

    I actually didn’t know (or recall, at least) that Viewzi is using YUI. Please shoot me an email if you’re interested in an interview or feature on our YUIBlog.

    Anyways, great writeup. Thanks for taking the time to share. And please let me know if you need any help with (or have feature requests for) YUI.

    Thanks,
    Nate

     

Comments closed after 2 weeks.