The Yahoo! User Interface Library
By Eric MiragliaFebruary 13th, 2006
The Yahoo! User Interface Library is a collection of JavaScript components that help developers enrich web applications with desktop-style, event-driven interactions. We’ve focused on creating a lightweight and modular library with an a la carte deployment style, minimizing the pageweight associated with this move toward greater richness. During the past six months, we’ve seen much enthusiasm for the library and rapid adoption among Yahoo!’s front-end engineers. All of us who do web development at Yahoo! are committed to improving the sharpness and immediacy of our products’ interfaces, and we see this platform as an important element of that effort.
These are industrial-grade components. Their design has benefited from the input of more than 100 web engineers at Yahoo!, and we’re working hard to make usage both clear and flexible. Each utility and widget in the library has been battle-hardened in the browsers of millions of users and in the aggregate this code provides the foundation for some of our most heavily trafficked applications, including the My Yahoo! customizable news portal. Each member of the library supports the full suite of A-grade Browsers within our Graded Browser Support scheme, providing a consistent cross-browser platform for developing richly interactive features. In short, these are the same utilities and widgets that power an increasingly broad spectrum of Yahoo! properties today; they are alive in our flagship products and at massive scale; we’re committed to this library’s growth and refinement because we’re committed to being more ambitious in the interactive idioms we create for Yahoo!’s 400 million users.
Best of all, and in the spirit of other excellent libraries in the JavaScript ecosystem, the Yahoo! User Interface Library is free for all developers to implement and deploy thanks to a wide-open BSD license. This work represents some of the best we have to offer, and we’re really pleased to be able to share this evolving work with you — even as it continues to evolve.
The creation and open-sourcing of the Yahoo! User Interface Library highlights two of our core convictions about the current state of the Web and the nature of front-end engineering:
- Web users in the mainstream are demanding more from the Web today. For a decade, we’ve operated within a browser canvas characterized by reduced expectations. Users have been taught to expect dramatically less from web applications than from similar applications on the desktop. Innovative companies — including Yahoo!, but also including prominent competitors (like Google) and creative new entrants (like Zimbra) — are helping to break down the dichotomy between browser and desktop interactions. In order to do this effectively, we’re all challenged to improve the tools available for in-browser development so that product designers can demand more and so that we as engineers can deliver.
- A rising tide lifts all boats. We’ve been inspired and motivated by the work done on other open-source JavaScript libraries — Sam Stephenson at Protoype, Thomas Fuchs at Scriptaculous, and Alex Russell at Dojo, to name just three. While these existing resources weren’t a perfect fit for Yahoo! when we began work on the Yahoo! User Interface Library almost a year ago, their continued growth and excellence exemplify why we love this discipline: Front-end engineers are more committed than anyone in the industry to the idea that a rising tide lifts all boats, to the notion that the more we do to improve users’ experience across the Web the better it is for all of us who create and compete in its economy. From the beginning, we wanted to make sure that the Yahoo! User Interface Library would be a part of this process — an acknowledgement of how much we value our community’s creativity and openness and a small, hopefully meaningful reciprocation for all the learning and inspiration provided by our colleagues across the industry.
The initial collection we’re announcing today includes five core utilities and three widgets; more utilities and numerous additional widgets are in process. We’ve dedicated a wonderful team of engineers to this effort and we’re increasingly drawing from the expertise of engineers throughout the company. In our release today we are providing, along with fully-commented JavaScript code, a body of detailed developer documentation on each component; we’ll continue to make documentation a serious priority as the library continues to grow. In posts later this week, we’ll write more about the utilities, the widgets, and the underlying vision driving the Yahoo! User Interface Library’s development.
We’re excited to share this work with you today as we join more publicly in the vibrant ecosystem of front-end engineering. The web has been reborn with ideation and experimentation during the past several years, and much of its buoyancy has been driven by the creative essence of this discipline’s membership. We hope in this library you find ideas and solutions that, in ways however small or humble, energize your participation in web’s current renaissance.
Thanks,
Thomas Sha, Nate Koechley, and Eric Miraglia
Yahoo! Presentation Platform Engineering
February 13, 2006 at 9:17 pm
i’m very strongly encouraged by this, its a great move. i’ve used these libraries internally – they are excellent. releasing them into the wild will help the community and also in turn help yahoo. i wouldn’t cheerlead for these libs if they were not of very high quality.
February 14, 2006 at 1:13 am
[...] http://yuiblog.com/blog/2006/02/13/the-yahoo-user-interface-library/ [...]
February 14, 2006 at 4:41 am
Great move. Are you going to do something of that kind for Flex 2?
February 14, 2006 at 10:34 am
[...] The Yahoo! User Interface Library: is a collection of JavaScript components that help developers enrich web applications with desktop-style, event-driven interactions. We’ve focused on creating a lightweight and modular library with an a la carte deployment style, minimizing the pageweight associated with this move toward greater richness…These are industrial-grade components. Their design has benefited from the input of more than 100 web engineers at Yahoo!, and we’re working hard to make usage both clear and flexible. Each utility and widget in the library has been battle-hardened in the browsers of millions of users [...]
February 14, 2006 at 11:10 am
[...] Both these libraries together provide help to build Web 2.0 websites for users craving for richer functionalities, but still complying with the accessibility and web standards. You can find more information about them on the Yahoo! UI blog, especially the posts Yahoo! UI Library and Yahoo! Design Patterns Library. You can also subscribe to the Yahoo! Developer Network mailing list for further involvement. [...]
February 14, 2006 at 12:00 pm
Yahoo! thank you so much for this fabulous set of resources. The patterns are really useful and I’m looking forward to trying out the library in my web applications.
Cheers
JB
February 14, 2006 at 7:38 pm
[...] Yahoo! UI Library, recently released by Yahoo! under BSD license, is quite a shining piece of web development toolkit. It has all the nifty Javascript utility functions/classes to build your next Web 2.0 application, in a similar fashion to other toolkits like Script.aculo.us or Rico, but backed by one of the largest company on the web. [...]
February 15, 2006 at 5:46 am
Is the chart of browser grades complete? Do you test against Netscape 4 & 7; Opera 6 & 7 and if so, how do you grade them for your products?
February 15, 2006 at 6:06 am
Cool lib :) nice working with it. Have some trouble to get events triggered in Firefox. Like startDrag etc.
dd2 = new YAHOO.util.DD(“dragwindow3″);
dd2.setXConstraint(1000, 1000, 25);
dd2.setYConstraint(1000, 1000, 25);
dd2.setHandleElId(“handle3″);
dd2.onDrag = function(e) { alert(); };
Above example works on IE but not with Mozilla…
February 15, 2006 at 6:23 am
This is a great move for the development community. I’d like to see the following come out soon:
- The code used to encrypt passwords to MD5 on the client before sending it.
- The code used in My Yahoo! for the tabs that has the dropdowns with shortcuts (i.e. Mail tab has Check Mail, Compose, etc.)
Thanks again. This will be a great resource.
– Matt Smith –
MyHomePoint – Powering the Modern Family
SwoofWare – It’s only work if somebody makes you do it
February 15, 2006 at 6:41 am
There’s a SRC dir. and a BUILD directory.
What is this about a build file? I don’t see one, but it’s mentioned in the readme.
Do I create my own build file? Why would I use a build file for .js files?
February 15, 2006 at 9:41 am
I’m really excited to see these widgets and really appreciate that Yahoo! released them under the BSD license.
One thing I’m curious to see is how accepted these widgets become among the accessibility community. I work in education, so everything that I offer publicly needs to be equally accessible to all people.
February 15, 2006 at 10:05 am
Bas — The best forum for your question about specific DD code is ydn-javascript, the Yahoo! JavaScript Developer Group. If you post your code there and a link to the page where you’re having trouble, you’ll have a few hundred subscribers have chance to check out your query and see if they have a good solution for you. Look forward to seeing you there! -Eric
February 16, 2006 at 8:38 pm
Nice to see Yahoo joining Open source community by launching user interface library for free, which is really going to help web developers make their web 2.0 site.
In todays market there are lot of other opensource libraries that offer the same stuff but what impressed is REAL GOOD DOCUMENTATION which always lags with others. Keep up the good work. Looking forward to future releases.
Cheers,
Shishank
http://www.pcmspace.com
February 17, 2006 at 9:46 pm
Is there a depository or link page to find developers/projects that incorporate these tools?
We want to see what people will do with these tools.
February 18, 2006 at 11:07 am
The “components” link is going to the “UI controls” area, but it should go to the top of the components area. A lot of people are never even seeing the awesome core utilities because of this. They think you guys just made a slider and a calendar widget! That’s a big shame :)
February 20, 2006 at 3:16 am
There is a bug in the ‘Event.js’ file, used in many of the examples that prevents the library from working correctly with Opera: When you identify as Opera, everything’s a-ok, but when identifying as MSIE, as Opera has done as default for years, the script mistakenly serves IE-specific workarounds.
A patch can be found at http://test.virtuelvis.com/YahooUI/Event.patch
February 20, 2006 at 8:41 pm
Thank you for releasing Yahoo UI javascript library to the public. That’s a great effort. I’ve had a look at some examples and have a question. Lets take TreeView example page. I think the modern approach to create trees is using nested lists, not tables. When using tables, the more nodes the tree has, the longer it takes to load. I think nested lists would be more efficient.
Also, looking at the View Source got me worried. I could see multiple signs of non-compliance to the web standards. For example, links have href=”javascript:void(…)”, inline styles, event handlers are assigned in html, not via DOM, non-semantic use of elements (in this case h3), etc (see snippet below).
I heard Yahoo developers are commited to the web standards? Would be nice to see it in practice.
Thank you, Irina.
February 27, 2006 at 10:50 pm
Hey guys, just as a heads up, the very first link of this blog post is invalid. you’re pointing to developer.yahoo.com/yui and it should be developer.yahoo.net/yui
February 28, 2006 at 4:02 am
Dustin: Good catch, I just fixed it. Thanks.
March 3, 2006 at 9:12 am
Hello everyone.
I’m trying to integrate YUI into a PHP application. I need to combine Javascript with PHP database API like ezpdo.
Does anyone know if there are similar examples that I can follow?
Thanks a lot.
March 6, 2006 at 11:56 pm
What tools did you use to publish your documentation? I very much like the intuitive layout and was wondering if you used a standard tool like RoboHelp or if it was mostly done manually.
March 21, 2006 at 10:06 am
Sviluppare Ajax con l’aiuto di Yahoo!…
…
April 26, 2006 at 8:17 am
Very great library!!!
September 14, 2006 at 10:21 am
[...] Both these libraries together provide help to build Web 2.0 websites for users craving for richer functionalities, but still complying with the accessibility and web standards. You can find more information about them on the Yahoo! UI blog, especially the posts Yahoo! UI Library and Yahoo! Design Patterns Library. You can also subscribe to the Yahoo! Developer Network mailing list for further involvement. [...]
February 23, 2007 at 9:09 am
[...] It’s been a great week in terms of YUI offerings. Here’s another nice offer: “Coinciding with this week’s release of YUI version 2.2.0, the one year anniversary of the YUI open-source release, and as announced at the YUI Party just moments ago, we’re opening up free YUI hosting from the Yahoo! network to all YUI implementers. If you’re using YUI for your own project, we’ll serve the files for you — gzipped, with good cache-control, using our state-of-the-art network, for free. You can count on these files being continuously available because they’re the same files, served by the same source, that we use for most YUI implementations at Yahoo!. [...]
May 14, 2007 at 9:01 pm
[...] with this week’s release of YUI version 2.2.0, the one year anniversary of the YUI open-source release, and as announced at the YUI Party just moments ago, we’re opening up free YUI hosting from [...]