1 / 99

Yahoo! vs. Yahoo! Three Large-Scale Mainstream DHTML Implementations

Yahoo! vs. Yahoo! Three Large-Scale Mainstream DHTML Implementations. Nate Koechley natek@yahoo-inc.com • nate@koechley.com yuiblog.com • developer.yahoo.com/yui • nate.koechley.com/blog. a short historical story…. 1994. 1994 1995. 1994 1995 1997. 1994 1995 1997 2000. 1994

aggie
Download Presentation

Yahoo! vs. Yahoo! Three Large-Scale Mainstream DHTML Implementations

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. Yahoo! vs. Yahoo! Three Large-Scale MainstreamDHTML Implementations Nate Koechley natek@yahoo-inc.com • nate@koechley.com yuiblog.com • developer.yahoo.com/yui • nate.koechley.com/blog

  2. a short historical story…

  3. 1994

  4. 1994 1995

  5. 1994 1995 1997

  6. 1994 1995 1997 2000

  7. 1994 1995 1997 2000 2002

  8. 1994 1995 1997 2000 2002 2004

  9. 1994 1995 1997 2000 2002 2004 2005 Source: Comscore, Feb. 2006

  10. 1994 1995 1997 2000 2002 2004 2005 2007 188mm users /month 5.2billion hits /month Source: Comscore, Feb. 2006

  11. Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avi

  12. so what?

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

  14. why?

  15. because of these facts?

  16. It’s noteworthy because: • “Browser are the most hostile software engineering environment possible” (Douglas Crockford)

  17. It’s noteworthy because: • “Browser are the most hostile software engineering environment possible” (Douglas Crockford) • Massive edge-cases and unknowns

  18. It’s noteworthy because: • “Browser are the most hostile software engineering environment possible” (Douglas Crockford) • Massive edge-cases and unknowns • From content distribution to true software development

  19. It’s noteworthy because: • “Browser are the most hostile software engineering environment possible” (Douglas Crockford) • Massive edge-cases and unknowns • From content distribution to true software development • From Implementation Models to Mental Models

  20. from implementation model to mental model

  21. “Every application must have an inherent amount of irreducible complexity. The only question is who will have to deal with it.” ----Larry Tesler’s Law of Conservation of Complexity

  22. Which is better? a) 100 milliseconds? b) 27 ½ years?

  23. “getting it right the second time” --matt sweeney

  24. Three Case Studies

  25. From Scratch • Massive Scale • 5.2 billion views/month • 188 million unique users/month • DHMTL/Ajax Implementation (all data from comScore)

  26. Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avi

  27. From Scratch • With legacy constraints • Massive Scale • 50 million unique users • Open content platform • Major DHTML/Ajax Implementation

  28. Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/my_1.avi Video: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/photos3_2.avi

  29. Legacy • For IE via Oddpost in 1999 • Massive Scale • World’s largest email provider ~ 275MM • Available in 21+ languages • Preeminent DHTML/Ajax Application

  30. Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/mail_3.avi

  31. Common Goals (Technical) • Interactivity

  32. 1) Interactivity • Simple • Efficient • Powerful • Rich • Familiar • Delightful

  33. “It’s not about what you can do, but how quickly” -- Steve Carlson, Lead Web Developer, My Yahoo!

  34. Common Goals (Technical) • Interactivity • Performance

  35. “Law 3: Savings in time feel like simplicity.” -- John Maeda The Laws of Simplicity, MIT Press

  36. 2) Performance • Time ‘til paint • Time ‘til onLoad • Speed over the wire • Speed of development • Resource footprint

  37. Common Goals (Technical) • Interactivity • Performance • Soundness

  38. 3) Soundness • True to our beliefs • Stable and foundational • Maintainable • Testable, tunable

  39. Some Common Approaches Doctype HTML 4.01 Strict HTML 4.01 Strict None Render Mode Strict Strict Quirks CSS Sprites Yes Yes Yes Font-size Responsive Yes Yes No Keyboard Yes Yes Yes Minimization Yes Yes Yes Obfuscation No No Yes Compression Yes Yes Yes

  40. from Documents & Pages to Applications

  41. Historically Web Shallow Interaction Simple Idioms Content-Focused Markup + Skin Sequential Passive Historically Desktop Deep Interaction Sophisticated Idioms Process-Focused DOM + Ajax Contained Active The Page—Application Spectrum

  42. Page Application

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

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

  45. From: Page-Granular To: Event-Granular

  46. Use an Event Utility: • No JS in markup attribute space • Many great utilities • Dojo • YUI Event Utility • many more… • Watch out for memory leaks, really

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

  48. What happens as your app gets more complex?

  49. more events x more objects

More Related