1 / 97

Y! v. Y! Yahoo! Case Studies Across the Page—App Spectrum, One Size Does Not Fit All

Y! v. Y! Yahoo! Case Studies Across the Page—App Spectrum, One Size Does Not Fit All. Nate Koechley – @Media 2006, London – June 16 th , 2006 nate@koechley.com | http://nate.koechley.com/blog.

skyler
Download Presentation

Y! v. Y! Yahoo! Case Studies Across the Page—App Spectrum, One Size Does Not Fit All

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. Y! v. Y!Yahoo! Case StudiesAcross the Page—App Spectrum, One Size Does Not Fit All Nate Koechley – @Media 2006, London – June 16th, 2006 nate@koechley.com | http://nate.koechley.com/blog

  2. Y! v. Y! v. Y!Three Yahoo! Case StudiesAcross the Page—App Spectrum, One Size Does Not Fit All Nate Koechley – @Media 2006, London – June 16th, 2006 nate@koechley.com | http://nate.koechley.com/blog

  3. Nate Koechley

  4. It’s Pronounced “Kek’lee”

  5. Hello, World • Nate Koechley • At Yahoo! since 2001 • Charter member of Web Development team • On Yahoo! User Interface Library (YUI) team • Three roles: • Senior Frontend Engineer • Technical Evangelist • Design Liaison

  6. Yahoo! User Interface Library (uh, thanks Simon) • A la carte • Event ~ 2k • onAvailable • Custom Events / Pub-Sub • DOM ~ 3k • Add/replace Class • Utilities vs. Controls, also CSS • “There’s no shortage of better things to spend time on.”

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

  8. 12345678

  9. 12345678

  10. 12345678

  11. 12345678

  12. 12345678

  13. 12345678

  14. 12345678

  15. 12345678

  16. A Great Community at Yahoo!

  17. Praise Them, Blame Me

  18. You?

  19. OK then, 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 …into the page that today welcomes 188m users every month, 5.2 billion times Source: Comscore, Feb. 2006

  27. The New Yahoo! Home Page Video: http://nate.koechley.com/talks/20060616_atmedia/fp_2.avi

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

  29. “Getting It Right The Second Time”

  30. Three Case Studies

  31. Case Study 1: • History • “Preview” release exactly one month ago today • From scratch • Newest development effort to be released • Massive Scale • 5.2 billion views per month • 188 million unique users • Major DHMTL and Ajax Implementation

  32. Case Study 1:Yahoo! Home Page Preview Video: http://nate.koechley.com/talks/20060616_atmedia/fp_2.avi

  33. Case Study 2: • History • Beta release exactly eight days ago • From scratch • Long development timeline • Massive Scale • 30 million unique users • 2 billion photos • Major DHTML and Ajax Implementation

  34. Case Study 2:Yahoo! Photos Beta Video: http://nate.koechley.com/talks/20060616_atmedia/photos3_2.avi

  35. Case Study 3: • History • Beta release about one year ago • Legacy-ish, was Oddpost.com • Oddpost development began in 1999 • Massive Scale • World’s largest email provider • Available in 21 languages • Preeminent DHTML and Ajax Application

  36. Case Study 3:Yahoo! Mail Beta Video: http://nate.koechley.com/talks/20060616_atmedia/mail_1.avi

  37. do not worry – not a product pitch

  38. Common Goals:

  39. Common Goals:1) Performance (x3)

  40. Common Goals:1) Performance 2) Interactivity

  41. Common Goals:1) Performance 2) Interactivity3) Stay true to our beliefs

  42. Common Approaches:

  43. The Basics Doctype HTML4.01Strict 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

  44. From Documents to Applications

  45. Historically Web Shallow Interaction Simple Idioms For Consumption Markup + Skin Sequential Nav Passive Historically Desktop Deep Interaction Powerful Idioms For Productivity JS, DHTML, Ajax, DOM Self Contained Active Page Application Page—Application Spectrum

  46. Page Application Page—Application Spectrum

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

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

  49. From Page-Granular to Event-Granular Interfaces

  50. Tracking Events:Event Utilities • Don’t piss off the DOM Scripting Task Force • No JS in attribute space / markup! • Watch out for memory leaks!!! (yes, three !’s) • Many great utilities • YUI Event Utility • Dojo • Scott Andrew • many more…

More Related