Yahoo! Frontend Building Blocks

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

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

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/

Focus remains the same
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

Where we are – Web 2.0
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

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

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

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

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/

YUI Dom utility
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

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

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

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

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/

Thank you

Yahoo! Frontend Building Blocks

by Subramanyan Guhan on Feb 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Yahoo! Frontend Building Blocks — Presentation Transcript