1

Y! v. Y! v. Y! Three Yahoo! Case Studies

Across the Page—Application Spectrum, One Size Does Not Fit All

Nate Koechley – nate@koechley.com | http://nate.koechley.com/blog AJAXWorld Conference & Expo, October 2nd – 4th, 2006

2

Nate Koechley

3

It’s Pronounced “Kek’lee”

4

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

5

The DHTML Universeby Dojo’s Alex Russell (work in progress)

http://alex.dojotoolkit.org/DHTML_universe.pdf

6

12345678

7

12345678

8

12345678

9

12345678

10

12345678

11

12345678

12

12345678

13

12345678

14

A Great Community at Yahoo!

15

Praise Them, Blame Me

16

You?

17

OK then, a quick history:

18

1994

A bit of evolution over the years…

19

1994

1995

A bit of evolution over the years…

20

1994

1995

1997

A bit of evolution over the years…

21

1994

1995

1997

2000

A bit of evolution over the years…

22

1994

1995

1997

2000

2002

A bit of evolution over the years…

23

1994

1995

1997

2000

2002

2004

A bit of evolution over the years…

24

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

25

The New Yahoo! Home Page

Video: http://nate.koechley.com/talks/20061003_ajaxworld/fp_2.avi

26

It is immensely telling that the new Yahoo! homepage

is a DHTML homepage.

27

“Getting It Right The Second Time”

28

Three Case Studies

29

Case Study 1:

• History

– From scratch

– Freshest development effort to be released

• Massive Scale

– 5.2 billion views per month

– 188 million unique users

• Major DHMTL and Ajax Implementation

30

Case Study 1:

Yahoo! Home Page Preview

Video: http://nate.koechley.com/talks/20061003_ajaxworld/fp_2.avi

31

Case Study 2:

• History

– From scratch

– Long development timeline

• Massive Scale

– 30 million unique users

– 2 billion photos

• Major DHTML and Ajax Implementation

32

Case Study 2:

Yahoo! Photos Beta

Video: http://nate.koechley.com/talks/20061003_ajaxworld/photos3_2.avi

33

Case Study 3:

• History– Beta release about 1.25 years 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

34

Case Study 3:

Yahoo! Mail Beta

Video: http://nate.koechley.com/talks/20061003_ajaxworld/mail_1.avi

35

do not worry – not a product pitch

36

Common Goals:

37

Common Goals:

1) Performance (x3)

38

Common Goals:

1) Performance 2) Interactivity

39

Common Goals:

1) Performance 2) Interactivity3) Stay true to our beliefs

40

Common Approaches:

41

The Basics

NoNoNoAbsolute Pos

YesYesYesCompression

YesNoNoObfuscation

YesYesYesMinimization

YesYesYesKeyboard

NoYesYesFont-size Responsive

YesYesYesCSS Sprites

QuirksStrictStrictRender Mode

NoneXHTML 1.0 Strict

HTML 4.01 Strict

Doctype

42

From Documents to Applications

43

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

• Active

ApplicationApplicationPagePage

44

Page—Application Spectrum

ApplicationApplicationPagePage

45

Looking Across the Spectrum

1. Tracking Events

2. Memory Management

3. Delivering JS and CSS

4. Data Format

5. Pagination

6. Browser Support

46

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

47

From Page-Granular to Event-Granular Interfaces

48

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…

49

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

50

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

51

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!

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

53

Tracking Events:Event Delegation

Obj Obj Obj Obj

Obj Obj Obj Obj

Obj Obj Obj Obj

54

Tracking Events:Event Delegation

Obj Obj Obj Obj

Obj Obj Obj Obj

Obj Obj Obj Obj

Event

55

More on “Delegation”

Addressing Object Count1. 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.

56

Event Delegation Example:

• Mousedown in vicinity of thumbnail

– If on <img>

• If MouseMove

–Assign Drag and Drop

– If on whitespace

• If MouseMove

–Assign Selection Rectangle

57

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 <img> clicked, via event.target/srcElement etc.

58

Tracking Events:Event Delegation

Obj Obj Obj Obj

Obj Obj Obj Obj

Obj Obj Obj Obj

Event

59

Tracking Events:Details

ApplicationApplicationPagePage

•Few Objects with Simple Handlers

•Event Attachment

•Many Objects w/ Multiple Handlers

•Event Delegation

•Many Objects w/ Multiple Handlers

•Event Delegation

60

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

61

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

62

Memory Management:General Best Practices

For each constructor have a destructor

1. Create Objects

2. Unhook

3. Remove Handlers

4. Remove References

63

Memory Management:Three Approaches

1. Destruction (general best practice)

2. Conservation (niche)

3. Recycling (niche)

64

Memory Management:Details

ApplicationApplicationPagePage

•Conservation

•Destruction

•Destruction, but…

•Recycle iframes (about:blank)

65

Memory Management Tip:

• Measure and Test

– Drip is a great tool

– Test extreme object counts

– Test long interactions

– Test extensive navigation

66

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

67

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 </body> as possible.

68

Delivering JS and CSS:Three Other Approaches

1) Many small files at once

– Enables atomic/team development

– Enables partial caching if parts change

69

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

70

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 browser’s default home page.

71

Delivering CSS and JS:Details

ApplicationApplicationPagePage

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

72

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

73

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

74

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.

75

Data Format:Details

ApplicationApplicationPagePage

“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

76

Looking Across the Spectrum:Pagination

1. Tracking Events

2. Memory Management

3. Delivering JS and CSS

4. Data Format

5. Pagination

6. Browser Support

77

“Ajax is awesome!! Hmmm, I know: we can do

pagination without refreshing the page!!

Sweet, we’re so totally Web 2.0 now!!”

78

could != should

79

Pagination:Details

ApplicationApplicationPagePage

•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)

80

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

81

Which browser to support?

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

83

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!

84

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%)

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

86

A bit about browser stats…

87

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

88

Browser as Development Environment?

89

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.

90

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

91

Browser Support:Details

ApplicationApplicationPagePage

•GBS A-grade

•Developed in Gecko

•GBS A-grade

•Developed in Gecko

•IE and FF

•Developed in IE, then built IE-emulation layer.

92

We're in this for the long haul.

93

Quality is OUR job. Be belligerent.

94

Today’s bad decisions will be tomorrow’s constraints

95

Thank you. Questions?

Nate Koechley

– natek@yahoo-inc.com• http://developer.yahoo.com/yui

• http://yuiblog.com

– nate@koechley.com• http://nate.koechley.com/blog

This presentation is available at http://nate.koechley.com/talks/