yahoo! vs. yahoo! three large-scale mainstream dhtml implementations nate koechley...

Download Yahoo! vs. Yahoo! Three Large-Scale Mainstream DHTML Implementations Nate Koechley natek@yahoo-inc.com natek@yahoo-inc.com nate@koechley.com nate@koechley.com

Post on 25-Dec-2015

217 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Slide 1
  • Yahoo! vs. Yahoo! Three Large-Scale Mainstream DHTML Implementations Nate Koechley natek@yahoo-inc.com natek@yahoo-inc.com nate@koechley.com nate@koechley.com yuiblog.com yuiblog.com developer.yahoo.com/yui nate.koechley.com/blog developer.yahoo.com/yui nate.koechley.com/blog
  • Slide 2
  • a short historical story
  • Slide 3
  • 1994
  • Slide 4
  • 1995
  • Slide 5
  • 1994 1995 1997
  • Slide 6
  • 1994 1995 1997 2000
  • Slide 7
  • 1994 1995 1997 2000 2002
  • Slide 8
  • 1994 1995 1997 2000 2002 2004
  • Slide 9
  • 1994 1995 1997 2000 2002 2004 2005 Source: Comscore, Feb. 2006
  • Slide 10
  • 1994 1995 1997 2000 2002 2004 2005 2007 188mm users /month 5.2billion hits /month Source: Comscore, Feb. 2006
  • Slide 11
  • Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avihttp://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avi
  • Slide 12
  • so what?
  • Slide 13
  • It is immensely telling that the new Yahoo! homepage is a DHTML and Ajax homepage.
  • Slide 14
  • why?
  • Slide 15
  • because of these facts?
  • Slide 16
  • Its noteworthy because: 1.Browser are the most hostile software engineering environment possible (Douglas Crockford)
  • Slide 17
  • Its noteworthy because: 1.Browser are the most hostile software engineering environment possible (Douglas Crockford) 2.Massive edge-cases and unknowns
  • Slide 18
  • Its noteworthy because: 1.Browser are the most hostile software engineering environment possible (Douglas Crockford) 2.Massive edge-cases and unknowns 3.From content distribution to true software development
  • Slide 19
  • Its noteworthy because: 1.Browser are the most hostile software engineering environment possible (Douglas Crockford) 2.Massive edge-cases and unknowns 3.From content distribution to true software development 4.From Implementation Models to Mental Models
  • Slide 20
  • from implementation model to mental model
  • Slide 21
  • Every application must have an inherent amount of irreducible complexity. The only question is who will have to deal with it. ----Larry Teslers Law of Conservation of Complexity
  • Slide 22
  • Which is better? a) 100 milliseconds? b) 27 years?
  • Slide 23
  • Slide 24
  • getting it right the second time --matt sweeney
  • Slide 25
  • Three Case Studies
  • Slide 26
  • From Scratch Massive Scale 5.2 billion views/month 188 million unique users/month DHMTL/Ajax Implementation (all data from comScore)
  • Slide 27
  • Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avihttp://nate.koechley.com/talks/2007/web-design-world/y-vs-y/fp_4.avi
  • Slide 28
  • From Scratch With legacy constraints Massive Scale 50 million unique users Open content platform Major DHTML/Ajax Implementation
  • Slide 29
  • Video: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/photos3_2.avihttp://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/photos3_2.avi Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/my_1.avihttp://nate.koechley.com/talks/2007/web-design-world/y-vs-y/my_1.avi
  • Slide 30
  • Legacy For IE via Oddpost in 1999 Massive Scale Worlds largest email provider ~ 275MM Available in 21+ languages Preeminent DHTML/Ajax Application
  • Slide 31
  • Video: http://nate.koechley.com/talks/2007/web-design-world/y-vs-y/mail_3.avihttp://nate.koechley.com/talks/2007/web-design-world/y-vs-y/mail_3.avi
  • Slide 32
  • Common Goals (Technical) 1.Interactivity
  • Slide 33
  • 1) Interactivity Simple Efficient Powerful Rich Familiar Delightful
  • Slide 34
  • Its not about what you can do, but how quickly -- Steve Carlson, Lead Web Developer, My Yahoo!
  • Slide 35
  • Common Goals (Technical) 1.Interactivity 2.Performance
  • Slide 36
  • Law 3: Savings in time feel like simplicity. -- John Maeda The Laws of Simplicity, MIT Press
  • Slide 37
  • 2) Performance Time til paint Time til onLoad Speed over the wire Speed of development Resource footprint
  • Slide 38
  • Common Goals (Technical) 1.Interactivity 2.Performance 3.Soundness
  • Slide 39
  • 3) Soundness True to our beliefs Stable and foundational Maintainable Testable, tunable
  • Slide 40
  • Some Common Approaches Yes Compression YesNo Obfuscation Yes Minimization Yes Keyboard NoYes Font-size Responsive Yes CSS Sprites QuirksStrict Render Mode NoneHTML 4.01 Strict Doctype
  • Slide 41
  • to Applications from Documents & Pages
  • Slide 42
  • The PageApplication Spectrum Historically Web Shallow Interaction Simple Idioms Content-Focused Markup + Skin Sequential Passive Historically Desktop Deep Interaction Sophisticated Idioms Process-Focused DOM + Ajax Contained Active
  • Slide 43
  • ApplicationPage
  • Slide 44
  • Looking Across the Spectrum 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support
  • Slide 45
  • Looking Across the Spectrum 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Browser Support
  • Slide 46
  • From: Page-Granular To: Event-Granular
  • Slide 47
  • 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
  • Slide 48
  • 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
  • Slide 49
  • What happens as your app gets more complex?
  • Slide 50
  • more events x more objects
  • Slide 51
  • Feeling lucky?
  • Slide 52
  • Slide 53
  • Tracking Events: The Challenge How can we minimize the number of objects in play? How can we minimize the number of events attached and tracked?
  • Slide 54
  • Example: Standard 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
  • Slide 55
  • Example: Single Delegating Event Obj Event
  • Slide 56
  • Minimize object and event counts: 1.Capture the element high in the DOM tree: document.onclick 2.Then determine which element getTarget() 3.Then add just-in-time logic Example: http://yuiblog.com/sandbox/yui/v0114/examples/event/delegation.php
  • Slide 57
  • Slide 58
  • Tracking Events: Limited objects & simple handlers Attachment Event Delegation Plan Event Model API divorced from UI Many objects & multiple handlers Event Delegation PlanApplicationPage
  • Slide 59
  • Looking Across the Spectrum 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Browser Support
  • Slide 60
  • Memory Management Things can get out of hand. Things will get out of hand. Goals: 1) Dont leak memory 2) Keep overall footprint minimal 3) Always-responsive, stable interface
  • Slide 61
  • The Key Approach 1.DOM Destruction Thoroughly Unhook and Remove Handlers and References YUI Event provides lots for free
  • Slide 62
  • Two Approaches 1.DOM Preservation 2.DOM Recycling
  • Slide 63
  • Memory Management Tip (1) Monitor Usage Drip is a great tool on PC MSDN: Understanding and Solving Internet Explorer Leak PatternsUnderstanding and Solving Internet Explorer Leak Patterns http://outofhanwell.com/ieleak/index.php?t itle=Main_Pagehttp://outofhanwell.com/ieleak/index.php?t itle=Main_Page
  • Slide 64
  • Memory Management Tip (2) Monitor Various Usage Cases 1. Extreme object counts 2. Long interactions 3. Extensive navigation
  • Slide 65
  • Memory Management Preservation (based on use case) Destruction Destruction, but also... Recycling (of iframes)ApplicationPage
  • Slide 66
  • Looking Across the Spectrum 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Browser Support
  • Slide 67
  • General Best Practice: Single large file is fastest Minimize HTTP requests http://yuiblog.com/blog/2006/11/28/p erformance-research-part-1/http://yuiblog.com/blog/2006/11/28/p erformance-research-part-1/ CSS near top JS near
  • Slide 68
  • Another Approach (1) Many small files at once Enables team development atomic testing partial caching A build process can clean up and concatenate for production
  • Slide 69
  • Another App

Recommended

View more >