The New Yahoo! Homepage and YUI 3


Published on

A brief talk given at the San Francisco JavaScript Meetup about why the new Yahoo! homepage decided to use YUI 3 instead of YUI 2.

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Over the past couple of years, we've seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there's unit testing for JavaScript, and so much more. One of the areas that I've seen a much slower than adoption that I'd like is in the area of error handling. How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end? Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what's going on, how often it's occurring, or how many people have been affected.
  • The New Yahoo! Homepage and YUI 3

    1. 1. The New Yahoo! Homepage and YUI 3.0 Nicholas C. Zakas Principal Front End Engineer, Yahoo!
    2. 2. 1996
    3. 3. 1997
    4. 4. 1999
    5. 5. 2002
    6. 6. 2004
    7. 7. 2006 YUI 2
    8. 8. Homepage Stats <ul><li>300 million unique users worldwide per month </li></ul><ul><li>100 million unique users in the United States per month </li></ul>
    9. 9. 2008 YUI 3
    10. 10. Goals <ul><li>Eliminate global dependencies </li></ul><ul><li>Make it small, make it fast </li></ul><ul><li>Create version independence </li></ul><ul><li>Allow code portability </li></ul>
    11. 11. Eliminate Global Dependencies <ul><li>YAHOO </li></ul><ul><li>YAHOO.util </li></ul><ul><li>YAHOO.util.Dom </li></ul><ul><li>YAHOO.util.Event </li></ul><ul><li>YAHOO.My </li></ul><ul><li>YAHOO.My.Namespace </li></ul>Dependencies:
    12. 12. Eliminate Global Dependencies
    13. 13. Make It Small, Make It Fast <ul><li>YUI 2.6.0 </li></ul><ul><li>dragdrop.js (24 KB) </li></ul><ul><li>YUI 3.0 PR1 </li></ul><ul><ul><li>dd-ddm-base.js (2 KB) </li></ul></ul><ul><ul><li>dd-ddm.js (1 KB) </li></ul></ul><ul><ul><li>dd-ddm-Drop.js (3 KB) </li></ul></ul><ul><ul><li>dd-drag.js (7 KB) </li></ul></ul><ul><ul><li>dd-drop.js (4 KB) </li></ul></ul><ul><ul><li>dd-proxy.js (2 KB) </li></ul></ul><ul><ul><li>dd-constrain.js (3 KB) </li></ul></ul><ul><ul><li>dd-plugin.js (0.2 KB) </li></ul></ul><ul><ul><li>dd-drop-plugin.js (0.2 KB) </li></ul></ul>
    14. 14. Make It Small, Make It Fast
    15. 15. Create Version Independence
    16. 16. Allow Code Portability
    17. 17. Be Forward Compatible
    18. 18. 3 > 2
    19. 20. Etcetera <ul><li>My blog: </li></ul><ul><li>My email: [email_address] </li></ul><ul><li>Twitter: @slicknet </li></ul><ul><li>YUI 3: </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.