start blog post

Review: YUI 2.8 Learning the Library

YUI 2.8: Learning the Library is a new book by Daniel Barreiro and Dan Wellman covering the ins and outs of the Yahoo User Interface Library (hereafter "YUI"). YUI is both a set of common JavaScript utility functions and an ever-growing collection of widgets for building rich internet applications. I have studied both YUI 2 and YUI 3 from a JavaScript library developer point of view, but obviously working at Yahoo has given me much more exposure to YUI on a practical level.

Front Cover Find this book on Amazon or the publisher's site.

Why YUI 2.x?

Since YUI3 is available, you may wonder why Packt would want to publish a new book on YUI2. The author does a good job of explaining why. Development has not stopped for YUI2 — gallery widgets are being added and improved consistently. YUI3's use(...) statement can even load YUI2 components, so you get lot of interoperability between versions.

Getting Started

Learning the Library assumes familiarity with HTML and JavaScript, but not necessarily with YUI. Chapter 1 teaches you how to get YUI 2.8 on your page, what license it uses and why, where else you can find help, and a bit about the library's overall history. There are also a few code snippets which serve as syntax examples, but then you jump right in and write an interactive Calendar widget. This is a practical example which includes writing a support class for dealing with date math.

CSS and DOM Utilities

The next chapter covers reset, base, fonts, and grid; these are CSS features which take the headaches out of consistent cross-browser design. The grid system allows nested grids of varying size, and it's easy to see how you can rapidly mock up a page layout with it.

Grids YUI 2.8's CSS grids break a page into customizable "building blocks"

Chapters 3 through 5 cover several features which are now considered common across nearly all JavaScript libraries: normalizing DOM access across various browsers, handling user interface events, calling the server using AJAX, and animating CSS attributes. Via another practical example, you build an Accordion widget to put everything you've learned thus far to use.

Putting the UI into YUI

The second half of the book really dives into the widgets and controls available in YUI. As modern browsers converge on features and standardization, this is really where the biggest differences tend to be from one JavaScript library to the next. Chapter 6 introduces the generic containers - Module, Overlay, Panel, Tooltip, and Dialog. These are "virtual windows" which are suited to different purposes. For example, if your widget accepts user input, you may want to wrap it in a Dialog. If you need to drag and drop your widget, start with a Panel.

Navigation menus comprise Chapter 7, which is available as a free download from the publisher. The next few sections cover data-intensive controls such as trees, tables, autocomplete, how to link front-end UI components with back-end data sources, and how YUI handles drag and drop operations. The authors devote an entire chapter to the Rich Text Editor, and walk you through building an e-mail editor complete with formatting, input validation, sanitization against hacks and attacks, and CSS styling to make your editor look like a unified widget.

Debugging, Performance, and Wrap Up

Everyday Tools, the final chapter of the book, covers several developer tools. You see how to debug classes and events using YUI's Logger control, and how to use external tools such as JSLint and YUI Compressor to improve the quality and performance of your code.

Logger Console YUI's Logger Console displays live debug information right on your webpage.

All in all, this book is great for getting up to speed with YUI 2. The examples are useful and complete, not simple snippets, and they are provided from an object-oriented and "best practice" point of view, which is to be expected if you are familiar with Yahoo's Developer Network.

var tags = [, , , , ];

  • share this post:
  • email a friend
  • float this post
  • digg this post
  • share on stumbleupon
  • submit to technorati
  • tweet this post

end blog post

most viewed this week

least viewed this week