Learning the Yahoo! User Interface Library [Englisch] [Taschenbuch]

The Yahoo! User Interface (YUI) library is arguably the best JavaScript- and CSS-based collection of tools and controls for web development. The YUI team has carefully tested them on all modern browser platforms to assure near 100% compatibility across them all. They provide excellent documentation, both online and downloadable. And it's all free Open Source.

However, while each component is well documented with text and examples, there remains a need of putting it all together. This book fulfills that need in part. Admittedly, a single application that incorporates a large number of examples would be too complex to follow, but I would have liked to see more interaction. The book is riddled with errors. Most of them, fortunately, are so obvious that you wonder how they escaped an editor.

Dan Wellman is a Brit. His wry British sense of humor makes the book a pleasure to read.

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. 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. For the purposes of this review, I will highlight a few of the things I like about YUI, and how the book brought those to light.

Ubiquity

Wellman covers some of the practical business reasons that one might consider using YUI. The code library is extremely well tested, put through its paces by roughly 3.4 billion page views per day on Yahoo's own sites. 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.

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.

Document Object Model

Wellman then explains how traversing the DOM can be 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.

Events

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. 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.

Animation

Wellman briefly explains how animations work in YUI, and shows some of the implications for rich interactivity. 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.

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.

Ajax

The Connection Manager and History components are both very robust, but Wellman breaks them down into understandable chunks. 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

Wellman explains drag + drop adeptly. One 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.

Conclusion

I hope that I have whet your appetite to learn more about YUI, and would highly suggest this read as a starting point. 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.

The Yahoo! User Interface Library is a free resource provided by Yahoo! for web developers. It's a collection of utilities that enable developers to build cross-browser web applications quickly and easily. This library has been around for a few years now and is very extensive. It contains utilities, components, controls (widgets), and CSS tools. This can be very confusing for the developer who has no previous experience with using these types of tools. Even though Yahoo! has some very good online documentation, it still can be difficult to get started using some of these many online tools.

Dan Wellman really explains the main core components of YUI Library very well and would be very helpful to anybody wanting to quickly get started using the YUI.

Dan starts off with a great overview of YUI, with some simple examples. Then in the next chapter (2), the author goes into the CSS tools that it provides to help the develop create consistent web pages of layout and design. The next chapter (3), explains many of the DOM and Event manipulation classes that are provided. This is a very useful chapter because many web pages that use JavaScript require manipulation of web elements on the page. Using many the DOM methods in YUI make it very easy to access any element on a web page.

Continuing with the book, Dan then focuses on the Ajax and Connection Manager classes. Ajax has almost become the defacto-standard of displaying and access data on a web page and using classes explained in this chapter make it very easy to understand many of the useful examples the author use such as a log-in page, newsreaders, etc. I was able to following along very easily and create similar examples based upon the author's explanations.

The rest of the book goes into many of the other useful classes such as: Animation, Buttons, Navigation Trees, Content Containers, and Drag-andDrop, and Auto-complete. You can create almost any type of web interface from the components that are explained from this great book.

If there is one library you use, it should be the YUI Library because it is backed by Yahoo! so you know it is not going anywhere and fully tested and this should be your book that you buy to truly understand it.

A great buy!