Introducing YUI – The Rising Giant

Advertisement

Web developers may already have heard of Yahoo’s new AJAX and DHTML framework. Maybe not – Yahoo! User Interface (YUI) has yet not gained popularity similar to Script.aculo.us1, Prototype2 or Mootools3.

But it certainly will. Spot on – Smashing Magazine introduces Yahoo’s User Interface framework.

Editor’s note: be aware that libraries and frameworks often tend to generate not “optimal”, sometimes even bloated code. In YUI’s case especially if you use YUI Grids4 you might end up with dozens of div-containers even although you don’t really need all of them. Therefore it is almost necessary to verify the quality of the generated code before applying it to your web-site or web-applications — to maintain the quality of your code and save you a lot of headache in the future.

What is YUI?

“Yahoo’s User Interface” is a set of Javascript utilities and libraries that enable web developers to quickly create AJAX and DHTML websites and web applications. YUI is BSD-licensed and free (as in freedom) software so there are literally no restrictions in how and where to use it.

Yahoo! User Interface Library (YUI)5
Yahoo! User Interface Library (YUI)

Do I need YUI?

Maybe not yet.

YUI still has it’s rough edges as many components are in beta or even alpha stage, which makes life hard from time to time. However, Yahoo’s developers are working hard to polish and enhance YUI. It won’t take long until YUI’s quirks have been sorted out.

YUI will certainly soon belong to the standard set of AJAX frameworks such as Script.aculo.us, Prototype, and Mootools. Not only because a Fortune 500 company is the driving force behind it, but because YUI is created by top-notch developers.

Introducing the most important components

Core components: DOM Collection & Events
DOM Collection is a set of convenience methods that simplify DOM-scripting, element positioning and CSS style management, regarding browser specifics. “Events” is a simplified interface for subscribing to DOM events and for examining properties of the browser’s Event object. Custom Events are also possible that allow you to trigger events so that other components “subscribe” to those events and respond to them.

YUI Utilities
Several utilities have been merged into this part of YUI.

Animation (YUI Utility)
Using “Animation” component developers create animated objects that fly, ease in or out, change color, or resize.

Animation along a given path

Browser History Manager (YUI Utility)

Changes of content client-side do not lead to new URLs (through page reloads) that could be bookmarked. Cure is “Browser History Manager” that records new URLs in the browser’s history in order to enable users to bookmark certain stages of a web application.
Browser History Manager: Injecting date information into the URL

Connection Manager (YUI Utility)
“Connection Manager” is a simplified interface to XMLHttpRequest (XHR). It cares for initialisation of XMLHttpRequest, handles server responses and provides a callback interface so developers can easily process server respond objects.

DataSource (YUI Utility)
“DataSource” provides a unified interface for other components to interact with different types of data. It is configurable and supports simple JavaScript arrays, JSON and online servers over XHR. This variety of data sources makes it quite simple to develop an application dummy first using static Javascript objects and then switch to live data sources in order to create a “real” working application.
Drag & Drop: grouped objects

Drag & Drop (YUI Utility)
This component offers a wide variety of methods and functions to implement a draggable interface. For example, drag handles can be customised, objects can be grouped so drag targets can reject certain dropped items or a whole group of items.
Drag & Drop: reordering items

Element (YUI Utility)
“Element” is a wrapper around the browser’s HTMLElement that simplifies manipulating and reading DOM. Developers may also implement custom event listeners.

ImageLoader (YUI Utility)
This utility allows developers to defer loading of images during page load. For example, images placed on top of the page can be loaded prior to those placed outside the viewport. This can lead to better overall pageload performance.

YUILoader (YUI Utility)
“YUILoader” handles loading of components in the right order and automatically resolves component dependencies.

YUI Test (YUI Utility)
“YUI Test” is a handy module for unit testing6 purposes.

YUI Library & Widgets
“YUI Library & Widgets” contains numerous ready-to-use controls and widgets based on YUI Utility components.

AutoComplete (YUI Library)
Provides autocomplete functions. Autocomplete queries may be limited in scope, they can be deferred, results can be cached. Quite handy.
Autocomplete demo

Button Control (YUI Library)
This control replaces a whole range of standard form fields such as plain buttons, select fields, checkboxes, and radio fields. Designers have full control on how these should look like, contrary to the dull standard elements. Custom logic can be implemented, so this control is like form designer’s heaven.
Select fields emulation
Checkbox fields, radio fields can also be implemented

Calendar (YUI Library)
As one might have guessed this component provides an easy to use calendar, that features single month or multiple months views. Developers can also define valid date ranges, for example if only a certain date in a given date range should be selected.
Calendar demo

Color Picker (YUI Library)
“Color Picker” provides a color picking widget we all know from desktop applications. Color codes can be displayed in RGB, hex, and HSV format. Like all other widgets, color pickers can be placed in tab views and panel containers.
Color picker in a tab view

Container (YUI Library)

“Container” is the base class for several other sub-components:
“Dialog” and “SimpleDialog” provide functions that can be used to create dialog “windows”.
Container effects
“Loading” panels ask users to be patient, e.g. during a page load.

Besides “Dialog” and “SimpleDialog” there are several other sub components: “Module” is a base module for custom widgets or for enhancing existing widgets. “Overlay” positions modules absolutely on the page, floating above the document’s inline content. Just like we all know it from Lightbox. “Panels” are in many ways just like small inline windows that can be dragged and closed. They can be created from Javascript code or from HTML markup. Using “Tooltips” developers can pop up small tool tips when mouse is hovering above an element connected to such a tooltip. As a extra, tooltips can be connected to several DOM objects at the same time.

DataTable (YUI Library)

DataTable demo

“DataTable” is a mighty widget. It can read data from just about any source DataSource can hook into, and render an HTML table completely capsuled from the developer. Although designers still have full control on how the table looks like using common CSS. Users can sort table items client-side or server-side, scroll table, append or remove rows dynamically, resize columns, or apply developer-defined functions on selected rows. Tables can be split into pages and cells can be made inline-editable. It’s YUI’s killer-widget.
DataTable inline editing in action

Logger (YUI Library)
“Logger” is a useful tool for developers that chronologically logs messages emitted from scripts. This way developers don’t have to do the dreaded “place-an-alert()-somewhere-then-reload-and-check-again” cycle if they only want to know what values variables carry.

Menu (YUI Library)
“Menu” lets developers create accessible menus. Menu items can be remove or inserted dynamically and users can navigate them by mouse or keyboard.
Menu effects

Rich Text Editor (YUI Library)
This is yet another rich text editor. It is quite basic, although it features some distinctive functions such as Flickr-Search.
RTE showing off Flickr integration

Slider
“Slider” is a simple way to let users select a number in a finite number domain. They simply slide a handle until the desired value is reached. Not neccessarily useful in every case though.
Slider

TabView (YUI Library)
“TabView” provides a tabbed view. Tabs and views can be manipulated dynamically and can be defined via Javascript or via HTML markup.
Dynamic TabView widget

TreeView (YUI Library)
We all know treeviews from desktop file managers. TreeViews are ideal for presenting hierarchical data. Using this widget, data structures can be collapsed, expanded, and outfitted with neat icons.
TreeView Widget

YUI CSS-Grids:

Reset
“Reset CSS” normalises browser’s standard rendering by “resetting” CSS values of DOM elements to 0, e.g. for margins, padding and so on. This way, HTML rendering is absolutely the same across different web browsers, though it looks quite dull because all HTML look the same.

Base CSS & Fonts CSS
So in order to add some color and styles, Base CSS extends the normalizing approach by setting (and not resetting) CSS values, that also look the same across different web browsers. The same is done for fonts by “Fonts CSS”. The latter not only regards browser specifics but platform specifics also.

Grids CSS
“Grids CSS” is a 4kb CSS file that carries predefined page layouts. Layouts can be stacked, nested and subdivided in order to create distinctive layouts.

Conclusion

YUI at this stage is already quite vast. It is hardly imaginable that a developer would have absolutely no use for anything YUI offers. The BSD license allows YUI to be integrated into opensource projects as well as closed source projects. There is a bright future ahead for YUI, that’s for sure.

Further References

  • Yahoo! User Interface Library7
    The main page of the YUI offers searchable API documentation, references to YUI utilities, controls and widgets as well as an overview of YUI-related articles and, of course, components.
  • YUI API documentation8
    A handbook for all modules, classes, methods, events and files used in Yahoo! User Interface Library.

↑ Back to topShare on Twitter

  1. 1

    Thanks for this article. Your overview is very comprehensive.

    0
  2. 2

    Michael Thompson

    October 1, 2007 7:17 pm

    jQuery is still my favorite. The CSS selection using XPath and overall speed are enough for me. You can build (if they don’t already exist) the above plugins using just a few lines of jQuery — including the WYSIWYG editor.

    YUI just feels slow as hell, especially their WYSIWYG editor. But as long as there’s competition amongst the various libraries I’ll be happy: it’s the reason they’re constantly being refined.

    0
  3. 3

    I’ll use it for sure. It’s just a matter of time.

    0
  4. 4

    Yeah i definitely agree with the editors comments, the pages will surely get pretty heavy using all this stuff. I’m pretty happy with mootools for the moment:

    be aware that libraries and frameworks often tend to generate not “optimal”, sometimes even bloated code. In YUI’s case especially if you use YUI Grids you might end up with dozens of div-containers even although you don’t really need all of them. Therefore it is almost necessary to verify the quality of the generated code before applying it to your web-site or web-applications — to maintain the quality of your code and save you a lot of headache in the future.

    0
  5. 5

    You’ve got wrong link to mootools official site. Thank you for smashing jQuery. :D

    0
  6. 6

    I think YUI rocks. It is very handy and does some things which otherwise would take ages to implement by myself. Of course it also allows all the developers to use a consistent set of libraries and CSS layout techniques, instead of custom methods. And, the code is optimised and minified, what more could you ask?

    0
  7. 7

    Wow, nice and thorough introduction. I am currently writing yet another “this is the YUI” presentation for the Bangalore Open Hack Day on Thursday when I stumbled over this one. Thanks a lot.

    0
  8. 8

    I’ve been using YUI for about a year and a half now, since the first few versions really, for a few reasons:

    1. It’s extremely well documented. Not only does it have a Java-style API reference, but you can browse the source files online and read the comments and get a feel for how the YUI developers want their code to be used. By comparison, Prototype (the only framework I had used before) is really poorly documented and the code is a bit incomprehensible to browse.

    2. It’s designed with namespace integrity in mind. The developers encasulate all their code so that the global namespace–the bane of Javascript’s existance–isn’t muddied with a million new library functions. They also reveal the encapsulation functionality to the developer-user, which makes it easy to box code in similar ways.

    3. It’s backed by Douglas Crockford, one of the early proponents of Javascript as a serious programming language. His examinations of Javascript’s scheme-like behavior really made the language click for me, and the patterns I picked up from his site have really improved my JS coding style.

    0
  9. 9

    Thanks Smashing for the great info!
    Does anybody know to implement this into MODxCMS?

    0
  10. 10

    Adobes Spry still beats yahoo, in my opinion. Yahoo is doin good, yeh.

    0
  11. 11

    But I will stay with my “simple and small” MooTools. ;)

    0
  12. 12

    Thanks for this overview of the YUI I really liked the article, very useful ;)

    0
  13. 13

    I’ve used the YUI before in the past and I have to admit, it works quite nice.

    0
  14. 14

    Another important thing to mention about YUI is that it doesn’t change anything. Compare this to Prototype that pollutes the global namespace with a hand full of classes that you probably wont ever use.

    YUI allows you to load only what you need. On top of that, it comes minified and you don’t even need to download anything since Yahoo! hosts the files for you.

    Don’t get me wrong. Other frameworks are nice. When you just need to put something quick together and don’t need to think about scaling, who cares? But if you ever plan on scaling your app, you should seriously consider YUI.

    Still, none of this is worth anything if you write bad code…

    0
  15. 15

    Nice overview.. I already use the YUI Grids every now and then and i’m definately going to look in to these components too. I mean.. I like Prototype, but it’s quite heavy and I only use 10% of it.

    By the way.. once you stop relying on the YUI grid builder and figure out how the CSS actually works it’s quite possible to make nice HTML with it. It’s just too bad that they insist on using those unsemantical class names.

    0
  16. 16

    Photoshop Tutorials

    October 2, 2007 12:16 pm

    I prefer Prototype and Mootools over YUI. The best ever framework for javascript is Prototype.

    0
  17. 17

    Personally I prefer prototype and Scriptaculous and since Prototype and Scriptaculous in Action came out, we have a resource that’s as good as the YUI documentation.

    I think the fact that the Ruby on Rails community is behind Prototype and Scriptaculous means that it will receive enough developer attention as to be one of the better Javascript frameworks for some time to come.

    0
  18. 18

    The mootools link is broken.

    0
  19. 19

    I have been using the YUI library for about a year and a half and would second everything that Nick Husher said.

    The community as a whole is very good and their blog http://www.yuiblog.com teaches a lot of useful best practices that relate to general web development.

    Also don’t miss out on YSlow, a little add on for the Firefox extension “Firebug” that helps analyse why your pages might be slow.

    I would highly recommend this JS framework and also visit their homepage for some great advice from people at the top of the game

    0
  20. 20

    as much as YUI supporters tout their “namespace integrity” I cannot but see lots of overcomplicated syntax and dirty code.
    I used YUI in the past for some specific tasks and it was a good experience specially with their good docs, but things get dirty really fast once you start pouring “YAHOO.util.Dom.getElementsByClassName” and the likes around your code.

    0
  21. 21

    Maybe i’ll pass to YUI… really useful article. Great.

    0
  22. 22

    I experimented with the YUI grid. While it is an excellent concept, I think that Blueprint is better for that. My favorite part of the YUI is their CSS reset. I’ve since decided to go with Eric Meyer’s modified version, but Yahoo! did a really excellent job on their style reset.

    0
  23. 23

    Great overview of YUI; I’ve recently went though another round of “choosing and Javascript library”, the last time I did this it came down to jQuery and YUI, with jQuery winning because of it’s small size and CSS-approach to Javascript coding. I needed to use Javascript just to add some slight behavior to the project I was working on.

    For the current project I’m working on, I started with jQuery. We then started to get fancy with Ajax stuff, autocompete forms, modal boxes, drag-and-drop, and list sorting. While it’s possible to do this stuff with jQuery through the community contrib plugins, it’s not an ideal space to be in. jQuery’s core library is awesome, the contributed plugins aren’t at the same level. For example there’s 4 different plugins for autocomplete…which one do I use? It’s things like this that started making the decision to use jQuery one that should be reconsidered.

    Ahh… the YUI library comes into the light again…this time it doesn’t look so scary, especially compared with the mess I was experiencing with jQuery and user-contrib plugins. YUI is documented really well with examples, overviews, source, and APIs all things a good project should have. All the code is written together and follows the same standards, which is awesome and makes things easier when using new components. The YUI Loader is pretty frickin’ slick too! When presenting choices to your boss and/or stakeholders about the benefits of Javascript libraries, then showing them something that a huge internet company is backing and developing I think they’re going to be a little more at ease if you choose YUI from Yahoo over jQuery from John who??

    So even though I love jQuery it has it’s place and some projects require something more, when that’s the case my choice is simple, YUI. Figure out how big the “behavior” layer is on your project, if you just need to do some simple stuff, maybe some Ajax, look to jQuery. If your behavior layer requirements are beyond that, you need drag-and-drop, autocomplete and the like, look to YUI.

    0
  24. 24

    Thanks a lot for putting all this information together! Very good article!
    And, yes, Yahoo! seems to be doing a good job here.

    0
  25. 25

    Many smaller shared hosting sites will greatly benefit performance-wise by having their .js and .css files hosted directly off Yahoo Class-A servers.

    Gleb

    0
  26. 26

    sorry guys, can’t use my real full name — might mess up my competitive advantage.

    Here’s what I think is the most compelling reasons that YUI rules, especially when it comes to the css libraries:

    It’s what Yahoo uses on their own very highly trafficked sites!

    They have (until recently, like, i heard today the big G surpassed ‘em) the most highly visited website!

    So all that other stuff is cool — but as someone who experienced great elation about css, and the great disappointment when discovering I had to learn about hacks and filters and the like — YUI (at least the css) potential influence in providing browser compatibility cannot be underestimated.

    0

↑ Back to top