1. 1 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.comnate@koechley.com | http://nate.koechley.com/bloghttp://nate.koechley.com/blog

2. 2 Y! v. Y! v. Y! Three 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.comnate@koechley.com | http://nate.koechley.com/bloghttp://nate.koechley.com/blog

3. 3 Nate Koechley

4. 4 It’s Pronounced “Kek’lee”

5. 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. 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. 7 The DHTML Universe by Dojo’s Alex Russell (work in progress) http://alex.dojotoolkit.org/ DHTML_universe.pdf

8. 8 1 2345678

9. 9

10. 10 12 3 45678

11. 11 123 4 5678

12. 12 1234 5 678

13. 13 12345 6 78

14. 14 123456 7 8

15. 15 1234567 8

16. 16 A Great Community at Yahoo!

17. 17 Praise Them, Blame Me

18. 18 You?

19. 19 OK then, a quick history:

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

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

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

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

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

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

26. 26 1994 1995 1997 2000 2002 2004 …into the page that today welcomes 188m users every month, 5.2 billion times A bit of evolution over the years… Source: Comscore, Feb. 2006

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

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

29. 29 “Getting It Right The Second Time”

30. 30 Three Case Studies

31. 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. 32 Case Study 1: Yahoo! Home Page Preview Video: http://nate.koechley.com/talks/20060616_atmedia/fp_2.avihttp://nate.koechley.com/talks/20060616_atmedia/fp_2.avi

33. 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. 34 Case Study 2: Yahoo! Photos Beta Video: http://nate.koechley.com/talks/20060616_atmedia/photos3_2.avihttp://nate.koechley.com/talks/20060616_atmedia/photos3_2.avi

35. 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. 36 Case Study 3: Yahoo! Mail Beta Video: http://nate.koechley.com/talks/20060616_atmedia/mail_1.avihttp://nate.koechley.com/talks/20060616_atmedia/mail_1.avi

37. 37 do not worry – not a product pitch

38. 38 Common Goals:

39. 39 Common Goals: 1) Performance (x3)

40. 40 Common Goals: 1) Performance 2) Interactivity

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

42. 42 Common Approaches:

43. 43 The Basics No Absolute Pos Yes Compression YesNo Obfuscation Yes Minimization Yes Keyboard NoYes Font-size Responsive Yes CSS Sprites QuirksStrict Render Mode NoneXHTML 1.0 Strict HTML 4.01 Strict Doctype

44. 44 From Documents to Applications

45. 45 Page—Application Spectrum 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 ActiveApplicationPage

46. 46 Page—Application SpectrumApplicationPage

47. 47 Looking Across the Spectrum 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

48. 48 Looking Across the Spectrum: Tracking Events 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

49. 49 From Page-Granular to Event-Granular Interfaces

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

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

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

53. 53 Tracking Events: Lots and lots Objects can have many events: –Multiple keyboard listeners –Down+drag –Down+key –Down+doubleclick –Down+click+key –More… Multiple by countless number of objects!

54. 54 Tracking Events: Event Delegation Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts

55. 55 Tracking Events: Event Delegation Obj

56. 56 Tracking Events: Event Delegation Obj Event

57. 57 More on “Delegation” Addressing Object Count 1.Listen to document.onmousedown (native) 2.Note which event.target (native) Addressing Handler Count 3.Then delegate and attach the handlers you need, just in time.

58. 58 Event Delegation Example: Mousedown in vicinity of thumbnail –If on If MouseMove –Assign Drag and Drop –If on whitespace If MouseMove –Assign Selection Rectangle

59. 59 Event Delegation Example: Is the click on a photo thumbnail? If so, delegate to its related Javascript controller object eg: photoItems[this.index].mousedown(); Where "this" is the thumbnail clicked, via event.target/srcElement etc.

60. 60 Tracking Events: Event Delegation Obj Event

61. 61 Tracking Events: DetailsApplicationPage Few Objects with Simple Handlers Event Attachment Many Objects w/ Multiple Handlers Event Delegation Many Objects w/ Multiple Handlers Event Delegation

62. 62 Looking Across the Spectrum: Memory Management 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

63. 63 Memory Management With extensive DOM and JS work, there’s the potential for things to get out of hand. Goals: –Don’t leak memory Also, keep overall memory footprint small –Offer a quickly-responsive interface –Stability

64. 64 Memory Management: General Best Practices For each constructor have a destructor 1.Create Objects 2.Unhook 3.Remove Handlers 4.Remove References

65. 65 Memory Management: Three Approaches 1.Destruction (general best practice) 2.Conservation (niche) 3.Recycling (niche)

66. 66 Memory Management: DetailsApplicationPage Conservation Destruction Destruction, but… Recycle iframes (about:blank)

67. 67 Memory Management Tip: Measure and Test –Drip is a great tool –Test extreme object counts –Test long interactions –Test extensive navigation

68. 68 Looking Across the Spectrum: Delivering JS and CSS 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

69. 69 Delivering JS and CSS: General Best Practices A single large file loads fastest. –HTTP requests are the nemesis of a well- tuned site. –Build process is, therefore, very important. CSS files as close to the top as possible. JS files as close to as possible.

70. 70 Delivering JS and CSS: Three Other Approaches 1) Many small files at once –Enables atomic/team development –Enables partial caching if parts change

71. 71 Delivering JS and CSS: Three Other Approaches 2) Many small files on demand –Some demanded functionality may be subtly slower –Allows tuning in response to use cases and task analysis

72. 72 Delivering JS and CSS: Three Other Approaches 3) Inline in the –Caching is not as effective as we imagine, especially on pages set as browser home pages

73. 73 Delivering CSS and JS: DetailsApplicationPage Many smaller files, on demand. Some inline. Every feature not used every time. Content is key. Uber file of interface JS/CSS. Pay once. Objects/data on demand Single File (anti-example) Functionality is key. Highly interconnected.

74. 74 Looking Across the Spectrum: Data Format 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

75. 75 Data Format: General Best Practice Use JSON for data interchange –Natively understood –“The fat-free alternative to XML” http://www.json.org –Tools in every known programming language

76. 76 Data Format: Other Approaches Somebody is going to have to pay the CPU price to render the View –Faster to pass a string that expresses a DOM state directly than trying to parse and create on the fly. –Consider client and server in tandem when making architectural choices Parsing XML degrades performance greater- than-linearly as XML size increases.

77. 77 Data Format: DetailsApplicationPage “JSON rocks” “We want to move to JSON” “We’re using some JSON, and will be much more soon” Recognize strengths of client and server

78. 78 Looking Across the Spectrum: Pagination 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

79. 79 “Ajax is awesome!! Hmmm, I know: we can do pagination without refreshing the page!! Sweet, we’re so totally Web 2.0 now!!”

80. 80 Could does not equal should.

81. 81 Pagination: DetailsApplicationPage Single page, so basically not applicable. Some Ajax pagination in Personal Assistant module Heavy Objects Ajax Pagination; No refresh but new collection. Light Objects Endless-scrolling (and clever caching)

82. 82 Looking Across the Spectrum: Browser Support 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support

83. 83 Which browser to support?

84. 84 http://developer.yahoo.com/yui/articles/gbs/gbs.html

85. 85 Graded Browser Support: Two Key Ideas 1) Support does not mean “the same” “Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.” 2) Support must not be binary!

86. 86 Graded Browser Support: General Best Practice 3 Grades of Browser Support C-grade support (core support, 2%) A-grade support (advanced support, 97%) X-grade support (the X-Factor, 1%)

87. 87 http://developer.yahoo.com/yui/articles/gbs/gbs.html

88. 88 A bit about browser stats…

89. 89 A bit about browser stats… More 5.0 than 5.5; –We consider 5.0 C-Grade Note by-country skews Note by-content skews IE7 already moved the needle –Historically, SP2 rollout out very quickly

90. 90 Browser as Development Environment?

91. 91 Browser Support: Summary Still a huge pain in the ass. –The Web is the most hostile software engineering environment imaginable. (Douglas Crockford) Same answer for everybody. – Develop to standards, then patch. Maintain discipline in the face of heterogeneity.

92. 92 The price is always higher to say “no” to Safari and Opera

93. 93 Browser Support: DetailsApplicationPage GBS A-grade Developed in Gecko GBS A-grade Developed in Gecko IE and FF Developed in IE, then built IE-emulation layer.

94. 94 We're in this for the long haul.

95. 95 Quality is OUR job. Be belligerent.

96. 96 Today’s bad decisions will be tomorrow’s constraints

97. 97 Thank you. Questions? Nate Koechley –natek@yahoo-inc.comnatek@yahoo-inc.com http://developer.yahoo.com/yui http://yuiblog.com –nate@koechley.comnate@koechley.com http://nate.koechley.com/blog This presentation is available at http://nate.koechley.com/talks/20060616_atmedia/atmedia2006.ppt http://nate.koechley.com/talks/20060616_atmedia/atmedia2006.pdf http://nate.koechley.com/talks/20060616_atmedia/atmedia2006.ppt http://nate.koechley.com/talks/20060616_atmedia/atmedia2006.pdf