The New Yahoo! Front Page and YUI 3.0

By YUI TeamNovember 11th, 2008

The new Yahoo! Front Page.

At the beginning of this year, the Yahoo! Front Page team embarked on an ambitious project to completely remake the face of the company. The goal was to make the Front Page into the most important starting point on the web while also showcasing Yahoo!’s commitment to openness. From the engineering team’s perspective, this meant turning the Front Page into a framework upon which Yahoo! and its partners could build new functionality and experiences rapidly.

Thinking of the Front Page as an application framework led us down some very creative paths. On the front end, we quickly came to the conclusion that a JavaScript framework would have to be developed to run the page. Steve Carlson, my colleague and partner-in-crime on Front Page, and I then spent weeks hashing through use cases, developer needs, and design patterns. Instead of starting from scratch, we decided to start with the YUI 2.x-based framework we had used on My Yahoo! and evolve it into a more complete solution. After reviews with various architects and stakeholders, we had a working design that we could implement. The only question left was which library to build the new framework on.

The natural approach for building new JavaScript frameworks at Yahoo! is to start with YUI as a base, and that has typically meant the 2.x version. As an adjunct member of the YUI team, however, I was privy to some information surrounding the development of YUI 3. It turned out that YUI 3 was going to be developed simultaneous to our development of the new Front Page. I sat in on several reviews with YUI 3’s principal architects Adam Moore and Matt Sweeney, talking through some of their plans for the library. Their departure from the approach used for the 1.x and 2.x releases of the library made a lot of sense to me and seemed like a natural fit for what we were doing on the Front Page. Steve and I both 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.

The YUI 3 story was incredibly compelling to us and was clearly inline with all that we had hoped to achieve in developing the new Front Page. Our recommendation wasn’t without controversy, however, as YUI 3 was just beginning development. This meant not only was there very little usable code but there was also no documentation. Further, our developers were already familiar with the 2.x version of the library and not at all with the 3.x version. Both teams knew that the only way to make this process work was full cooperation with each other.

We setup weekly check-ins between the Front Page and YUI teams to track progress, bugs, and determine which features from 2.x to port next. In essence, the new Front Page and YUI 3 were developed hand-in-hand in a mutually beneficial relationship. The YUI team provided regular drops of code completely out of their planned release cycle and the Front Page team, in turn, provided feedback on what was and wasn’t working with developers. There were some growing pains for both teams as that feedback sometimes resulted in interface changes, but ultimately we all knew that this was making both products better.

What began in January 2008 as two separate projects, the new Front Page and YUI 3, has turned into a joint effort to create the best start experience on the web and the best front end library for web developers. With each project informing the other, we’ve seen the new Front Page go into testing and the YUI team publish its first preview release of YUI 3.0 in the past couple of months. Both represent major steps forward in their respective parts of the company and neither would have been possible without the other.

The Front Page team is proud to have the first site running completely on YUI 3; if it works for us and our strict requirements and scale, we think there’s a good chance it will work for you.

Note: The new Yahoo! Front Page is in bucket testing right now and there’s no way to self-select into the bucket test.

33 Comments

  1. Congratulations !!!
    Great Job!

  2. Hey, that’s awesome! Thanks for the info! Great work guys! :)

  3. They need to release this already!! I never liked the older layout… I only stayed on the old page long enough to read the title of the top story and click on mail.

    You know what I think is wrong about the current look? It’s hard to see what is news and what is navigation. They went too “safe” with their color scheme and it became old. Fast.

  4. Nathan Reynolds said:
    November 11, 2008 at 10:58 am

    Note: The new Yahoo! Front Page is in bucket testing right now and there’s no way to self-select into the bucket test.

    Aw. Love the design.

  5. Nice, But might I recomend keeping the user info on the right and the services on the left. Alot of people are going to hate adjusting to that. I personally could care less. Just food for thought.

  6. Thanks for the comments about the new design. Rest assured, we’re keeping track of all of the feedback we’re receiving during testing (which is, of course, the point of testing). If you get into the test, there’s a Feedback link at which you can post all of your thoughts after using the product.

  7. Looks a lot better…but still too cluttered for my taste. A big ad isn’t the first thing I want to see when I open up my browser.

  8. Hi,
    I’m not a developer, just an end user. The main reason I go to Yahoo is to check my email, and now I have one more click to get there than I used to (I have to click on ‘Mailboxes’ and then launch mail from within the view that opens). So from my perspective the new UI has made things more cumbersome without much added benefit. With the old Front Page I could hover over ‘Mail’ and get a similar preview. Anyway, I do appreciate the free email, just thought you might like some end user feedback.

  9. @Richard Hart: If that’s the only reason you go to yahoo’s front page why don’t you just bookmark http://www.ymail.com or the other urls they have for their mail service?

  10. Kevin: Believe it or not, he is a real end user and that is one of the reasons real end users go to Yahoo.

  11. [...] should go over to the YUI blog for the nitty gritty details. From the user’s standpoint, this means that Yahoo’s new [...]

  12. This is nice , I really like the new look!

  13. @Allen I don’t know….I personally believe the user info is easier to find when it’s in the left column. Most people read left to right, so the user info will be the first thing their eyes lock onto to. That area is probably the most important feature of the front page since Yahoo’s webmail service is the most popular among the other services they offer.

  14. Does this mean there’ll be a new drop of YUI 3 soon? I’m doing some development with it as well and if there’s been progress on the API, etc. it would be cool to have the latest version.

  15. [...] that same approach to a portal experience on the web? That’s what Yahoo is doing with its new home page, currently in bucket testing (a random set of users will see the new home page). The idea is to not [...]

  16. How do you get rid of the horoscopes?

  17. [...] is built to be open to developers and users for tweaking. The Yahoo home page is also cleaner. Yahoo’s Nicholas C. Zakas has more detail. The Yahoo front door is being bucket tested, which means you may randomly stumble across it. [...]

  18. Great work Nicholas! I’ve been following the YUI3 group, and I’m really looking forward to the work coming out of everyone’s dedication. Γεια Σου

  19. Why did you delete my post? All I asked was how do you delete the horoscopes? It takes up too much space if it cannot be removed.

  20. Ditto Andrew’s point …

  21. @Andrew and @TravisV — Check out http://tech.groups.yahoo.com/group/yui3/message/206 for the latest update on the YUI 3.0PR2 release. Regards, Eric

  22. Please keep the current page layouts as options for those of who don’t like the change.

  23. This is absolutely beautiful and still manages to be user friendly

  24. I’m glad to see that yahoo front page won’t be like a chrismas tree anymore…

  25. So, you mean you used the existing YUI 3.x which is available to the public and not something which is internal to Yahoo! (not available to public)?

    If yes, that’s awesome.

    We started off with YUI 2.x. We’ve been studying YUI 3.x for quite sometime for our new v2 Refresh of one of our massive application.

    Looks like YUI 3.x is the best candidate now with decoupling of modules the best criteria that we fell in love instantly.

  26. [...] Reinvents the Web Portal: There was a lot of coverage of Nicholas C. Zakas’s YUIBlog piece in which he talked about working with us to make YUI 3 the foundation for the new Yahoo Front Page, [...]

  27. [...] the new Yahoo! Front Page is built on YUI 3.0. This seems to have been a very hot topic after my YUIBlog post, so the YUI team asked if I would go and explain a little more in person. The talks at the Meetup [...]

  28. I had the new Yahoo! front page and loved it. Now, it’s gone. It disappeared just as suddenly as it appeared. What happened?!

  29. This is an example of leadership from the ground level. I know how things work in a big online media firm and there’s nothing as powerful as cross-departmental teamwork (cf. WorldBlu.com). I’m very excited for you guys as, unlike almost all your inventory-based competitors, your front page team respects your engineers enough for them to let them have a say in the technical quality level of the Javascript framework. I’m proud to be using your JS libs and to learn from your front page and SERP source code. I just wish that sort of quality can be found in your YSM & Webmaster tools. Anyway, I wish you guys all the best and may advertisers choose Y! because of your great synergy realised (from within).

  30. One of the reasons YUI will quickly become the leader of all Javascript libraries (if not already with 3.x) is Extensive Testing. Put to rigorous testing by millions of users at a time all around the world, there is no other way to do it and the Yahoo! website is the perfect test/stress-test location. I have read about the impressive new features of YUI 3.x and how it quickly addresses past concerns that were the reason some people used other libraries, I am almost certain that this improvement will create a surge in user base to move onto YUI 3.x because the development team has shown that they listen to the community/user base as well as know what needs to be achieved: Lighter, Easier, Faster. Perhaps beyond 3.x will be Lighter-er, Easier-er, Faster-er, that would be really awesome-r.

  31. [...] should go over to the YUI blog for the nitty gritty details. From the user’s standpoint, this means that Yahoo’s new [...]

  32. I dislike the intrusiveness of the new UI enough that I am selecting a new home page.