Wednesday, November 12th, 2008

Yahoo! home page and YUI 3.0

Category: Showcase, Yahoo!

Nicholas C. Zakas has posted about a new Yahoo! home page that uses YUI 3.x. They are currently testing the new home page out, but having it use the latest and greatest dogfood on a web page as trafficked as the Y! home page is a big deal. Save a few bytes here or there and you are talking serious benefits. Anyway, Nicholas talks us through some of the benefits that he saw:

I felt that building on YUI 3 would make implementing our design much easier based on several goals that we had for the framework:

  1. Eliminate global dependencies. We wanted each part of the page to operate separately from all of the others. Each part should have no knowledge of what else is on the page and therefore can’t depend on objects to be globally available. The 2.x library is based on the global YAHOO object, which we would have had to abstract away; the 3.x concept of YUI instances that could be individually manipulated worked perfectly to achieve this goal.
  2. Make it small, make it fast. The Front Page can’t afford to be slow, so we needed to have as little code as possible to get everything up and running. YUI 3 impressed us with its organization into small, atomic units that allowed us to specifically include parts of the library that we wanted while eliminating parts that were unnecessary. Further, one of the goals of YUI 3 was to optimize for runtime execution and make it faster than the 2.x version. Once again, YUI 3’s approach was directly in line with the Front Page’s goals.
  3. Create version independence. From the start, we didn’t want to have dependencies on specific versions of YUI components as this can lead to maintenance issues. What we really wanted was for each part of the page to be able to use whatever version of the components that they wanted. The sandboxing feature of YUI 3 opened up the possibility of having two (or more) YUI instances each loading different versions of various components while not interfering with each other.
  4. Allow code portability. Having worked at Yahoo! for a combined five years, Steve and I knew that anything we put on a Yahoo! property could be a candidate for porting to someplace else. We knew that this possibility meant the code had to stand on its own and not make assumptions about the environment in which it was placed. We thought about the most difficult environment possible: a locked-down browser environment where the JavaScript code has no direct access to the DOM. Since YUI 3 can abstract away the DOM through its Node interface, we had the entrypoint necessary to make this requirement a reality.
  5. Be forward compatible. The project to create a new Front Page is an incredibly long one and we wanted to be as forward-looking as possible. We knew that if we created the framework on YUI 2.x that we’d be hard pressed to get time to upgrade later on. By building on YUI 3 from the start, we eliminated the need for developing an upgrade path later on.

Posted by Dion Almaer at 6:27 am
1 Comment

4 rating from 33 votes

1 Comment »

Comments feed TrackBack URI

I am always amazed how the largest websites need to minimize their code and loading time. They are trying to get rid of every unneeded KB of data or code, while 99% of us users don’t know how much work is done
when we come looking for what to wear or eat this summer :)

Comment by Frosting — May 26, 2009

Leave a comment

You must be logged in to post a comment.