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.

Introduction

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.

Components

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

  • CSS Reset: neutralizes browser CSS styles
  • CSS Base: applies consistent style foundation for common elements
  • CSS Fonts: foundation for typography and font-sizing
  • CSS Grids: more than 1,000 CSS-driven wireframes in a 4KB file

The following components are considered beta:

  • Browser History Manager: …designed to facilitate the creation of web applications in which the navigation buttons are fully functional
  • DataSource: provides a common configurable interface for other components to interact with different types of data
  • Element Utility: makes simpler common tasks such as adding listeners, manipulating the DOM, and setting and getting attributes
  • ImageLoader Utility: allows you as an implementer to delay the loading of images on your web page until such a time as the your user is likely to see them
  • YUILoader Utility: allows you to load specific YUI components and their dependencies into your page via script
  • YUI Test: testing framework for browser-based JavaScript solutions
  • Button: enables the creation of rich, graphical buttons that function like traditional HTML form buttons
  • Color Picker Control: provides a rich visual interface for color selection
  • DataTable: provides a simple yet powerful API to display screen-reader accessible tabular data on a web page
  • Rich Text Editor: replaces a standard HTML textarea – it allows for the rich formatting of text content

This series is meant to help newcomers to get started with the YUI library by providing some simple examples (starting with the core components and taking it from there). The first one will be Mission 1: Attaching Events (the easy way).

How to include and use YUI components

To make use of the powerful YUI library, the required component files need to be included in a script statement on the page. If you only want to make use of the core components (YAHOO, Event, DOM), the include statements should look like this:

<!-- Dependency --> 
<script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js"></script>
<!-- Event source file -->
<script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js"></script>
<!-- Dom source file -->
<script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/dom/dom-min.js"></script>

Or even shorter:

<script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

The “-min” addition to the JavaScript file tells you that this file is a minified version of the original source file. This means, comments, carriage returns and other unnecessary whitespace have been removed from the file to reduce filesize and save bandwidth.

Just before the closing body tag, those JavaScript files should get included in the page. Douglas Crockford can tell you why it is a good idea to include JavaScript there instead of in the head. It is also part of Yahoo!’s Exceptional Performance Rules.

One word regarding the examples to come during this series: I am going to use the Revealing Module Pattern (courtesy of Christian Heilmann) to write the example-specific JavaScript code. Should you need help to understand how this pattern works, take a look at Christian’s post or check out my article on JavaScript Programming Patterns. Hope you find that stuff useful!

The first part of the series: Mission 1: Attaching Events (the easy way)

Resources