Yahoo vs Yahoo Case Studies Across the DocApp
- Slides: 120
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
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 5
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 8
Yahoo! User Interface (YUI) Library Nate Koechley – natek@yahoo-inc. com 9
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/ DHTML_universe. pdf Nate Koechley – natek@yahoo-inc. com 11
12345678 Nate Koechley – natek@yahoo-inc. com 12
1 2345678 Nate Koechley – natek@yahoo-inc. com 13
12 Nate Koechley – natek@yahoo-inc. com 345678 14
123 Nate Koechley – natek@yahoo-inc. com 45678 15
1234 Nate Koechley – natek@yahoo-inc. com 5678 16
12345 Nate Koechley – natek@yahoo-inc. com 678 17
123456 Nate Koechley – natek@yahoo-inc. com 78 18
1234567 Nate Koechley – natek@yahoo-inc. com 8 19
A Great Community at Yahoo! (praise them – blame me) Nate Koechley – natek@yahoo-inc. com 20
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 1995 Nate Koechley – natek@yahoo-inc. com 23
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 – natek@yahoo-inc. com 25
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 Koechley – natek@yahoo-inc. com 27
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
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 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
“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
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 Nate Koechley – natek@yahoo-inc. com
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 Koechley – natek@yahoo-inc. com 38
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 Koechley – natek@yahoo-inc. com
do not worry – not a product pitch 41
Common Goals: 42
Common Goals: 1) Performance 43
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 3) Stay true to our beliefs (preserve the platform) 46
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
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
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 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
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 +evnts Obj +evnts 55
What about when things get bigger and more complex? 56
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
Feeling Lucky? 59
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 +evnts 61
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 Obj 63
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 Obj 65
//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 & 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 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 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 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 Koechley – natek@yahoo-inc. com 71
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 • 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: 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 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. – 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 – 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 – 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 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. • 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 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 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 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 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
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
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 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 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. – Douglas Crockford Nate Koechley – natek@yahoo-inc. com 91
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 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 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
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 98
http: //developer. yahoo. com/yui/articles/gbs_browser-chart. html 99
A bit about browser stats… 100
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
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 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 (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
A bit about browser stats… 107
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 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
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 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 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. com 115
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
Bad decisions are tomorrow’s constraints. 118
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 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
- Best case worst case average case
- Paradigm shift from women studies to gender studies
- E procurement case studies
- Exercise #1 – evaluate case studies answer key
- Social engineering case studies
- Times 100 business case studies
- Abo antisera
- Bubblehep
- Blowfly girl deer pictures
- Eu-gdpr-p
- Jmp case studies
- Types of case studies
- Case studies
- Holistic technology in human values
- Chemistry ethics case studies
- Geography paper 1 case studies aqa
- Food safety errors: case studies
- The times 100 business case studies
- Advantages of case studies in psychology
- Case studies of rtos
- Case study definition
- Case studies financial management
- Example of outbreak
- Nspe ethics
- Case studies of euthanasia
- Growth hacking case studies
- Ref impact case studies
- Ferpa case studies
- Times 100 business case studies
- Nasa system failure case studies
- Kellogg's crunchy nut bites market research
- Digital marketing case studies 2012
- Site:slidetodoc.com
- Organ donation case studies
- Chúa sống lại
- Khi nào hổ con có thể sống độc lập
- Diễn thế sinh thái là
- Vẽ hình chiếu vuông góc của vật thể sau
- Công thức tính thế năng
- Làm thế nào để 102-1=99
- Tỉ lệ cơ thể trẻ em
- Lời thề hippocrates
- đại từ thay thế
- Vẽ hình chiếu đứng bằng cạnh của vật thể
- Quá trình desamine hóa có thể tạo ra
- Môn thể thao bắt đầu bằng chữ f
- Thế nào là mạng điện lắp đặt kiểu nổi
- Hình ảnh bộ gõ cơ thể búng tay
- Sự nuôi và dạy con của hươu
- Dạng đột biến một nhiễm là
- Biện pháp chống mỏi cơ
- Phản ứng thế ankan
- Gấu đi như thế nào
- Thiếu nhi thế giới liên hoan
- Vẽ hình chiếu vuông góc của vật thể sau
- điện thế nghỉ
- Một số thể thơ truyền thống
- Trời xanh đây là của chúng ta thể thơ
- Thế nào là hệ số cao nhất
- Sơ đồ cơ thể người
- Slidetodoc
- Bảng số nguyên tố lớn hơn 1000
- đặc điểm cơ thể của người tối cổ
- Các châu lục và đại dương trên thế giới
- Tư thế worm breton là gì
- ưu thế lai là gì
- Tư thế ngồi viết
- Cái miệng bé xinh thế chỉ nói điều hay thôi
- Cách giải mật thư tọa độ
- Các châu lục và đại dương trên thế giới
- Từ ngữ thể hiện lòng nhân hậu
- Bổ thể
- Tư thế ngồi viết
- Thẻ vin
- Giọng cùng tên là
- Thể thơ truyền thống
- Bubble sort best case and worst case
- Glennan building cwru
- Bubble sort best case and worst case
- Bubble sort algorithm pseudocode
- Ambiguous case example
- Short case vs long case
- It project failure case study
- Linear search average performance
- 33 56 65 üçgeni
- Importance of marketing channel
- His terrors touchy dynamite
- Leadership across culture
- Wave could hear murmurs across universe
- Energy stored in a capacitor
- Potential difference of inductor
- Ashwin didwania
- The trees danced back and forth in the wind
- It is a headline presented in two or more lines
- Read across
- As you push a cereal box across a tabletop
- A man pushing a mop across a floor
- Genetic effects on gene expression across human tissues
- Obstructionist stance
- Trans across
- Stable prediction across unknown environments
- Voltage across inductor
- Trickle across theory fashion
- Communicating across cultures - ppt
- European union definition ap human geography
- Management practices across firms and countries
- European partitioning across africa
- Sailing home across the ocean
- Personification definition and examples
- A computer system that stores organizes retrieves
- Aegean sea troy
- Mark made when surfaces slide across one another:
- How to find a mixed number
- Teaching across age levels
- The car danced across the icy road
- Nuclear charge trend
- Numeracy across the curriculum audit
- Aristotle galileo and newton ideas about motion
- High context vs low context culture ppt
- Trickle across theory fashion diagram
- Journey across the lifespan