Frontend Building Blocks Developing for Web 2.0 Subramanyan Murali Yahoo! Inc Great Indian Developer Summit - 21 May 2008

Vision of the web Web was conceived to solve the problem of information access over the network of various machines

Web was conceived to solve the problem of information access over the network of various machines

Focus of Web 1.0 Tim Berners-Lee introduces HTML as “ marked-up text to represent a hypertext document for transmission over the network ” (1992) Emphasis on platform independence Browsers were mere document readers

Tim Berners-Lee introduces HTML as “ marked-up text to represent a hypertext document for transmission over the network ” (1992)

Emphasis on platform independence

Browsers were mere document readers

Yahoo! 1996

Moving forward “… HTML 4 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. HTML 4 also takes great strides towards the internationalization of documents, with the goal of making the Web truly World Wide ” – 1999 HTML 4.0 recommendation abstract http://www.w3.org/TR/html401/

“… HTML 4 supports more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. HTML 4 also takes great strides towards the internationalization of documents, with the goal of making the Web truly World Wide ”

– 1999 HTML 4.0 recommendation abstract

http://www.w3.org/TR/html401/

Focus remains the same Still a medium to share and transport content across a network HTML Markup Cross platform

Still a medium to share and transport content across a network

HTML Markup

Cross platform

Yahoo! 2006

Where we are – Web 2.0 Content sharing Richer browsing experience Smaller divide between browser and desktop Open APIs Mixing code base

Content sharing

Richer browsing experience

Smaller divide between browser and desktop

Open APIs

Mixing code base

Where we are – Web 2.0 Layered Semantic Markup Progressive Enhancement Encapsulation

Layered Semantic Markup

Progressive Enhancement

Encapsulation

Semantic Markup “ Semantics (‘ semantikos’ from Greek) refers to aspects of meaning, as expressed in language or other systems of signs ” Markup based on meaning Avoid presentation in markup Core functionality not in Javascript

“ Semantics (‘ semantikos’ from Greek) refers to aspects of meaning, as expressed in language or other systems of signs ”

Markup based on meaning

Avoid presentation in markup

Core functionality not in Javascript

Coming together Data Yahoo! User Interface HTML CSS Javascript Semantics Markup Presentation Behavior Vision Progressive Enhancement

YUI Design Philosophy The Yahoo “ Canonical Vocabulary ” - Based on Alan Cooper's work (1995) (More Info in About Face )

YUI Components YUI Widgets YUI Utilities Auto-complete Button Menu Calendar Container Data-Table Tree-view Rich text editor Tab view Container Tree view Slider Property Specific code Reset CSS Base CSS Fonts CSS Grids CSS YUI CSS Foundation Event DOM Connection Element YAHOO Animation Drag Drop Browser History Data-Source

Why use YUI ? Write a little, do a lot Provide a more elegant, more intuitive (and usually more compact) interaction path for the user Developer focuses on functionality of the application Abstract the underlying browser-specific implementations

Write a little, do a lot

Provide a more elegant, more intuitive (and usually more compact) interaction path for the user

Developer focuses on functionality of the application

Abstract the underlying browser-specific implementations

Why use YUI ? One of the best documented libraries Hosted Environment - on Yahoo! servers Native (JavaScript) implementation unlike some libraries Backed up by a large Community Native (JavaScript) implementation

One of the best documented libraries

Hosted Environment - on Yahoo! servers

Native (JavaScript) implementation unlike some libraries

Backed up by a large Community

Native (JavaScript) implementation

YUI Foundation YUI Grids accommodates IAB's Ad Unit Guidelines for common ad dimensions Centrally manage Complexity Make CSS predictable and dependable Do not re-invent the wheel !DOCTYPE to trigger Standards Mode

YUI Grids accommodates IAB's Ad Unit Guidelines for common ad dimensions

Centrally manage Complexity

Make CSS predictable and dependable

Do not re-invent the wheel

!DOCTYPE to trigger Standards Mode

YUI Foundation Basic Markup - Microformat type approach Semantic Markup <li></li> for tabs, <span></span> for inline button markup, <tr><td> for tabular data Progressively enhanced YUI widgets Widgets from existing markup via JS

Basic Markup - Microformat type approach

Semantic Markup

<li></li> for tabs, <span></span> for inline button markup, <tr><td> for tabular data

Progressively enhanced YUI widgets

Widgets from existing markup via JS

YUI Foundation YAHOO global namespace Lesser memory foot print Memory management and garbage collection Supported on Grade A browsers http://developer.yahoo.com/yui/articles/gbs/

YAHOO global namespace

Lesser memory foot print

Memory management and garbage collection

Supported on Grade A browsers

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

YUI Dom utility Positioning HTML Elements setXY, getXY Getting and Setting Styles getStyle, setStyle Getting the Viewport Size Managing Class Names getElementsByClassName

Positioning HTML Elements

setXY, getXY

Getting and Setting Styles

getStyle, setStyle

Getting the Viewport Size

Managing Class Names

getElementsByClassName

YUI Event Utility Automatic deferral of handler attachment onAvailable lets you define a function that will execute as soon as an element is detected in the DOM Arbitrary object as argument Automatic listener cleanup Custom events – Expose your own interesting moments Automatic Scope Correction

Automatic deferral of handler attachment

onAvailable lets you define a function that will execute as soon as an element is detected in the DOM

Arbitrary object as argument

Automatic listener cleanup

Custom events – Expose your own interesting moments

Automatic Scope Correction

YUI Slider Widget Slider SliderThumb SliderAnim YUI Animation YUI DragDrop YUI Event

Cost

Powered by YUI Large Scale Enterprise Adobe Baidu Google (on iGoogle) Target.com Wall Street Journal yviewr.com thinkature.com Walmart.com Yahoo! Properties My Yahoo Yahoo Finance Yahoo Front Page Yahoo Mail Yahoo News Yahoo Sports

Large Scale Enterprise

Adobe

Baidu

Google (on iGoogle)

Target.com

Wall Street Journal

yviewr.com

thinkature.com

Walmart.com

Yahoo! Properties

My Yahoo

Yahoo Finance

Yahoo Front Page

Yahoo Mail

Yahoo News

Yahoo Sports

Statistics 9,000 registered members on YUI Community Forum 16,214+ subscribers on yuiblog 1.1 billion YUI files are served each week from Yahoo's open hosting The YUI developer website has 200,000 inbound links

9,000 registered members on YUI Community Forum

16,214+ subscribers on yuiblog

1.1 billion YUI files are served each week from Yahoo's open hosting

The YUI developer website has 200,000 inbound links

YUI http://developer.yahoo.com/yui/

http://developer.yahoo.com/yui/

Mash Up tools http://developer.yahoo.com/openid/ http://pipes.yahoo.com/ http://developer.yahoo.com/maps/ http://developer.yahoo.com/rss/ http://developer.yahoo.com/auth/ http://developer.yahoo.com/fireeagle/

http://developer.yahoo.com/openid/

http://pipes.yahoo.com/

http://developer.yahoo.com/maps/

http://developer.yahoo.com/rss/

http://developer.yahoo.com/auth/

http://developer.yahoo.com/fireeagle/

Thank you