An Introduction to YUI

With jQuery dominating the JavaScript framework landscape, many newcomers aren't exposed to other JavaScript frameworks. The truth is that there are a plethora of excellent JavaScript frameworks available, like MooTools, Prototype, Ext JS, and...YUI! While not as well known as some of the other libraries, YUI provides a wealth of tools for the web developer. Today, we're going to take a quick tour of some of its features.

What is YUI?

YUI (short for Yahoo User Interface and pronounced Y-U-I) is an open source JavaScript and CSS library developed primarily by Yahoo.com. YUI includes JavaScript utiltiies, a CSS framework (reset, grid, and fonts), JavaScript widgets and tools to help include and manage your modules.

There are currently two supported versions of YUI. YUI 2, which was launched in 2006, contains the lion's share of the YUI widgets. YUI 3 was released in 2009 and has a completely new syntax, greatly improving its ease of use (especially in event handling and DOM traversal).

Why YUI?

So you may be wondering, why should I even consider learning another JavaScript framework? Every framework has its strengths, so the one you choose will depend on your needs. Here's a couple of things that YUI really has going for it:

An enormous library of widgets, including one of the most feature-complete datatables out there.

YUI.use() will make a request to get the required modules, and will pass you a YUI instance in the callback that has all of the required modules. YUI 2 components can also be included by passing in the module name, prepended by yui2-. If you include a YUI 2 component, then you can access the YUI 2 instance via Y.YUI2.

Method 2: YUI 3 Configurator

This web based tool allows you to pick the modules you need and allows you to download or link to a minified file with all of those dependencies (this is similar to the jQuery UI tool). It also provides stats as to how the files will affect page loads.

Method 3: SimpleYUI

SimpleYUI is a recently released tool that simplifies YUI inclusion for those who are used to just including a JavaScript library and having access to everything. Just include the SimpleYUI file and you'll get a global YUI instance mapped to the Y variable with DOM manipulation, AJAX, and UI effects modules available.

<script type="text/javaScript"
src="http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"></script>
<script>
//Y is a global variable set up by the SimpleYUI script.
Y.one("#test").addClass("my class");
</script>

With SimpleYUI you can still use all of the other YUI modules dynamically by loading them with the YUI.use method.

Y.use('dd-drag', function(Y) {
// set up drag and drop
});

SimpleYUI has the potential to really help YUI adoption because it makes it much more accessible and familiar to programmers coming from libraries like jQuery.

DOM Manipulation

DOM manipulation is very easy in YUI 3 and the syntax should be fairly familiar if you've used jQuery in the past.

One interesting feature of YUI is that if you use the method from the first example, the selector does not need to immediately have a match. YUI will continue to poll for a match for up to 15 seconds after the page has finished loading, which means that you don't have to wait for the document to be loaded to use it (you don't have to wrap your event handlers in a document.load function).

Also notice that we prepended the event type with an optional string that namespaces the event. You can use this to later detach the event if you so desire.

Y.all("#test p").detach("myevent|click");

You can also simulate events...

Y.one("#test").simulate("click");

...and fire custom events.

Y.one("#test").fire("myevents:custom_event_one");

YUI 3 also supports touch events which allows you to add support to your JavaScript application for mobile devices. One potential gotcha is that you need to include the "event-touch" module using YUI.on in order for touch events to work.

The IO method accepts a URL and a configuration object as parameters. The configuration object is highly configurable, but I've included a couple of the most common options in the above example.

method - what HTTP method to use

form - if this option is specified, the form with the given id will be serialized and passed with the request.

on - this object sets up event handlers for various stages in the request lifecycle.

YUI's io module also allows you to send cross domain requests using a Flash based file provided by Yahoo. There are some caveats, however. First, you must have a copy of the YUI flash file on your server to actually make the request, and second, the domain you are accessing must have a cross-domain policy file that grants you access.

All of the properties can be changed using .get() and .set() on the animation object, allowing you to change the animation or the DOM elements to animate. Animations also fire events that can be listened too.

Taken together, the YUI animation object can be used to create all kinds of animations in you application.

Widgets

One of the nicest features of YUI is its widgets. YUI 3 currently has a limited set of widgets (tabs, a slider, and an overlay to name a few), but provides a powerful framework for creating your own YUI 3 widgets. YUI 2, on the other hand, has an enormous library of widgets. Here are a few:

CSS Libraries

The last component that we're going to take a quick look at is the YUI CSS libraries. YUI 3 provides four CSS resources.

CSS Reset - basic CSS reset rules. Everyone has their own idea of what a reset file should do, so you may or may not like this one.

CSS Base - these styles build on the Reset styles to provide consistent rendering across all supported browsers. This file provides things like input styles, header sizes, and table styles.

CSS Fonts - normalizes font sizes across all supported files. Once this stylesheet is applied, font-sizes are changed using percentages according to a table YUI provides. The YUI CSS Fonts resource is used by the popular HTML5Boilerplate.

CSS Grids - a CSS grid framework to help with layout. I'm not a fan of grids in general, but if you'd like to learn more, Andrew Burgess has a nice writeup of this one on Nettuts+.

Conclusion

This was only a quick look at a few of the components and modules that YUI offers. If this article has piqued your interest, I recommend that you head over to the YUI developer documentation and find what else YUI offers. What are your impressions? If you've used YUI in the past, what do you think of it?