Happy Trails to YUI

Review

Dojo has cachet, but the Yahoo! User Interface (YUI) Library has got the goods. YUI is fast, well-designed, and well-documented. Yes, documented. Not just API docs, but tutorial-style documentation with honest-to-goodness examples.

Here’s the catch: the YUI site is organized like an encyclopedia. Everything is in arbitrary, alphabetic order. Great for looking stuff up later. Bad for getting started now.

If you’re ready for Ajax, but your JavaScript skills are not, first spend a quality day with the Crockford Clips, courtesy of YUI Theatre. It’s just enough knowledge to make an object-orientated programmer dangerous.

Once you are over the OO JavaScript hurdle, the remaining challenge is ramping up with YUI itself.

To get started with YUI, I recommend reviewing the slide overview from XTech Developers Day, and and then following the “Happy Trails“ through the documentation. If you take your time and try some of the exercises on your own machine, it could take a day or three to get through it all. (Though, if you’re like me, about half-way through, you’ll be off coding your own application, and leaving the rest for later!)

Read Me First

The Happy Trails

After browsing the XTech slides, I suggest reviewing the YUI documentation in a step-by-step order. I’ve divided the trail into three legs.

First Leg - YUI builds on several “backbone” packages that hold the library together.

  • Yahoo Global
  • Dom

  • Event

  • Element

  • Logger
  • Connection
  • Animation

  • Drag and Drop
    Second Leg - The library provides several workhorse packages that manage and display data.

  • Container

  • Module, Overlay, Panel, Tooltip, Dialog,
     

  • SimpleDialog

  • Menu
  • Tabview
  • TreeView
  • DataSource
  • DataTable
     

Home Stretch - Other library controls provides special effects, like sliders, buttons, and calendars, along with browser history management, and grid-based layouts.

  • Autocomplete
  • Button
  • Slider
  • Calendar
  • Browser History Manager
  • Reset, Fonts, and Grids (This could also be viewed first.)
    The mass of YUI documentation can seem imposing at first, but if you break it down, and follow the trail, you’ll be up and running in a New York minute. :)