By Harry Fuecks

Warming up to Yahoo! UI

By Harry Fuecks

Kevin’s written a couple or times on Yahoo!’s User Interface Library. With endless new DHTML and AJAX libraries and frameworks being released every week, you could be forgiven for being less-than-excited by yet another.

But scanning the slides of Simon’s XTech talk (PDF here) and, in particular, looking at what they’ve done with their Grid CSS stuff (which seems like a major breakthrough for those, like me, that struggle with CSS layouts), finding myself getting really interested. The impression from scanning the code and examples Simon provides in his talk is they’ve really managed to strike the balance between doing too much and too little – that yui has has genuine value but remains “low fat”.

Think there’s also an interesting story here about the development team that put yui together. In some areas Yahoo! seems to be fumbling the ball and while reading Jeremy’s blog, get the impression of a company being sucked dry by middle management. Despite that, the yui team do seem to have pulled off something pretty impressive – some reading on them here as well as an interview with Thomas Sha (the lead) here.

Anyway – only just starting to experiment / climb the learning curve so no real experiences to offer but if anyone (not employed by Yahoo!) has any notes to share, would be great to hear it.


  • Hey Harry,

    I’ve also start looking at the YUI this week and I must say that I’m really please with the “Controls”, I’ve only starting to play with the calendar and container (dialog) and they are nice tools for me at the moment.

    I use them mostly to “popup” form element to help my backend admin to be more user friendly for our user when editing complex element of their system.

    i.e.: One part of the admin allow for the edition and addition of training dates for a specific course. Using the dialog, the calendar and some AJAX the user can add a training in a matter of a couple of click.

  • x4t

    The YUI really works great. I’m using it for a few of my demo systems, and it really works genuinly. D&D, search (suggest) etc all work fine for me using the YUI.

  • Prototype? Doing too little? Surely you jest! While it may not have all the glitz of other Javascript frameworks, it makes the tools it does supply so darn easy to use that it’s like manna from heaven. I did a jig the first time I discovered I could implement AJAX with one line of Javascript. Now if only the simple Prototype library would have a function for doing those floating DIVs that are all the rage…

  • Prototype? Doing too little? Surely you jest! While it may not have all the glitz of other Javascript frameworks, it makes the tools it does supply so darn easy to use that it’s like manna from heaven. I did a jig the first time I discovered I could implement AJAX with one line of Javascript.

    Avoiding a flame war, let’s just say here that I think what Yahoo’s AJAX implementation (the connection manager) is smarter than prototype’s – for your one line of code, you’re getting more taken care of for you by YUI.

  • but if anyone (not employed by Yahoo!) has any notes to share, would be great to hear it.

    Oh gee thanks. And I was just going to tell you how much more cooler it is – but I guess my words don’t count now ;)

    My only advice is to just slowly go through the documentation. I know nobody likes to read – but c’mon now. The biggest complaint about Prototype in the beginning was the documentation (or lack therof). Palmer has indeed built something very cool so there’s no doubt about that. But you’ll find that with the YUI utils that they are more fine crafted and broken up into pieces that just makes sense.

    Also take note on that Connection Manger ^ (from comment above) – Y! has had more of the research time to look into polling intervals, code implementations, and user testing on what makes a good time out.

    When you get into animation it’s very simple to drop in the Effects because they’re just dirt simple to implement. Huge props for that. With the YUI Anim util it takes a little getting used to, but in the end it gives more flexibility by defining your own animations rather than canned effects. Again, it’s based soley on the perspective on the developer and how you like to implement code.

  • We’re integrating Yahoo UI in our PHP framework these days and really love it. In just one day we converted all the ajax stuff from Cpaint 2.0 to YUI without trouble. Autocomplete was a matter of 1 hour and we’re now working on other interface improvements.

    We also tried but (perhaps it was our fault) had a lot of trouble with it on IE. Their autocomplete component is bugged in my opinion and even the demo on scriptaculous site does not handle keyboard correctly and don’t update correctly the autocompleted suggestions when you hit backspace.

  • Keith

    I’m pretty underwhelmed quite honestly.

    I set up their grids example and played with it for a bit. On first glance, it’s awesome! It seems like css magic to be certain, but upon closer inspection they layout isn’t that solid.

    For example…

    I used the yui-t4 class for my #doc div.

    It looks great!

    I adjusted the #doc div to be wider because it degrades nicely with a min-width statement and I wanted something larger than the 750px layout they give you to start with.

    It looks great!

    I start adding content to the main DIV.

    It looks great!

    I customize a menu on the right DIV. BIG problems. If you don’t manualy wrap your text. It blows the site design away. And then when you enter a <br />….the layout breaks!

    That’s VERY fragile for such a benign layout in my opinion. I’ll obviously reserve my final opinion until I have more time with it or hear some great thigns about it. For the time being though…I’m totally underwhelmed by the grids functionality.

  • Karl

    There is a bug in my version of IE7 Beta2 where whenever I mouseover the “Daily Blogs” box on the homepage it just dissapears.

  • skeeterbug

    i gotta say… i’m not improessed with YUI’s implementation.

    check out this slider…

    it is nearly equivalent, but its implementation is intuitive and DRAMATICALLY easier.

    read pages and pages of docs and have to insert 50 line sof code to get functionality… nope.

    i’m underwhelmed with YUI’s slider implementation. it is nice… but WAAAAAY over complicated.

  • Typical of most developers. Find one bug that is possibly a bit more difficult to implement – and are instantly unimpressed.

    @Keith, Karl, Skeeterbug: You should look into sending in suggestions and bugs to the YUI team. Go to the Sourceforge project page and get in all your requests, bugs or concerns there:

  • Anonymous

    polvero, i’m not talking about a bug, i’m talking about an implementation from *hell* unless you are adept at javascript.

    go ahead, try and implement yui’s slider based on their web instructions. blank screen. when you view their example in the docs, they have a ~100 lines of code… for a slider?

    compare the two implementations… one clean, concise and efficient (by a single dev) and one a holy mess of code (try and implement it!) from a team of “expert” develoeprs.

    now, implement carpe’s slider.

    that isn’t to say they didn’t have a reason to make implementation a code mess… i just don’t know what it is… and it might be my ignorance. it could also be they over thought the application and didn’t even consider the user.

    however, if someone wants a slider, i know which one i’d recommend… carpe over yui every day of the week. now, if you have an edge case that requires increasing complexity 10 fold… use yui.

  • I share your impression Harry. I’m impressed by the YUI

  • I’ve been tempted to try them as I’m about to redesign the interface for one of my web apps, the only demo that I’ve been less than impressed with is the Tree control. Under IE6 and a 512K ADSL connection you still have to wait for the icons to change and update. Would be nicer if the images were cached so that delay isn’t there between image state changes. Relying on the browser to do it for you isn’t always the best idea.

  • skeeterbug, there are several things that the yui slider does that the carpe one doesn’t, and are namely in the areas of usability and accessibility. For example, you can click on the track and tick marks on the yui version to move the slider, but not on the carpe version. Plus the yui version also supports keyboard events like the arrow keys.

    Are you willing to sacrifice user experience and accessibility for an easier development implementation?

  • Just as you mentioned, I’ve found the YUI page grids to be “just what the doctor ordered”. Flexible enough to accommodate most layouts effectively, especially for the web application developer crowd who just want to get their apps done.

    I’ve begun combining the YUI page grids, reset-css, and fonts-css into a Visual Studio.Net 2005 starter kit with the Microsoft Atlas framework.

    The goal of my starter kit is simply that, to get you started. I’ve been frustrated by past VS.NET starter kits simply because they’re too complete. They’re good, but too far along the development cycle (for my tastes).

    My starter kit will help in developing Atlas/YUI based sites by providing all the raw materials needed to get started, for every project. In addition, Christopher at has graciously allowed me to provide his CSS menus with the kit.

    The kit is currently in beta, available from The official v1.0 should be released by this weekend.

    Thanks for this post Harry, YUI could use more exposure.

  • ciyYR5aZTV

    Hi! Very nice site! Thanks you very much! 2pq5NLd7CH16

  • pkrtfcuaby
  • Trebloc

    Dang skeeterbug, you weren’t kidding. Using YUI to implement a basic slider has taken me 1 hour and running (and I still can’t get the thing to work). Using that Carpe slider took about 30 seconds!! Not only that, I now see how it all works and can changes things to suit my needs.

    I’ve noticed quite a few Ajax libraries that, as time goes on, become more and more difficult to use until they are more trouble than they are worth. moofx has become one of those. Their initial offerings were so easy to understand that you could make use of them in seconds and with very little code. Lately everything is documented in such a way that, while it looks real cool and technical, is so confusing that I’m reminded of the first time I tried a Haskell tutorial. Bummer.

Get the latest in JavaScript, once a week, for free.