990 likes | 1.14k Views
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
E N D
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
1994 1995
1994 1995 1997
1994 1995 1997 2000
1994 1995 1997 2000 2002
1994 1995 1997 2000 2002 2004
1994 1995 1997 2000 2002 2004 2005 Source: Comscore, Feb. 2006
1994 1995 1997 2000 2002 2004 2005 2007 188mm users /month 5.2billion hits /month Source: Comscore, Feb. 2006
Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avi
It is immensely telling that the new Yahoo! homepage is a DHTML and Ajax homepage.
It’s noteworthy because: • “Browser are the most hostile software engineering environment possible” (Douglas Crockford)
It’s noteworthy because: • “Browser are the most hostile software engineering environment possible” (Douglas Crockford) • Massive edge-cases and unknowns
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
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
from implementation model to mental model
“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
Which is better? a) 100 milliseconds? b) 27 ½ years?
“getting it right the second time” --matt sweeney
From Scratch • Massive Scale • 5.2 billion views/month • 188 million unique users/month • DHMTL/Ajax Implementation (all data from comScore)
Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avi
From Scratch • With legacy constraints • Massive Scale • 50 million unique users • Open content platform • Major DHTML/Ajax Implementation
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
Legacy • For IE via Oddpost in 1999 • Massive Scale • World’s largest email provider ~ 275MM • Available in 21+ languages • Preeminent DHTML/Ajax Application
Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/mail_3.avi
Common Goals (Technical) • Interactivity
1) Interactivity • Simple • Efficient • Powerful • Rich • Familiar • Delightful
“It’s not about what you can do, but how quickly” -- Steve Carlson, Lead Web Developer, My Yahoo!
Common Goals (Technical) • Interactivity • Performance
“Law 3: Savings in time feel like simplicity.” -- John Maeda The Laws of Simplicity, MIT Press
2) Performance • Time ‘til paint • Time ‘til onLoad • Speed over the wire • Speed of development • Resource footprint
Common Goals (Technical) • Interactivity • Performance • Soundness
3) Soundness • True to our beliefs • Stable and foundational • Maintainable • Testable, tunable
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
from Documents & Pages to Applications
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
Page Application
Looking Across the Spectrum • Tracking Events • Memory Management • Delivering JS and CSS • Data Format • Pagination • Browser Support
Looking Across the Spectrum • Tracking Events • Memory Management • Delivering JS and CSS • Data Format • Browser Support
From: Page-Granular To: Event-Granular
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
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
more events x more objects