1 Yahoo! vs. Yahoo! Yahoo! Case Studies Across the DocApp Spectrum Nate Koechley:The Ajax Experience , Boston Nate Koechley 2 Its Pronounced Keklee Nate Koechley 3 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 Nate Koechley 4 The DHTML Universe by Dojos Alex Russell (work in progress)DHTML_universe.pdf Nate Koechley Nate Koechley Nate Koechley Nate Koechley Nate Koechley Nate Koechley Nate Koechley Nate Koechley Nate Koechley 13 A Great Community at Yahoo! (praise them blame me) 14 OK then, a quick history: Nate Koechley A bit of evolution over the years Nate Koechley A bit of evolution over the years Nate Koechley A bit of evolution over the years Nate Koechley A bit of evolution over the years Nate Koechley A bit of evolution over the years Nate Koechley A bit of evolution over the years Nate Koechley Today per month: 188m users 5.2 billion hits A bit of evolution over the years Source: Comscore, Feb. 2006 Nate Koechley 22 Video: Nate Koechley 23 It is immensely telling that the new Yahoo! homepage is a DHTML and Ajax homepage. Nate Koechley 24 Why Didnt We Use DHTML? Nate Koechley 25 Why Do We Use DHTML Now? Nate Koechley 26 Nate Koechley 27 Getting It Right The Second Time (matt sweeney) Nate Koechley 28 Three Case Studies Nate Koechley 29 Case Study 1: History From scratch Massive Scale 5.2 billion views / month 188 million unique users / month DHMTL and Ajax Implementation (all data from comScore) Nate Koechley 30 Case Study 1: Yahoo! Home Page Preview Video: Nate Koechley 31 Case Study 2: History From scratch Agile design and development project Massive Scale 30 million unique users 2 billion photos Major DHTML and Ajax Implementation Nate Koechley 32 Case Study 2: Yahoo! Photos Beta Video: Nate Koechley 33 Case Study 3: History Beta release about 1.25 years ago Legacy code! (was Oddpost.com since 1999) Massive Scale Worlds largestprovider ~257MM Available in 21 languages Preeminent DHTML and Ajax Application Nate Koechley 34 Case Study 3: Yahoo! Mail Beta Video: 35 do not worry not a product pitch 36 Common Goals: 37 Common Goals: 1) Performance (three types) 38 Common Goals: 1) Performance 2) Interactivity 39 Common Goals: 1) Performance 2) Interactivity 3) Stay true to our beliefs Nate Koechley 40 Common Approaches 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 41 From Documents to Applications Nate Koechley 42 PageApplication Spectrum Historically Web Shallow Interaction Simple Idioms Reading Markup + Skin Sequential Passive Historically Desktop Deep Interaction Sophisticated Idioms Doing JS, DHTML, Ajax, DOM Contained ActiveApplicationPage Nate Koechley 43 PageApplication SpectrumApplicationPage Nate Koechley 44 Looking Across the Spectrum 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support Nate Koechley 45 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 46 From Page-Granular to Event-Granular Interfaces Nate Koechley 47 Tracking Events: 1) Use Event Utilities No JS in markup attribute space Watch out for memory leaks!!! (yes, three !s) Many great utilities YUI Event Utility Dojo Scott Andrew many more Nate Koechley 48 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 49 Feeling Lucky? Nate Koechley 50 Tracking Events: Lots and lots Many objects Many event handlers: Multiple keyboard listeners, down + drag, down + key, down + doubleclick, plus more and more Custom Events. (Events * Objects) = lots and lots Nate Koechley 51 Tracking Events: The Challenge How can we minimize the number of relevant objects? How can we minimize the number of events? Nate Koechley 52 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 Nate Koechley 53 Tracking Events: Event Delegation Obj Nate Koechley 54 Tracking Events: Event Delegation Obj Event Nate Koechley 55 More on Delegation Minimize Object and Event Count by: 1.Only listen to native document.onmousedown 2.Then determine which event.target (native) 3.Just-in-time handler attachment Nate Koechley 56 Tracking Events: Event Delegation Obj Event Nate Koechley 57 Tracking Events: DetailsApplicationPage Limited objects & simple handlers Attachment Many objects & multiple handlers Delegation Many objects & multiple handlers Delegation Nate Koechley 58 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 Nate Koechley 59 Memory Management With extensive DOM and JS work, theres the potential for things to get out of hand. Goals: Dont leak memory Small overall memory footprint Responsive interface Stable interface Nate Koechley 60 Memory Management: General Best Practice For each constructor have a destructor 1.Create Objects 2.Unhook 3.Remove Handlers 4.Remove References Nate Koechley 61 Memory Management: Three Approaches 1.Destruction (generally the best practice) Photos, Mail 2.Conservation (edge case) Home Page 3.Recycling (edge case) Mail Nate Koechley 62 Memory Management: DetailsApplicationPage Conservation (based on use case) Destruction Destruction, but also... Recycling (of iframes) Nate Koechley 63 Memory Management Tip: Measure and Test Drip is a great tool What to test? Extreme object counts Long interactions Extensive navigation Nate Koechley 64 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 Nate Koechley 65 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 near top JS near Nate Koechley 66 Delivering JS and CSS: Three Other Approaches 1) Many small files at once Enables atomic/team development Enables partial caching while other parts change (build process can clean up and cat) Nate Koechley 67 Delivering JS and CSS: Three Other Approaches 2) Many small files on demand Pro: Allows tuning in response to use cases and task analysis Con: Some demanded functionality may be subtly slower (bait and switch) Nate Koechley 68 Delivering JS and CSS: Three Other Approaches 3) Inline in the Caching is not as effective as we imagine, especially on pages set as browsers default home page. Nate Koechley 69 Delivering CSS and JS: DetailsApplicationPage Many smaller files, on demand. Some inline. Every feature not used every time. Content is key. ber files of interface JS/CSS. Pay once. Then, data and objects on demand Single file (bad example) Functionality is key. Highly interconnected. Nate Koechley 70 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 Nate Koechley 71 Data Format: General Best Practice Use JSON for data interchange The fat-free alternative to XML Natively understood. eval()-ableTools in every known programming language Nate Koechley 72 Data Format: Other Approaches Somebody is going to have to pay the CPU price to render the View Its faster to pass DOM states as strings directly than to parse and create on the fly. Consider client and server in tandem when making architectural choices Finding: Parsing XML degrades performance greater-than-linearly as XML size increases. Nate Koechley 73 Data Format: DetailsApplicationPage JSON rocks We want to move to JSON Were using some JSON, and will be much more soon Recognize strengths of client and server 74 Disclaimer: JSON is great, but an intimate understanding of your application is best. Nate Koechley 75 Looking Across the Spectrum: Pagination 1.Tracking Events 2.Memory Management 3.Delivering JS and CSS 4.Data Format 5.Pagination 6.Browser Support 76 could != should Nate Koechley 77 Pagination: Pagination vs. Endless ScrollingApplicationPage N/A (single page) Some Ajax pagination in Personal Assistant module Heavy objects Pagination with Ajax (new group in memory) Light objects Endless-scrolling (and clever caching) Nate Koechley 78 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 79 Which browser to support? Nate Koechley 80 Nate Koechley 81 Graded Browser Support: Two Key Ideas 1) support != 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! Nate Koechley 82 Graded Browser Support: General Best Practice 3 Grades of Browser Support C-grade support (core support, 2%) A-grade support (advanced support, 96%) X-grade support (the X-Factor, 2%) 83 84 A bit about browser stats Nate Koechley 85 A bit about browser stats More 5.0 than 5.5; We consider 5.0 C-Grade Note country skews Note content-type skews IE7 already moved the needle Historically, SP2 rollout out very quickly 86 Browser as Development Environment? Nate Koechley 87 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. 88 The price is always higher to say no to Safari and Opera Nate Koechley 89 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. 90 Bad decisions are tomorrows constraints. 91 Bad decisions are tomorrows constraints. Good decisions are tomorrows opportunities. Nate Koechley 92 Thank you. Questions? Nate Koechley Photo Credits: http://www.flickr.com/photos/jacqueline-w/ /http://www.flickr.com/photos/jacqueline-w/ / http://www.flickr.com/photos/grimreaperwithalawnmower/ /http://www.flickr.com/photos/grimreaperwithalawnmower/ / http://www.flickr.com/photos/jasonmichael/ /http://www.flickr.com/photos/jasonmichael/ /