Yahoo vs Yahoo Case Studies Across the DocApp

  • Slides: 120
Download presentation
Yahoo! vs. Yahoo! Case Studies Across the Doc—App Spectrum The Ajax Experience 2006. 10.

Yahoo! vs. Yahoo! Case Studies Across the Doc—App Spectrum The Ajax Experience 2006. 10. 24, Boston Nate Koechley: nate@koechley. com http: //nate. koechley. com/blog 1

Koechley’s pronounced “Kek’lee” Nate Koechley – natek@yahoo-inc. com 2

Koechley’s pronounced “Kek’lee” Nate Koechley – natek@yahoo-inc. com 2

My Perspective • Charter member of Web Development team • In the trenches and

My Perspective • Charter member of Web Development team • In the trenches and in management • Currently: – Yahoo! User Interface (YUI) Library team – Senior Front-End Engineer, Technical Evangelist, Design Liaison, YUIBlog Editor – Responsible for Yahoo! Browser Support specs • Role: Strategy and Direction • Broad visibility across company Nate Koechley – natek@yahoo-inc. com 3

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 4

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 4

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 5

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 5

Nate Koechley – natek@yahoo-inc. com 6

Nate Koechley – natek@yahoo-inc. com 6

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 7

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 7

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 8

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 8

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 9

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 9

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 10

Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 10

The DHTML Universe by Dojo’s Alex Russell (work in progress) http: //alex. dojotoolkit. org/

The DHTML Universe by Dojo’s Alex Russell (work in progress) http: //alex. dojotoolkit. org/ DHTML_universe. pdf Nate Koechley – natek@yahoo-inc. com 11

12345678 Nate Koechley – natek@yahoo-inc. com 12

12345678 Nate Koechley – natek@yahoo-inc. com 12

1 2345678 Nate Koechley – natek@yahoo-inc. com 13

1 2345678 Nate Koechley – natek@yahoo-inc. com 13

12 Nate Koechley – natek@yahoo-inc. com 345678 14

12 Nate Koechley – natek@yahoo-inc. com 345678 14

123 Nate Koechley – natek@yahoo-inc. com 45678 15

123 Nate Koechley – natek@yahoo-inc. com 45678 15

1234 Nate Koechley – natek@yahoo-inc. com 5678 16

1234 Nate Koechley – natek@yahoo-inc. com 5678 16

12345 Nate Koechley – natek@yahoo-inc. com 678 17

12345 Nate Koechley – natek@yahoo-inc. com 678 17

123456 Nate Koechley – natek@yahoo-inc. com 78 18

123456 Nate Koechley – natek@yahoo-inc. com 78 18

1234567 Nate Koechley – natek@yahoo-inc. com 8 19

1234567 Nate Koechley – natek@yahoo-inc. com 8 19

A Great Community at Yahoo! (praise them – blame me) Nate Koechley – natek@yahoo-inc.

A Great Community at Yahoo! (praise them – blame me) Nate Koechley – natek@yahoo-inc. com 20

OK then, a quick history: 21

OK then, a quick history: 21

A bit of evolution over the years… 1994 Nate Koechley – natek@yahoo-inc. com 22

A bit of evolution over the years… 1994 Nate Koechley – natek@yahoo-inc. com 22

A bit of evolution over the years… 1994 1995 Nate Koechley – natek@yahoo-inc. com

A bit of evolution over the years… 1994 1995 Nate Koechley – natek@yahoo-inc. com 23

A bit of evolution over the years… 1994 1995 1997 Nate Koechley – natek@yahoo-inc.

A bit of evolution over the years… 1994 1995 1997 Nate Koechley – natek@yahoo-inc. com 24

A bit of evolution over the years… 1994 1995 1997 2000 Nate Koechley –

A bit of evolution over the years… 1994 1995 1997 2000 Nate Koechley – natek@yahoo-inc. com 25

A bit of evolution over the years… 1994 1995 1997 2000 2002 Nate Koechley

A bit of evolution over the years… 1994 1995 1997 2000 2002 Nate Koechley – natek@yahoo-inc. com 26

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

A bit of evolution over the years… 1994 1995 1997 2000 2002 2004 Nate Koechley – natek@yahoo-inc. com 27

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

A bit of evolution over the years… 1994 1995 1997 2000 2002 2004 Today per month: 188 m users Source: Comscore, Feb. 2006 Nate Koechley – natek@yahoo-inc. com 5. 2 billion hits 28

29 Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/fp_2. avi Nate Koechley – natek@yahoo-inc. com

29 Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/fp_2. avi Nate Koechley – natek@yahoo-inc. com

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

It is immensely telling that the new Yahoo! homepage is a DHTML and Ajax homepage. Nate Koechley – natek@yahoo-inc. com 30

Why is this noteworthy? • From “content delivery” to “software development” • Browser as

Why is this noteworthy? • From “content delivery” to “software development” • Browser as application platform is “the most hostile environment possible” • Yet, appropriate for us even considering our massively huge edge-case populations Nate Koechley – natek@yahoo-inc. com 31

Nate Koechley – natek@yahoo-inc. com 32

Nate Koechley – natek@yahoo-inc. com 32

“Getting It Right The Second Time” (matt sweeney) Nate Koechley – natek@yahoo-inc. com 33

“Getting It Right The Second Time” (matt sweeney) Nate Koechley – natek@yahoo-inc. com 33

Three Case Studies Nate Koechley – natek@yahoo-inc. com 34

Three Case Studies Nate Koechley – natek@yahoo-inc. com 34

Case Study 1: • History – From scratch • Massive Scale – 5. 2

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 com. Score) Nate Koechley – natek@yahoo-inc. com 35

Case Study 1: Yahoo! Home Page Preview 36 Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/fp_2. avi

Case Study 1: Yahoo! Home Page Preview 36 Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/fp_2. avi Nate Koechley – natek@yahoo-inc. com

Case Study 2: • History – From scratch – Agile design and development project

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 – natek@yahoo-inc. com 37

Case Study 2: Yahoo! Photos Beta Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/photos 3_2. avi Nate

Case Study 2: Yahoo! Photos Beta Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/photos 3_2. avi Nate Koechley – natek@yahoo-inc. com 38

Case Study 3: • History – Beta release about 1. 25 years ago –

Case Study 3: • History – Beta release about 1. 25 years ago – Legacy-ish! (was Oddpost. com since 1999) • Massive Scale – World’s largest email provider ~257 MM – Available in 21 languages • Preeminent DHTML and Ajax Application Nate Koechley – natek@yahoo-inc. com 39

Case Study 3: Yahoo! Mail Beta 40 Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/mail_1. avi Nate

Case Study 3: Yahoo! Mail Beta 40 Video: http: //nate. koechley. com/talks/2006/10/ajax_experience/Yahoo-vs-Yahoo/mail_1. avi Nate Koechley – natek@yahoo-inc. com

do not worry – not a product pitch 41

do not worry – not a product pitch 41

Common Goals: 42

Common Goals: 42

Common Goals: 1) Performance 43

Common Goals: 1) Performance 43

Performance: time-to-paint time-to-init() speed on the wire speed of development memory & CPU footprint

Performance: time-to-paint time-to-init() speed on the wire speed of development memory & CPU footprint 44

Common Goals: 1) Performance 2) Interactivity 45

Common Goals: 1) Performance 2) Interactivity 45

Common Goals: 1) Performance 2) Interactivity 3) Stay true to our beliefs (preserve the

Common Goals: 1) Performance 2) Interactivity 3) Stay true to our beliefs (preserve the platform) 46

Common Approaches Doctype HTML 4. 01 Strict XHTML 1. 0 Strict None Render Mode

Common Approaches Doctype HTML 4. 01 Strict XHTML 1. 0 Strict None Render Mode Strict Quirks CSS Sprites Yes Yes Font-size Responsive Yes No Keyboard Yes Yes Absolute Pos No No No Minimization Yes Yes Obfuscation No No Yes Compression Yes Yes Nate Koechley – natek@yahoo-inc. com 47

From Documents to Applications 48

From Documents to Applications 48

Page—Application Spectrum Page Application • Historically Web • Historically Desktop • Shallow Interaction •

Page—Application Spectrum Page Application • Historically Web • Historically Desktop • Shallow Interaction • Deep Interaction • Simple Idioms • Sophisticated Idioms • Reading • Doing • Markup + Skin • JS, DHTML, Ajax, DOM • Sequential • Contained • Passive • Active Nate Koechley – natek@yahoo-inc. com 49

Page—Application Spectrum Page Nate Koechley – natek@yahoo-inc. com Application 50

Page—Application Spectrum Page Nate Koechley – natek@yahoo-inc. com Application 50

Looking Across the Spectrum 1. Tracking Events 2. Memory Management 3. Delivering JS and

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 – natek@yahoo-inc. com 51

Looking Across the Spectrum: Tracking Events 1. Tracking Events 2. Memory Management 3. Delivering

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 Nate Koechley – natek@yahoo-inc. com 52

From Page-Granular to Event-Granular Interfaces 53

From Page-Granular to Event-Granular Interfaces 53

Tracking Events: Use Event Utilities… • No JS in markup attribute space • Watch

Tracking Events: Use Event Utilities… • No JS in markup attribute space • Watch out for memory leaks!!! (yes, three !’s) • Many great utilities – Dojo – Scott Andrew – YUI Event Utility – many more… Nate Koechley – natek@yahoo-inc. com 54

Tracking Events: … For Event Attachment Nate Koechley – natek@yahoo-inc. com Obj +evnts Obj

Tracking Events: … For Event Attachment Nate Koechley – natek@yahoo-inc. com Obj +evnts Obj +evnts Obj +evnts 55

What about when things get bigger and more complex? 56

What about when things get bigger and more complex? 56

Tracking Events: Lots and lots • Many objects • Many event handlers: – Multiple

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 – natek@yahoo-inc. com 57

(Events*Objects) 58

(Events*Objects) 58

Feeling Lucky? 59

Feeling Lucky? 59

Tracking Events: The Challenge • How can we minimize the number of objects in

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? Nate Koechley – natek@yahoo-inc. com 60

Tracking Events: Event Delegation Nate Koechley – natek@yahoo-inc. com Obj +evnts Obj +evnts Obj

Tracking Events: Event Delegation Nate Koechley – natek@yahoo-inc. com Obj +evnts Obj +evnts Obj +evnts 61

Tracking Events: Event Delegation Nate Koechley – natek@yahoo-inc. com Obj Obj Obj 62

Tracking Events: Event Delegation Nate Koechley – natek@yahoo-inc. com Obj Obj Obj 62

Tracking Events: Event Delegation Obj Nate Koechley – natek@yahoo-inc. com Obj Event Obj Obj

Tracking Events: Event Delegation Obj Nate Koechley – natek@yahoo-inc. com Obj Event Obj Obj Obj 63

More on “Delegation” Minimize Object and Event Count by: 1. Only listen to native

More on “Delegation” Minimize Object and Event Count by: 1. Only listen to native document. onmousedown (or whatever node makes sense) 2. Then determine which event. target (native) 3. Just-in-time handler attachment Nate Koechley – natek@yahoo-inc. com 64

Tracking Events: Event Delegation Obj Nate Koechley – natek@yahoo-inc. com Obj Event Obj Obj

Tracking Events: Event Delegation Obj Nate Koechley – natek@yahoo-inc. com Obj Event Obj Obj Obj 65

//listen on parent YUI. Event. on('parent', 'click', click. Delegate ); function click. Delegate(e){ //

//listen on parent YUI. Event. on('parent', 'click', click. Delegate ); function click. Delegate(e){ // find the target var origin = YUI. Event. get. Target(e, false); if(YUI. Dom. has. Class(origin, 'child')) alert(origin. inner. HTML + ' was clicked. '); } <div id="parent"> <div class="child">Foo</div> <div class="child">Bar</div> http: //yuiblog. com/sandbox/yui/v 0114/examples/event/delegation. php Nate Koechley – natek@yahoo-inc. com 66

Tracking Events: Details • Limited objects & simple handlers • Attachment • Many objects

Tracking Events: Details • Limited objects & simple handlers • Attachment • Many objects & multiple handlers • Delegation Page Nate Koechley – natek@yahoo-inc. com Application 67

Looking Across the Spectrum: Memory Management 1. Tracking Events 2. Memory Management 3. Delivering

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 – natek@yahoo-inc. com 68

Memory Management • With extensive DOM and JS work, there’s the potential for things

Memory Management • With extensive DOM and JS work, there’s the potential for things to get out of hand. • Goals: – Don’t leak memory – Keep overall footprint minimal – Always-responsive interface – Stability Nate Koechley – natek@yahoo-inc. com 69

Memory Management: General Best Practice For each constructor have a destructor 1. Create Objects

Memory Management: General Best Practice For each constructor have a destructor 1. Create Objects 2. Thoroughly Unhook and Remove Handlers and References Nate Koechley – natek@yahoo-inc. com 70

Memory Management: Three Approaches 1. DOM Destruction 2. DOM Conservation 3. DOM Recycling Nate

Memory Management: Three Approaches 1. DOM Destruction 2. DOM Conservation 3. DOM Recycling Nate Koechley – natek@yahoo-inc. com 71

Memory Management: Details • Conservation (based on use case) • Destruction, but also. .

Memory Management: Details • Conservation (based on use case) • Destruction, but also. . . • Recycling (of iframes) Page Nate Koechley – natek@yahoo-inc. com Application 72

Memory Management Tip: • Measure and Test – Drip is a great tool •

Memory Management Tip: • Measure and Test – Drip is a great tool • Which scenarios to examine? – Extreme object counts – Long interactions – Extensive navigation Nate Koechley – natek@yahoo-inc. com 73

Drip: http: //outofhanwell. com/ieleak/index. php? title=Main_Page • http: //outofhanwell. com/ieleak/index. php? title=Main_Page • MSDN:

Drip: http: //outofhanwell. com/ieleak/index. php? title=Main_Page • http: //outofhanwell. com/ieleak/index. php? title=Main_Page • MSDN: Understanding and Solving Internet Explorer Leak Patterns Nate Koechley – natek@yahoo-inc. com 74

Looking Across the Spectrum: Delivering JS and CSS 1. Tracking Events 2. Memory Management

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 – natek@yahoo-inc. com 75

Delivering JS and CSS: General Best Practices • A single large file loads fastest.

Delivering JS and CSS: General Best Practices • A single large file loads fastest. – HTTP requests are the nemesis of a welltuned site. – Build process is, therefore, very important. • CSS near top • JS near </body> Nate Koechley – natek@yahoo-inc. com 76

Delivering JS and CSS: Three Other Approaches 1) Many small files at once –

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 concat. ) Nate Koechley – natek@yahoo-inc. com 77

Delivering JS and CSS: Three Other Approaches 2) Many small files on demand –

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 – natek@yahoo-inc. com 78

Delivering JS and CSS: Three Other Approaches 3) Inline in the <head> – Caching

Delivering JS and CSS: Three Other Approaches 3) Inline in the <head> – Caching is not as effective as we imagine, especially on pages set as the browser’s default home page. Nate Koechley – natek@yahoo-inc. com 79

Delivering CSS and JS: Details • Many smaller files, on demand. Some inline. •

Delivering CSS and JS: Details • 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 (anti-example) • Functionality is key. Highly interconnected. Page Nate Koechley – natek@yahoo-inc. com Application 80

Looking Across the Spectrum: Data Format 1. Tracking Events 2. Memory Management 3. Delivering

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 – natek@yahoo-inc. com 81

Data Format: General Best Practice • Use JSON for data interchange – “The fat-free

Data Format: General Best Practice • Use JSON for data interchange – “The fat-free alternative to XML” – Natively understood. eval()-able – Ajax not AJAX • http: //www. json. org – Tools in every known programming language Nate Koechley – natek@yahoo-inc. com 82

Data Format: Other Approaches • Somebody is going to have to pay the CPU

Data Format: Other Approaches • Somebody is going to have to pay the CPU price to render the View – It’s 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 – natek@yahoo-inc. com 83

Data Format: Details “JSON rocks” “We want to move to JSON” “We’re using some

Data Format: Details “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” Page Nate Koechley – natek@yahoo-inc. com Application 84

Disclaimer: JSON is great, but an intimate understanding of your application is best. 85

Disclaimer: JSON is great, but an intimate understanding of your application is best. 85

Looking Across the Spectrum: Pagination 1. Tracking Events 2. Memory Management 3. Delivering JS

Looking Across the Spectrum: Pagination 1. Tracking Events 2. Memory Management 3. Delivering JS and CSS 4. Data Format 5. Pagination 6. Browser Support Nate Koechley – natek@yahoo-inc. com 86

could != should 87

could != should 87

Pagination • No matter which approach: – Manage your DOM – Manage your footprint

Pagination • No matter which approach: – Manage your DOM – Manage your footprint Nate Koechley – natek@yahoo-inc. com 88

Pagination: Pagination vs. Endless Scrolling • N/A (single page) • Some Ajax pagination in

Pagination: Pagination vs. Endless Scrolling • 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) Page Nate Koechley – natek@yahoo-inc. com Application 89

Looking Across the Spectrum: Browser Support 1. Tracking Events 2. Memory Management 3. Delivering

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 Nate Koechley – natek@yahoo-inc. com 90

The Dirty Truth • The Web is the most hostile software engineering environment imaginable.

The Dirty Truth • The Web is the most hostile software engineering environment imaginable. – Douglas Crockford Nate Koechley – natek@yahoo-inc. com 91

Binary Browser Support • Does this need to work with ___ browser? Nate Koechley

Binary Browser Support • Does this need to work with ___ browser? Nate Koechley – natek@yahoo-inc. com 92

Graded Browser Support: Two Key Ideas (1) 1) Support != Same Expecting two users

Graded Browser Support: Two Key Ideas (1) 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. Nate Koechley – natek@yahoo-inc. com 93

Graded Browser Support: Two Key Ideas (2) 2) Support must not be binary. Our

Graded Browser Support: Two Key Ideas (2) 2) Support must not be binary. Our primary goal is availability. – Don’t exclude anyone – Welcome all visitors Nate Koechley – natek@yahoo-inc. com 94

http: //developer. yahoo. com/yui/articles/gbs. html Nate Koechley – natek@yahoo-inc. com 95

http: //developer. yahoo. com/yui/articles/gbs. html Nate Koechley – natek@yahoo-inc. com 95

Graded Browser Support: General Best Practice Three Grades of Browser Support C-grade support (core

Graded Browser Support: General Best Practice Three Grades of Browser Support C-grade support (core support, 2%) A-grade support (advanced support, 96%) X-grade support (the X-Factor, 2%) Nate Koechley – natek@yahoo-inc. com 96

Nate Koechley – natek@yahoo-inc. com 97

Nate Koechley – natek@yahoo-inc. com 97

Nate Koechley – natek@yahoo-inc. com 98

Nate Koechley – natek@yahoo-inc. com 98

http: //developer. yahoo. com/yui/articles/gbs_browser-chart. html 99

http: //developer. yahoo. com/yui/articles/gbs_browser-chart. html 99

A bit about browser stats… 100

A bit about browser stats… 100

A bit about browser stats… • More 5. 0 than 5. 5; – We

A bit about browser stats… • More 5. 0 than 5. 5; – We offer C-grade support to both • Note skews – by country – by content type & demographic • IE 7 already moved the needle – Historically, SP 2 rollout very quickly • Firefox 2. 0 – releasing later today Nate Koechley – natek@yahoo-inc. com 101

Which browser to support? 102

Which browser to support? 102

http: //developer. yahoo. com/yui/articles/gbs. html Nate Koechley – natek@yahoo-inc. com 103

http: //developer. yahoo. com/yui/articles/gbs. html Nate Koechley – natek@yahoo-inc. com 103

Graded Browser Support: Two Key Ideas 1) “support” != “same” Expecting two users using

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 – natek@yahoo-inc. com 104

Graded Browser Support: General Best Practice • 3 Grades of Browser Support C-grade support

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%) Nate Koechley – natek@yahoo-inc. com 105

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

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

A bit about browser stats… 107

A bit about browser stats… 107

A bit about browser stats… • More 5. 0 than 5. 5; – We

A bit about browser stats… • More 5. 0 than 5. 5; – We label both 5. 0 & 5. 5 as C-Grade • Note country skews • Note content-type / demographic skews • IE 7 already moved the needle – Historically, SP 2 rollout very quickly Nate Koechley – natek@yahoo-inc. com 108

Browser as Development Environment? 109

Browser as Development Environment? 109

Browser Support: Summary • Still a huge pain in the ass. – The Web

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. Nate Koechley – natek@yahoo-inc. com 110

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

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

Browser Support: Details • GBS A-grade • Developed in Gecko • IE and FF

Browser Support: Details • GBS A-grade • Developed in Gecko • IE and FF • Developed in IE, then built IE-emulation layer. Page Nate Koechley – natek@yahoo-inc. com Application 112

More Topics 1. 2. 3. 4. 5. 6. 7. Namespaces Single vs. Multi Page

More Topics 1. 2. 3. 4. 5. 6. 7. Namespaces Single vs. Multi Page Apps Progressive Rendering Page Weight Lint CSS Reset and foundation Focus, Tab, Selection – don’t replicate what you get for free Nate Koechley – natek@yahoo-inc. com 113

Namespaces • History – JS is load-and-go; text is eval’d; Implied global variables were

Namespaces • History – JS is load-and-go; text is eval’d; Implied global variables were a nicety • Bad because of unreliability and insecurity – Trouble when we mashup, have many devs, and programs get large • Many global variables is bad • Ideally, only a single global per app|lib|widget – An object which contains all others • Speed unaffected; self documentation; reliable • Shorten locally if you want. • http: //yuiblog. com/blog/2006/06/01/global-domination/ Nate Koechley – natek@yahoo-inc. com 114

Single Page vs. Multiple Page • What’s the sweet spot? Nate Koechley – natek@yahoo-inc.

Single Page vs. Multiple Page • What’s the sweet spot? Nate Koechley – natek@yahoo-inc. com 115

Progressive Rendering • Paint a shell? • Wait for data? • Actual rendering time

Progressive Rendering • Paint a shell? • Wait for data? • Actual rendering time never equals perceived rendering time. Nate Koechley – natek@yahoo-inc. com 116

Other topics? 117

Other topics? 117

Bad decisions are tomorrow’s constraints. 118

Bad decisions are tomorrow’s constraints. 118

Bad decisions are tomorrow’s constraints. Good decisions are tomorrow’s opportunities. 119

Bad decisions are tomorrow’s constraints. Good decisions are tomorrow’s opportunities. 119

Thank you. Questions? Nate Koechley – natek@yahoo-inc. com • • http: //developer. yahoo. com/yui

Thank you. Questions? Nate Koechley – natek@yahoo-inc. com • • http: //developer. yahoo. com/yui http: //yuiblog. com http: //nate. koechley. com/blog http: //nate. koechley. com/talks Photo Credits: – http: //www. flickr. com/photos/jacqueline-w/56107224/ – http: //www. flickr. com/photos/grimreaperwithalawnmower/191890428/ – http: //www. flickr. com/photos/jasonmichael/4126695/ Nate Koechley – natek@yahoo-inc. com 120