A look at the Yahoo UI Library


I have previously written about the Ext JS JavaScript library, and now it’s time to look at The Yahoo UI Library (YUI) – Ext began as an addon library for this one!


At first, YUI may seem rather big and confusing. Everything in it is namespaced, for example YAHOO.util.Dom, YAHOO.widgets and so on, which may initially confuse especially beginning developers.

However, YUI has excellent documentation and a lot of samples, and after you spend a little time getting used to it, it’s a great library.

The good

YUI’s strong points are encapsulation, modularity and extensibility, not to mention the fact that it has a lot of very good features, such as the RichEdit widget.

All of its classes are encapsulated in the YAHOO namespace, therefore making it very easy to use it with other libraries. This is something other JS libraries need to take heed of!

Everything is also quite nicely separated in modules, such as the DOM or the Event modules. This way you can easily include only the functionality you need on your pages. Also assisting this is the fact that Yahoo is hosting the library on their servers in minified format, and you are encouraged to link to them directly on your own pages. What this means is that if a user has previously visited a page which uses YUI, it’s possible that their browser has cached the JavaScript, meaning they will get faster page loading.

The classes of the Yahoo UI library are also easily extendable to provide custom functionality.

The bad

The only big drawback of using YUI is that you won’t get much “ready to use” functionality. For example, you will not get various ready-made animations or drag and drop functionality like you would get with libraries like Scriptaculous.

YUI does support both animation and drag and drop, but you will have to implement the concrete functionality yourself – Yahoo only provides you with the tools. This can initially cause some headaches, especially if you aren’t very familiar with JavaScript’s OOP features and such.


YUI is a bit like a good toolbox – it provides you with all the hammers, screwdrivers and other things you need to build your scripts. It also has a few ready components like the RichEdit box, DataTable and TreeView components. The top notch documentation, samples and webcasts help with the process of learning the ins and outs of the library.

If you don’t mind having to write concrete implementations of things yourself, YUI is a very good and well programmed library to base your JS code on.