yahoo vs yahoo
TRANSCRIPT
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 1/110
Nate Koechley ± [email protected]
Yahoo! vs. Yahoo!: Case StudiesYahoo! vs. Yahoo!: Case Studies
NateNate KoechleyKoechleyS
enior Engineer & Designer,Yahoo! User Interface (YUI) Library TeamPlatform Engineering GroupYahoo! Inc.
Slideshttp://nate.koechley.com/talks/2006/12/webbuilder/
Contacthttp://[email protected]
http://developer.yahoo.com/yui
Web Builder 2.0 Las Vegas
SHIBA SANKAR BEHERA
RAVENSHAW MANAGEMENT CENTRE, CUTTACK
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 2/110
Nate Koechley ± [email protected]
Koechley is pronounced ´Kek·leeµKoechley is pronounced ´Kek·leeµ
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 3/110
Nate Koechley ± [email protected]
My PerspectiveMy Perspective
Charter member of Web Development team at Yahoo!
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
Strategy and Direction
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 4/110
Nate Koechley ± [email protected]
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 5/110
Nate Koechley ± [email protected]
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 6/110
Nate Koechley ± [email protected]
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 7/110
Nate Koechley ± [email protected]
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 8/110
Nate Koechley ± [email protected]
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 9/110
Nate Koechley ± [email protected]
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 10/110
Nate Koechley ± [email protected]
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 11/110
Nate Koechley ± [email protected]
The DHTML UniverseThe DHTML Universeby Dojo·s Alex Russell (work in progress)by Dojo·s Alex Russell (work in progress)
http://alex.dojotoolkit.org/
DHTML_universe.pdf
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 12/110
Nate Koechley ± [email protected]
1123456782345678
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 13/110
Nate Koechley ± [email protected]
1122345678345678
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 14/110
Nate Koechley ± [email protected]
1212334567845678
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 15/110
Nate Koechley ± [email protected]
1231234456785678
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 16/110
Nate Koechley ± [email protected]
1234123455678678
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 17/110
Nate Koechley ± [email protected]
1234512345667878
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 18/110
Nate Koechley ± [email protected]
1234561234567788
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 19/110
Nate Koechley ± [email protected]
1234567123456788
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 20/110
Nate Koechley ± [email protected]
A Great Community at Yahoo!A Great Community at Yahoo!
(praise them ± blame me)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 21/110
Nate Koechley ± [email protected]
A quick history:A quick history:
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 22/110
Nate Koechley ± [email protected]
1994
A bit of evolution over the years«A bit of evolution over the years«
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 23/110
Nate Koechley ± [email protected]
1994
1995
A bit of evolution over the years«A bit of evolution over the years«
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 24/110
Nate Koechley ± [email protected]
1994
1995
1997
A bit of evolution over the years«A bit of evolution over the years«
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 25/110
Nate Koechley ± [email protected]
1994
1995
1997
2000
A bit of evolution over the years«A bit of evolution over the years«
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 26/110
Nate Koechley ± [email protected]
1994
1995
1997
2000
2002
A bit of evolution over the years«A bit of evolution over the years«
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 27/110
Nate Koechley ± [email protected]
1994
1995
1997
2000
2002
2004
A bit of evolution over the years«A bit of evolution over the years«
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 28/110
Nate Koechley ± [email protected]
1994
1995
1997
2000
2002
2004
Today per month:
188m users
5.2 billion hits
A bit of evolution over the years«A bit of evolution over the years«
Source: Comscore, Feb. 2006
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 29/110
Nate Koechley ± [email protected]: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/fp_2.av i
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 30/110
Nate Koechley ± [email protected]
It is immensely tellingthat the new Yahoo!homepage is a DHTMLand Ajax homepage.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 31/110
Nate Koechley ± [email protected]
Why is this noteworthy?Why is this noteworthy?
Content delivery to softwaredevelopment
Browser as application platform is themost hostile environment possible
Massive edge-case populations
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 32/110
Nate Koechley ± [email protected]
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 33/110
Nate Koechley ± [email protected]
³Getting It Right The
Second
Time´
³Getting It Right The
Second
Time´(matt sweeney)(matt sweeney)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 34/110
Nate Koechley ± [email protected]
Three Case StudiesThree Case Studies
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 35/110
Nate Koechley ± [email protected]
Case Study #1Case Study #1
www.yahoo.comwww.yahoo.com
HistoryFrom scratch
Massive Scale5.2 billion views / month
188 million unique users / month
DHMTL and Ajax Implementation
(all data from comScore)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 36/110
Nate Koechley ± [email protected]: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/fp_2.av i
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 37/110
Nate Koechley ± [email protected]
Case Study #2Case Study #2
photos.yahoo.comphotos.yahoo.com
HistoryFrom scratch
Agile design and development project Massive Scale
30 million unique users
2 billion photos Major DHTML and Ajax Implementation
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 38/110
Nate Koechley ± [email protected]
Case Study 2:Case Study 2:
Yahoo! Photos BetaYahoo! Photos Beta
Video: http://nate.koechley.com/talks/2006/12/webbu ilder/Yahoo-vs-Yahoo/photos3_2.av i
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 39/110
Nate Koechley ± [email protected]
Case Study #3Case Study #3
mail.yahoo.commail.yahoo.com
HistoryBeta release about 1.5 years ago
Legacy-ish! (was Oddpost.com since 1999) Massive Scale
Worlds largest email provider ~257MM
Available in 21 languages Preeminent DHTML and Ajax
Application
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 40/110
Nate Koechley ± [email protected]: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/mail_1.avi
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 41/110
Nate Koechley ± [email protected]
(Dont worry not a product pitch)(Dont worry not a product pitch)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 42/110
Nate Koechley ± [email protected] 42
Common Goals:
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 43/110
Nate Koechley ± [email protected] 43
Common Goals:
1) Performance
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 44/110
Nate Koechley ± [email protected] 44
Performance:
time-to-paint
time-to-onLoadspeed on the wire
speed of development
memory & CPU footpr int
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 45/110
Nate Koechley ± [email protected] 45
Common Goals:
1) Performance2) Interactivity
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 46/110
Nate Koechley ± [email protected] 46
Common Goals:
1) Performance2) Interactivity
3) Make Good Choices
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 47/110
Nate Koechley ± [email protected]
Common ApproachesCommon Approaches
NoNoNoAbsolute Pos
YesYesYesCompression
YesNoNoObfuscation
YesYesYesMinimization
YesYesYesKeyboard
NoYesYesFont-sizeResponsive
YesYesYesCSS Sprites
QuirksStrict StrictRender Mode
NoneXHTML 1.0 Strict HTML 4.01 StrictDoctype
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 48/110
Nate Koechley ± [email protected]
toto ApplicationsApplications
fromfrom DocumentsDocuments
& Pages& Pages
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 49/110
Nate Koechley ± [email protected]
The PageThe Page³ ³Application SpectrumApplication Spectrum
Historically Web Shallow
Interaction
Simple Idioms
Reading
Markup + Skin
Sequential
Passive
Historically Desktop Deep Interaction
Sophisticated
Idioms
Doing
DOM + Ajax
Contained
Active
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 50/110
Nate Koechley ± [email protected]
Appl icationAppl icationAppl icationAppl icationPagePagePagePage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 51/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 52/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 53/110
Nate Koechley ± [email protected]
From:From: PagePage--GranularGranular
To:To: EventEvent--GranularGranular
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 54/110
Nate Koechley ± [email protected]
Use an Event Utility:Use an Event Utility:
No JS in markup attribute space
Many great utilitiesDojo
YUI Event Utility
many more
Watch out for memory leaks!!! (yes, three !s)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 55/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 56/110
Nate Koechley ± [email protected]
What happens as your appgets more complex?
What happens as your appgets more complex?
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 57/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 58/110
Nate Koechley ± [email protected]
Feeling lucky?Feeling lucky?
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 59/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 60/110
Nate Koechley ± [email protected]
Tracking Events:Tracking Events:
The ChallengeThe Challenge
How can we minimize the number of objects inplay?
How can we minimize the number of eventsattached and tracked?
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 61/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 62/110
Nate Koechley ± [email protected]
From Attachment to DelegationFrom Attachment to Delegation
Obj Obj Obj Obj
Obj Obj Obj Obj
Obj Obj Obj Obj
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 63/110
Nate Koechley ± [email protected]
From Attachment to DelegationFrom Attachment to Delegation
Obj Obj Obj Obj
Obj Obj Obj Obj
Obj Obj Obj Obj
Event
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 64/110
Nate Koechley ± [email protected]
More on ´Delegationµ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
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 65/110
Nate Koechley ± [email protected]
Tracking Events:Tracking Events:
Event DelegationEvent Delegation
Obj Obj Obj Obj
Obj Obj Obj Obj
Obj Obj Obj Obj
Event
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 66/110
Nate Koechley ± [email protected]
//listen on parent
YUI.Event.on('parent', 'click', clickDelegate );
function clickDelegate(e){
// get the target
var origin = YUI.Event.getTarget(e, false);
// delegate ³just in time´
if(YUI.Dom.hasClass(origin, 'child'))alert(origin.innerHTML + ' was clicked.');
}
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
</div>
http://yuiblog.com/sandbox/yui/v0114/examples/event/delegation.php
T ki E tT ki E t
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 67/110
Nate Koechley ± [email protected]
Tracking Events:Tracking Events:
� Limited objects & simple handlers
� Attachment
� Many objects & multiple handlers
� Delegation
� Many objects & multiple handlers
� Delegation
Appl icationAppl icationPagePage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 68/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 69/110
Nate Koechley ± [email protected]
Memory ManagementMemory Management
Things can get out of hand.
Goals:
1) Dont leak memory2) Keep overall footprint minimal3) Always-responsive, stable interface
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 70/110
Nate Koechley ± [email protected]
Destructor for each Constructor Destructor for each Constructor
Thoroughly Unhook andRemove Handlers and
References
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 71/110
Nate Koechley ± [email protected]
Three ApproachesThree Approaches
1. DOM Destruction
2. DOM Conservation
3. DOM Recycling
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 72/110
Nate Koechley ± [email protected]
Memory ManagementMemory Management
� Conservation (based on use case)
� Destruction
� Destruction, but also...
� Recycling (of iframes)
Appl icationAppl icationPagePage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 73/110
Nate Koechley ± [email protected]
Memory Management Tip:Memory Management Tip:
Measure and Test
Drip is a great tool
Test: Extreme object counts
Long interactions Extensive navigation
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 74/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 75/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 76/110
Nate Koechley ± [email protected]
General Best PracticeGeneral Best Practice
Single large file is fastest Avoid HTTP requests
CSS near top
JS near </body>
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 77/110
Nate Koechley ± [email protected]
Other Approaches (1):Other Approaches (1):
1) Many small files at once
Enables atomic/team development
Enables partial caching while other parts
change
(build process can clean up and concat.)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 78/110
Nate Koechley ± [email protected]
Other Approaches (2):Other Approaches (2):
2) Many small files on demand
Tuning in response to use case analysis
Overall time faster, individual time slower
(bait and switch)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 79/110
Nate Koechley ± [email protected]
Other Approaches (3):Other Approaches (3):
3) Inline in the <head> Caching doesnt always work.
In particular: browsers home page.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 80/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 81/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 82/110
Nate Koechley ± [email protected]
General Best PracticeGeneral Best Practice
Use JSON for data interchangeThe fat-free alternative to XML
Natively understood. No parsing or crawling.
Its Ajax not AJAX
http://www.json.orgTools in every known programminglanguage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 83/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 84/110
Nate Koechley ± [email protected]
Data Format:Data Format:
³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´
Appl icationAppl icationPagePage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 85/110
Nate Koechley ± [email protected]
Disclaimer:
JSON is great, but an intimate understanding ofyour application is best.
Disclaimer:
JSON is great, but an intimate understanding ofyour application is best.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 86/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 87/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 88/110
Nate Koechley ± [email protected]
PaginationPagination
In all cases: Know your DOM.
Know your footprint.
Know your users.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 89/110
Nate Koechley ± [email protected]
Pagination vs. Endless Scrolling:Pagination vs. Endless Scrolling:
� N/A (single page)
� Some Ajax pagination
� Heavy objects
� Pagination with Ajax (new group in memory)
� Light objects
� Endless-scrolling (and clever caching)
Appl icationAppl icationPagePage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 90/110
Nate Koechley ± [email protected]
Looking Across the SpectrumLooking Across the Spectrum
1. Tracking Events
2. Memory Management
3. Delivering JS and CSS4. Data Format
5. Pagination
6. Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 91/110
Nate Koechley ± [email protected]
Browsers: The Dirty TruthBrowsers: The Dirty Truth
The Web is the most hostilesoftware engineering
environment imaginable. Douglas Crockford
BiBi B S tB S t
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 92/110
Nate Koechley ± [email protected]
BinaryBinary Browser SupportBrowser Support
Do I need to support Browser XYZon this project?
Same as saying:
Those users arent welcome.
G d dG d d B S tB S t
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 93/110
Nate Koechley ± [email protected]
GradedGraded Browser SupportBrowser Support
1. Support does not mean Same
Th W b i H t !Th W b i H t !
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 94/110
Nate Koechley ± [email protected]
The Web is Heterogeneous!The Web is Heterogeneous!
Expecting two users usingdifferent browser software tohave an identical experience fails
to embrace or acknowledge theheterogeneous essence of theWeb.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 95/110
Th W b i b tTh W b i b t A il bilitA il bilit
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 96/110
Nate Koechley ± [email protected]
The Web is aboutThe Web is about AvailabilityAvailability
A graded approach is inclusive andbrings sanity to QA testing.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 97/110
Nate Koechley ± [email protected]://developer.yahoo.com/yui/articles/gbs/gbs.html
Three Grades of Browser SupportThree Grades of Browser Support
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 98/110
Nate Koechley ± [email protected]
Three Grades of Browser SupportThree Grades of Browser Support
C-grade support (core support, 2%)
A-grade support (advanced support, 96%)
X-grade support (the X-Factor, 2%)
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 99/110
Nate Koechley ± [email protected]
http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 100/110
Nate Koechley ± [email protected]
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 101/110
Nate Koechley ± [email protected]
Browser Support:Browser Support:
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 102/110
Nate Koechley ± [email protected]
Browser Support:Browser Support:
� GBS A-grade
� Developed in Gecko
� GBS A-grade
� Developed in Gecko
� IE and FF
� Developed in IE, then built IE-emulation layer.
Appl icationAppl icationPagePage
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 103/110
Nate Koechley ± [email protected]
Bad decisions aretomorrows constraints.Bad decisions aretomorrows constraints.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 104/110
Nate Koechley ± [email protected]
Bad decisions aretomorrows constraints.
Good decisions aretomorrows opportunities.
Bad decisions aretomorrows constraints.
Good decisions aretomorrows opportunities.
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 105/110
Nate Koechley ± [email protected]
Were hiring!(Josie Arguada: [email protected] )
http://nate.koechley.com/talks
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 106/110
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 107/110
Nate Koechley ± [email protected]
I dont know.I dont know.
http://nate.koechley.com/talks
NamespacesNamespaces
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 108/110
Nate Koechley ± [email protected]
NamespacesNamespaces
History JS is load-and-go; text is evald; 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/
Single Page vs Multiple PageSingle Page vs Multiple Page
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 109/110
Nate Koechley ± [email protected]
Single Page vs. Multiple PageSingle Page vs. Multiple Page
Whats the sweet spot?
8/7/2019 Yahoo vs Yahoo
http://slidepdf.com/reader/full/yahoo-vs-yahoo 110/110