Agent YUI: Introduction

This is gonna be a series for all Web Developers among you, my fellow readers. And all your movie lovers (maybe). Cause it is going to feature some quotes from the most famous spy in movie history. But what it really is: a series of tutorials how the Yahoo! User Interface Library (YUI) can be your secret weapon for many Web Development matters.


Bond: You know, you’re cleverer than you look!

Q: Hmm… still, better than looking cleverer than you are.

from Die Another Day

The YUI is a JavaScript library created and maintained by the Yahoo! Developer Network. It consists of several components which make the life of Web Developers easier in a way that common desired functionality can easily be achieved by using one (or more) of the components provided by YUI. As with other JavaScript libraries, it aims towards cross-browser compatibility and giving the user the possibility to use one function/component, and does not have to worry if it works in browser X – the library takes care of that.

Apart from JavaScript components to re-use, YUI also includes several CSS resources – for example, to apply a common ground by resetting all the default browser margins, paddings etc.

Why YUI? Why not library X?

From my personal point of view, there are several reasons for using YUI:

  1. Unlike some other libraries, the YUI library consists of several single JavaScript files which can be included in a webpage separately. The library does not force you to include one single file, whichs size might amount to 100kB (or more), which increases page load times.
  2. YUI is maintained by Yahoo!, a big player in the internet industry, which increases the likelihood of continued support for and development on that library.
  3. The syntax is easy to understand. It might be more verbose than the syntax of other libraries (e.g. jQuery), but I believe it is much more easier to hand over code from one developer to another, even if that person has not worked with YUI before.


As stated above, YUI consists of several components. In the current version (2.3.1 as of October 14th, 2007), the following components come with it and are considered stable to use:

YUI Core

  • YAHOO Global Object: provides a single global namespaces for all components
  • Dom: used for common DOM tasks
  • Event: comprises methods related to attaching and subscribing to events

YUI Library Utilities

  • Animation: animate elements involving size, opacity, color, position, and other visual characteristics
  • Connection Manager: simplifies XMLHttpRequests – if you love AJAX, this will be your friend
  • Drag & Drop: create a draggable interface efficiently

YUI Library Controls/Widgets

  • AutoComplete: provides suggestion and completion functionality for text input (aka “Suggest as you type”)
  • Calendar: calendar interface entirely created with JavaScript
  • Container: family of components to let developers create content-containing modules (it includes Module and Overlay: Tooltip, Panel, Dialog, and SimpleDialog)
  • Menu: as the name implies…makes it easier to add and display menus
  • Slider: enables the user to adjust values in a finite range along one or two axes
  • TabView: is designed to enable developers to create navigable tabbed views of content
  • TreeView: create a visual presentation of hierarchical node data

YUI Library CSS Tools

Page 1 of 3 | Next page