Implementation Focus:

By YUI TeamFebruary 6th, 2007

Periodically, we sit down with developers in the community who are implementing YUI for projects outside of Yahoo. Yesterday we met with a team from the marketing firm, a company that specializes in helping sales professionals monitor (in real time) the impact of emails sent to qualified sales leads. allows salespeople to track who has read an email message, which recipients have gone on to visit related web content, and which recipients are looking at that content at any given moment — all of which allows for a highly personalized followup response. Ryan Ausanka-Crues, Nader Farahani, and Chris Krueger from met with us to talk about how they are using YUI to create their rich interface and that crucial sense of interactive immediacy necessary in a product that communicates real-time feedback to its users.

At what point did you begin evolving your application to use a rich interface? What were the original tools/libraries you used?

The company from day one started as a Web 2.0-focused project, but we didn’t have the engineering resources to create everything ourselves — we knew that from the beginning. So we looked at a lot of UI libraries back when we were getting started on the product. We looked at Dojo, and we looked at Google’s web toolkit and some of the commercial libraries. We had a big decision to make about whether to spend money on a commercial product or use one of the open source packages. Ultimately, we found that what we could get from the open source community was more than enough for us.

Why did you choose YUI as part of your JavaScript foundation?

What attracted us to YUI specifically was the documentation, first and foremost. It was surprising, at the time we were doing this research, how many good tools were out there that simply didn’t have enough documentation to make us feel confident about doing complex implementations. YUI’s documentation makes it easier for us to hire people, too, because with YUI we don’t need to hire someone with YUI-specific skills. A good programmer can come to YUI and learn it based on the documentation. That’s been important to us lately as we’ve grown the company.

The YUI examples were another factor that drew us to YUI; you could see immediately how each component was meant to be used and whether it solved our core problems.

The final key draw to YUI for us was the quality of the APIs throughout the library. It was compelling to see how much thought was given to writing the APIs and designing them in such a way that it would make sense to use and to build on. The APIs resonated for us, made sense immediately in many cases, and that made it much easier for us to feel comfortable building on YUI.

There’s a sense, too, that with Yahoo! behind this it will be around for a long time and will continue to receive real development commitment.

How are you using YUI in your site today?

Today we’re using the Animation Utility, the Dialog Control, the Calendar Control, and Jack Slocum‘s YUI-ext Grid, among other things. We’re beginning to implement Connection Manager for XHR transactions, and we do a lot of that. We have a lot of work under development that extends this even further. We’re in the process of converting wholly to YUI from some in-house components and from some other third-party pieces. We’re now in the process of converting every XHR call to Connection Manager; in one place, we’ve ripped out about 700 lines of XHR code and replace it with 130 lines based on Connection Manager.

We’re also in the process of converting every table from an old hand-rolled solution to Jack’s Grid or the upcoming YUI DataTable.

You’ve mentioned that you’re using Jack Slocum’s YUI-ext library, an extension of YUI. What holes has Jack’s work filled for you?

Jack’s work was one of the things that put us over the top for using YUI . Some of the components we really needed, like the Grid, weren’t in YUI, but Jack had them; Jack’s Grid really made it possible for us to use YUI. And we could see how Jack was extending YUI and the patterns he used to do that; that showed us that there was a solid foundation for building our own implementations and going beyond just what YUI did out of the box. Another thing that we really liked about Jack’s work is the richness of his examples visually; he goes beyond the base YUI in terms of styling his examples, which is really important to us as we try to style our own components. We’ve also gotten accustomed to Jack’s implementation of the API documentation, which is based upon but styled differently than the documentation on the YUI site.

How has the YUI implementation process gone for you so far?

Our CTO really pushed us in this direction. We knew we needed to get ourselves onto a coherent platform, whether it was Dojo or YUI or something else. And when we went down this path, the experience really validated the decision to migrate to a platform. Things we’d been struggling with for a long time we were able to mock up in a couple of days once we moved to YUI. Jack’s Grid was a good example of that.

Compared to where we were, it’s been a huge step forward.

What are some of the pain points you’ve experienced while using YUI?

It would be better for us if there was more attention given to the graphical or visual aspect of the examples. It would be easier for our visual designers to work with the examples if they had more of the visual richness that will ultimately be part of the product.

Getting started was tough back in the early days for us — there’s so much information on the YUI website, it can be hard to know where to start. There were challenges early on, too, in just tracking what includes were needed — that information was available in the documentation, but not in the API docs, and so we spent some time learning how to track dependencies (Editor’s note: dependencies are now included in API docs as well as in user guides). Back in the early days, we would have benefitted from a "Getting Started with YUI" guide or tutorial.

Do you have a YUI implementation that would be of interest to the YUI community? If so, please share your link and post a message to the community forum at YDN-JavaScript, or leave us a message in the comments section below.


  1. “What holes has Jack’s work filled for you?”

    – Jack’s Element class is very useful and allows you to easily manipulate an element (removing it, toggling it…). I must confess that ATM I don’t need every method it provides but just a bunch (like remove, insertBefore, insertAfter, toggle) so adding these methods (that are really helpful) to YAHOO.util.DOM will be enough for me
    – DomHelper really rocks, can’t live without it
    – DomQuery will rock as much as DomHelper (I’m just waiting for an official release)

    – a YAHOO.util.JSON.load and YAHOO.util.JSON.dump class could be very handy IMHO

    Thanks for the great work, I love YUI!

  2. I for one really appreciate the work that goes into YUI. As someone who uses it on a day-to-day basis, it is by far the best Javascript library I have ever used. It really is extensible – many times I have used the prototypical nature of Javascript to make YUI do things I never thought it could before. Every time someone is interviewed for the “Implementation focus” case study series, it is simply yet another support of my belief that this is the way building a web app was supposed to be.

  3. I’m trying to create a menubar and its submenu dynamically. Its like this i’m getting my submenuItems and url and target from Database. The whole thing is coming as an ArayList. After that i’m creating seperate array for itemdata, url, target. and i’m trying to create menubar and submenu Item with that Array. But the problem is that i can only able to create submenu items in the menubar, no way to attach url,submenu and target with it. Please give me some idea to add url,target,submenu,submenu under submenu to the menu bar item.

  4. @sreekanth: Head over to the YUI Forums where you can post your question to the YUI community. Be sure to search the forums for similar questions and possible answers before you post yours, and don’t forget to read the Menu Control documentation carefully before posting your question. Note that there’s a video presentation by YUI Menu author Todd Kloots available for your review as well…lots of good places to learn about Menu. Regards, -Eric