Yahoo vs Yahoo

8/7/2019 Yahoo vs Yahoo

http://slidepdf.com/reader/full/yahoo-vs-yahoo 1/110

Nate Koechley ± natek@yahoo-inc.com

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://yuiblog.comnatek@yahoo-inc.com

http://developer.yahoo.com/yui

Web Builder 2.0 Las Vegas

SHIBA SANKAR BEHERA

RAVENSHAW MANAGEMENT CENTRE, CUTTACK

Koechley is pronounced ´Kek·leeµKoechley is pronounced ´Kek·leeµ

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

YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library

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

1123456782345678

1122345678345678

1212334567845678

1231234456785678

1234123455678678

1234512345667878

1234561234567788

1234567123456788

A Great Community at Yahoo!A Great Community at Yahoo!

(praise them ± blame me)

A quick history:A quick history:

A bit of evolution over the years«A bit of evolution over the years«

Today per month:

188m users

5.2 billion hits

Source: Comscore, Feb. 2006

Nate Koechley ± natek@yahoo-inc.comVideo: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/fp_2.av i

It is immensely tellingthat the new Yahoo!homepage is a DHTMLand Ajax homepage.

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

³Getting It Right The

Second

Time´

³Getting It Right The

Second

Time´(matt sweeney)(matt sweeney)

Three Case StudiesThree Case Studies

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)

Nate Koechley ± natek@yahoo-inc.comVideo: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/fp_2.av i

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

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

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

Nate Koechley ± natek@yahoo-inc.comVideo: http://nate.koechley.com/talks/2006/12/webbuilder/Yahoo-vs-Yahoo/mail_1.avi

(Dont worry not a product pitch)(Dont worry not a product pitch)

Nate Koechley ± natek@yahoo-inc.com 42

Common Goals:

1) Performance

Performance:

time-to-paint

time-to-onLoadspeed on the wire

speed of development

memory & CPU footpr int

Common Goals:

1) Performance2) Interactivity

Common Goals:

1) Performance2) Interactivity

3) Make Good Choices

Common ApproachesCommon Approaches

NoNoNoAbsolute Pos

YesYesYesCompression

YesNoNoObfuscation

YesYesYesMinimization

YesYesYesKeyboard

NoYesYesFont-sizeResponsive

YesYesYesCSS Sprites

QuirksStrict StrictRender Mode

NoneXHTML 1.0 Strict HTML 4.01 StrictDoctype

toto ApplicationsApplications

fromfrom DocumentsDocuments

& Pages& Pages

The PageThe Page³ ³Application SpectrumApplication Spectrum

Historically Web Shallow

Interaction

Simple Idioms

Reading

Markup + Skin

Sequential

Passive

Historically Desktop Deep Interaction

Sophisticated

Idioms

DOM + Ajax

Contained

Active

Appl icationAppl icationAppl icationAppl icationPagePagePagePage

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

1. Tracking Events

5. Pagination

6. Browser Support

From:From: PagePage--GranularGranular

To:To: EventEvent--GranularGranular

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)

What happens as your appgets more complex?

Feeling lucky?Feeling lucky?

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?

From Attachment to DelegationFrom Attachment to Delegation

Obj Obj Obj Obj

From Attachment to DelegationFrom Attachment to Delegation

Obj Obj Obj Obj

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

Event DelegationEvent Delegation

Obj Obj Obj Obj

//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>

http://yuiblog.com/sandbox/yui/v0114/examples/event/delegation.php

T ki E tT ki E t

� Limited objects & simple handlers

� Attachment

� Many objects & multiple handlers

� Delegation

� Many objects & multiple handlers

� Delegation

Appl icationAppl icationPagePage

1. Tracking Events

5. Pagination

6. Browser Support

Memory ManagementMemory Management

Things can get out of hand.

Goals:

1) Dont leak memory2) Keep overall footprint minimal3) Always-responsive, stable interface

Destructor for each Constructor Destructor for each Constructor

Thoroughly Unhook andRemove Handlers and

References

Three ApproachesThree Approaches

1. DOM Destruction

2. DOM Conservation

3. DOM Recycling

Memory ManagementMemory Management

� Conservation (based on use case)

� Destruction

� Destruction, but also...

� Recycling (of iframes)

Memory Management Tip:Memory Management Tip:

Measure and Test

Drip is a great tool

Test: Extreme object counts

Long interactions Extensive navigation

1. Tracking Events

5. Pagination

6. Browser Support

General Best PracticeGeneral Best Practice

Single large file is fastest Avoid HTTP requests

CSS near top

JS near </body>

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

2) Many small files on demand

Tuning in response to use case analysis

Overall time faster, individual time slower

(bait and switch)

3) Inline in the <head> Caching doesnt always work.

In particular: browsers home page.

1. Tracking Events

5. Pagination

6. Browser Support

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

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´

Disclaimer:

JSON is great, but an intimate understanding ofyour application is best.

Disclaimer:

JSON is great, but an intimate understanding ofyour application is best.

1. Tracking Events

5. Pagination

6. Browser Support

PaginationPagination

In all cases: Know your DOM.

Know your footprint.

Know your users.

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)

1. Tracking Events

5. Pagination

6. Browser Support

Browsers: The Dirty TruthBrowsers: The Dirty Truth

The Web is the most hostilesoftware engineering

environment imaginable. Douglas Crockford

BiBi B S tB S t

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

GradedGraded Browser SupportBrowser Support

1. Support does not mean Same

Th W b i H t !Th W b i H t !

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.

Th W b i b tTh W b i b t A il bilitA il bilit

The Web is aboutThe Web is about AvailabilityAvailability

A graded approach is inclusive andbrings sanity to QA testing.

Nate Koechley ± natek@yahoo-inc.comhttp://developer.yahoo.com/yui/articles/gbs/gbs.html

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

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

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.

Bad decisions aretomorrows constraints.Bad decisions aretomorrows constraints.

Bad decisions aretomorrows constraints.

Good decisions aretomorrows opportunities.

Bad decisions aretomorrows constraints.

Good decisions aretomorrows opportunities.

Were hiring!(Josie Arguada: jaguada@yahoo-inc.com )

natek@yahoo-inc.com

http://nate.koechley.com/talks

I dont know.I dont know.

natek@yahoo-inc.com

http://nate.koechley.com/talks

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

Single Page vs. Multiple PageSingle Page vs. Multiple Page

Whats the sweet spot?

Yahoo vs Yahoo

Documents

Yahoo Messenger Vulnerabilitymunzer/courses/INCS745/Project/Project1/Yahoo... · Contents Introduction. Overview on Yahoo Messenger Yahoo Messenger Registry Overview on Windows Architecture

Exceptional Performance Evolution at Yahoo! Steve Souders Chief Performance Yahoo! souders@yahoo-inc.com

Spotlight on Search: Yahoo! Gemini vs. Google Enhanced Campaigns

Yahoo! Acquires Inktomi March 19 th, 2003. Yahoo!

Yahoo Evolution

Yahoo Groups Training November Meeting 2003. Yahoo Groups

Analiza Comparativa a Strategiilor de Marketing. Studiu de Caz - Google vs Yahoo

Yahoo & Hadoop

Localization in HCI: Yahoo (US vs. China)

Secure Your Yahoo Mail With Yahoo Support Australia Number

Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

Yahoo vs ClassMethod_battle5_iBeacon

Technical Support for Yahoo Mail, Yahoo Mail Support - PCCare247 Yahoo Support

At Owen O’Malley Yahoo! Grid Team owen@yahoo-inc.com

VAB REPORT: ”ANY GIVEN MINUTE”: SOLVING THE … · 95% overview yahoo! / nfl example comparable metrics by platform / device tv brands vs. ad-tech ad-tech vs. tv content dispelling

Carlos Castillo, chato@yahoo-inc.com Debora Donato, debora@yahoo-inc.com Aristides Gionis, gionis@yahoo-inc.com Vanessa Murdock, vmurdock@yahoo-inc.com

Yahoo! ART FORCE€¦ · Yahoo! ART FORCE . Created Date: 20190710202025Z

Forgot/lost Yahoo mail Password- Yahoo Password Helper

Features. Yahoo! Features My Yahoo! Flickr Delicious Yahoo! Pipes Yahoo! Maps Yahoo! Developer Network (YDN) Yahoo! Finance Yahoo! Mobile Yahoo! Hot

VS-1217 Certified Digital Marketing Professional …€¢ Overview of Google Adwords, Microsoft AdCenter and Yahoo Search Marketing Pay per click overview ... VS-1217 Certified Digital