1 / 95

Nate Koechley

Y! v. Y! v. Y! Three Yahoo! Case Studies Across the Page—Application Spectrum, One Size Does Not Fit All. Nate Koechley – nate@koechley.com | http://nate.koechley.com/blog AJAXWorld Conference & Expo, October 2 nd – 4 th , 2006. Nate Koechley. It’s Pronounced “Kek’lee”. Hello, World.

ike
Download Presentation

Nate Koechley

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! v. Y!Three Yahoo! Case StudiesAcross the Page—Application Spectrum, One Size Does Not Fit All Nate Koechley – nate@koechley.com | http://nate.koechley.com/blogAJAXWorld Conference & Expo, October 2nd – 4th, 2006

  2. Nate Koechley

  3. It’s Pronounced “Kek’lee”

  4. 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

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

  6. 12345678

  7. 12345678

  8. 12345678

  9. 12345678

  10. 12345678

  11. 12345678

  12. 12345678

  13. 12345678

  14. A Great Community at Yahoo!

  15. Praise Them, Blame Me

  16. You?

  17. OK then, a quick history:

  18. A bit of evolution over the years… 1994

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

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

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

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

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

  24. 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

  25. The New Yahoo! Home Page Video: http://nate.koechley.com/talks/20061003_ajaxworld/fp_2.avi

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

  27. “Getting It Right The Second Time”

  28. Three Case Studies

  29. Case Study 1: • History • From scratch • Freshest development effort to be released • Massive Scale • 5.2 billion views per month • 188 million unique users • Major DHMTL and Ajax Implementation

  30. Case Study 1:Yahoo! Home Page Preview Video: http://nate.koechley.com/talks/20061003_ajaxworld/fp_2.avi

  31. Case Study 2: • History • From scratch • Long development timeline • Massive Scale • 30 million unique users • 2 billion photos • Major DHTML and Ajax Implementation

  32. Case Study 2:Yahoo! Photos Beta Video: http://nate.koechley.com/talks/20061003_ajaxworld/photos3_2.avi

  33. Case Study 3: • History • Beta release about 1.25 years 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

  34. Case Study 3:Yahoo! Mail Beta Video: http://nate.koechley.com/talks/20061003_ajaxworld/mail_1.avi

  35. do not worry – not a product pitch

  36. Common Goals:

  37. Common Goals:1) Performance (x3)

  38. Common Goals:1) Performance 2) Interactivity

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

  40. Common Approaches:

  41. 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

  42. From Documents to Applications

  43. 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

  44. Page Application Page—Application Spectrum

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

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

  47. From Page-Granular to Event-Granular Interfaces

  48. 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…

  49. Tracking Events:Event Attachment Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts

  50. Browsers die when there are too many (objects + listeners)

More Related