1 / 108

Yahoo! vs. Yahoo!: Case Studies

Web Builder 2.0 Las Vegas. Yahoo! vs. Yahoo!: Case Studies. Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo! Inc. Slides http://nate.koechley.com/talks/2006/12/webbuilder/ Contact http://yuiblog.com

zuwena
Download Presentation

Yahoo! vs. Yahoo!: Case Studies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Builder 2.0 Las Vegas Yahoo! vs. Yahoo!: Case Studies Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo! Inc. Slides http://nate.koechley.com/talks/2006/12/webbuilder/ Contact http://yuiblog.com natek@yahoo-inc.com http://developer.yahoo.com/yui

  2. My Perspective • Charter member of Web Development team at Yahoo! • In the trenches and in management • Currently: • Yahoo! User Interface (YUI) Library team • Senior Front-End Engineer, Technical Evangelist, Design Liaison, YUIBlog Editor • Responsible for Yahoo! Browser Support specs • Strategy and Direction

  3. YUI: The Yahoo! User Interface Library

  4. YUI: The Yahoo! User Interface Library

  5. YUI: The Yahoo! User Interface Library

  6. YUI: The Yahoo! User Interface Library

  7. YUI: The Yahoo! User Interface Library

  8. YUI: The Yahoo! User Interface Library

  9. The DHTML Universeby Dojo’s Alex Russell (work in progress) http://alex.dojotoolkit.org/DHTML_universe.pdf

  10. 12345678

  11. 12345678

  12. 12345678

  13. 12345678

  14. 12345678

  15. 12345678

  16. 12345678

  17. 12345678

  18. A Great Community at Yahoo! (praise them – blame me)

  19. A quick history:

  20. A bit of evolution over the years… 1994

  21. A bit of evolution over the years… 1994 1995

  22. A bit of evolution over the years… 1994 1995 1997

  23. A bit of evolution over the years… 1994 1995 1997 2000

  24. A bit of evolution over the years… 1994 1995 1997 2000 2002

  25. A bit of evolution over the years… 1994 1995 1997 2000 2002 2004

  26. A bit of evolution over the years… 1994 1995 1997 2000 2002 2004 Today per month: 188m users 5.2 billion hits Source: Comscore, Feb. 2006

  27. Video: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/fp_2.avi

  28. It is immensely telling that the new Yahoo! homepage is a DHTML and Ajax homepage.

  29. Why is this noteworthy? • “Content delivery” to “software development” • Browser as application platform is “the most hostile environment possible” • Massive edge-case populations

  30. “Getting It Right The Second Time” (matt sweeney)

  31. Three Case Studies

  32. Case Study #1www.yahoo.com • History • From scratch • Massive Scale • 5.2 billion views / month • 188 million unique users / month • DHMTL and Ajax Implementation (all data from comScore)

  33. Video: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/fp_2.avi

  34. Case Study #2photos.yahoo.com • History • From scratch • Agile design and development project • Massive Scale • 30 million unique users • 2 billion photos • Major DHTML and Ajax Implementation

  35. Case Study 2:Yahoo! Photos Beta Video: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/photos3_2.avi

  36. Case Study #3mail.yahoo.com • History • Beta release about 1.5 years ago • Legacy-ish! (was Oddpost.com since 1999) • Massive Scale • World’s largest email provider ~257MM • Available in 21 languages • Preeminent DHTML and Ajax Application

  37. Video: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/mail_1.avi

  38. (Don’t worry – not a product pitch)

  39. Common Goals:

  40. Common Goals:1) Performance

  41. Performance: time-to-paint time-to-onLoad speed on the wire speed of development memory & CPU footprint

  42. Common Goals:1) Performance 2) Interactivity

  43. Common Goals:1) Performance 2) Interactivity3) Make Good Choices

  44. Doctype HTML 4.01 Strict XHTML 1.0 Strict None Render Mode Strict Strict Quirks CSS Sprites Yes Yes Yes Font-size Responsive Yes Yes No Keyboard Yes Yes Yes Absolute Pos No No No Minimization Yes Yes Yes Obfuscation No No Yes Compression Yes Yes Yes Common Approaches

  45. from Documents & Pages to Applications

  46. Historically Web Shallow Interaction Simple Idioms Reading Markup + Skin Sequential Passive Historically Desktop Deep Interaction Sophisticated Idioms Doing DOM + Ajax Contained Active The Page—Application Spectrum

  47. Page Application

  48. Looking Across the Spectrum • Tracking Events • Memory Management • Delivering JS and CSS • Data Format • Pagination • Browser Support

More Related