How to Create Full Interactive CSS3 Applications with YUI

By John Paul Mueller

The Yahoo! User Interface (YUI) library (Yuilibrary) is a full-featured development — API akin to jQuery and jQuery UI CSS3 combined in some respects, and richer than these libraries in others. This is a complex API designed to handle the needs of larger applications.

In fact, you actually do need to go through the tutorials, examples, and user guides supplied at Yuilibrary to really use this product. In short, this is the kind of library you use when you need to create a high-end, highly interactive application.

User interface support in YUI revolves around the concept of a skin. You add skinning support to your application and then extend it as needed to make use of various controls. The array of controls is rich, so you likely won’t need to use any other library with this one. In addition, the library provides graded browser support for a wide range of browsers (see Yuilibrary for details).

You find a huge number of examples on the site (see Yuilibrary) that demonstrate all sorts of tasks that developers normally perform. When learning to use this library, it’s a good idea to look for an example that could perform the task you want to perform — and then extend it as needed to meet your needs.

As with any other programming technology aid, you need to consider the tradeoffs when using specific libraries. YUI is a great library for high-end development that requires the complex and flexible environment it provides. The reason many sites use products such as jQuery is that these libraries are simple and easy to debug. Always weigh the costs before you get too involved with a particular library.

Smart developers use an Integrated Development Environment (IDE) with a product such as YUI. The main reason to use an IDE is to reduce complexity and make it possible to work with the library without constantly referring to the documentation. A number of IDEs will work with YUI; however, most developers seem to prefer using Komodo Edit or JSEclipse.