Yahoo! Frontend Building Blocks

1,530 views
1,422 views

Published on

Talk at The Great Indian Developer Summit 2008
http://www.developersummit.com/2008/speakers.html

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,530
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Yahoo! Frontend Building Blocks

    1. 1. Frontend Building Blocks Developing for Web 2.0 Subramanyan Murali Yahoo! Inc Great Indian Developer Summit - 21 May 2008
    2. 2. Vision of the web <ul><li>Web was conceived to solve the problem of information access over the network of various machines </li></ul>
    3. 3. Focus of Web 1.0 <ul><li>Tim Berners-Lee introduces HTML as “ marked-up text to represent a hypertext document for transmission over the network ” (1992) </li></ul><ul><li>Emphasis on platform independence </li></ul><ul><li>Browsers were mere document readers </li></ul>
    4. 4. Yahoo! 1996
    5. 5. Moving forward <ul><li>“… 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 ” </li></ul><ul><li>– 1999 HTML 4.0 recommendation abstract </li></ul><ul><li>http://www.w3.org/TR/html401/ </li></ul>
    6. 6. Focus remains the same <ul><li>Still a medium to share and transport content across a network </li></ul><ul><li>HTML Markup </li></ul><ul><li>Cross platform </li></ul>
    7. 7. Yahoo! 2006
    8. 8. Where we are – Web 2.0 <ul><li>Content sharing </li></ul><ul><li>Richer browsing experience </li></ul><ul><li>Smaller divide between browser and desktop </li></ul><ul><li>Open APIs </li></ul><ul><li>Mixing code base </li></ul>
    9. 9. Where we are – Web 2.0 <ul><li>Layered Semantic Markup </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>Encapsulation </li></ul>
    10. 10. Semantic Markup <ul><li>“ Semantics (‘ semantikos’ from Greek) refers to aspects of meaning, as expressed in language or other systems of signs ” </li></ul><ul><li>Markup based on meaning </li></ul><ul><li>Avoid presentation in markup </li></ul><ul><li>Core functionality not in Javascript </li></ul>
    11. 11. Coming together Data Yahoo! User Interface HTML CSS Javascript Semantics Markup Presentation Behavior Vision Progressive Enhancement
    12. 12. YUI Design Philosophy The Yahoo “ Canonical Vocabulary ” - Based on Alan Cooper's work (1995) (More Info in About Face )
    13. 13. 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
    14. 14. Why use YUI ? <ul><li>Write a little, do a lot </li></ul><ul><li>Provide a more elegant, more intuitive (and usually more compact) interaction path for the user </li></ul><ul><li>Developer focuses on functionality of the application </li></ul><ul><li>Abstract the underlying browser-specific implementations </li></ul>
    15. 15. Why use YUI ? <ul><li>One of the best documented libraries </li></ul><ul><li>Hosted Environment - on Yahoo! servers </li></ul><ul><li>Native (JavaScript) implementation unlike some libraries </li></ul><ul><li>Backed up by a large Community </li></ul><ul><li>Native (JavaScript) implementation </li></ul>
    16. 16. YUI Foundation <ul><li>YUI Grids accommodates IAB's Ad Unit Guidelines for common ad dimensions </li></ul><ul><li>Centrally manage Complexity </li></ul><ul><ul><li>Make CSS predictable and dependable </li></ul></ul><ul><ul><li>Do not re-invent the wheel </li></ul></ul><ul><li>!DOCTYPE to trigger Standards Mode </li></ul>
    17. 17. YUI Foundation <ul><li>Basic Markup - Microformat type approach </li></ul><ul><li>Semantic Markup </li></ul><ul><ul><li><li></li> for tabs, <span></span> for inline button markup, <tr><td> for tabular data </li></ul></ul><ul><li>Progressively enhanced YUI widgets </li></ul><ul><ul><li>Widgets from existing markup via JS </li></ul></ul>
    18. 18. YUI Foundation <ul><li>YAHOO global namespace </li></ul><ul><li>Lesser memory foot print </li></ul><ul><ul><li>Memory management and garbage collection </li></ul></ul><ul><li>Supported on Grade A browsers </li></ul><ul><ul><li>http://developer.yahoo.com/yui/articles/gbs/ </li></ul></ul>
    19. 19. YUI Dom utility <ul><li>Positioning HTML Elements </li></ul><ul><ul><li>setXY, getXY </li></ul></ul><ul><li>Getting and Setting Styles </li></ul><ul><ul><li>getStyle, setStyle </li></ul></ul><ul><li>Getting the Viewport Size </li></ul><ul><li>Managing Class Names </li></ul><ul><ul><li>getElementsByClassName </li></ul></ul>
    20. 20. YUI Event Utility <ul><li>Automatic deferral of handler attachment </li></ul><ul><ul><li>onAvailable lets you define a function that will execute as soon as an element is detected in the DOM </li></ul></ul><ul><li>Arbitrary object as argument </li></ul><ul><li>Automatic listener cleanup </li></ul><ul><li>Custom events – Expose your own interesting moments </li></ul><ul><li>Automatic Scope Correction </li></ul>
    21. 21. YUI Slider Widget Slider SliderThumb SliderAnim YUI Animation YUI DragDrop YUI Event
    22. 22. Cost
    23. 23. Powered by YUI <ul><li>Large Scale Enterprise </li></ul><ul><li>Adobe </li></ul><ul><li>Baidu </li></ul><ul><li>Google (on iGoogle) </li></ul><ul><li>Target.com </li></ul><ul><li>Wall Street Journal </li></ul><ul><li>yviewr.com </li></ul><ul><li>thinkature.com </li></ul><ul><li>Walmart.com </li></ul><ul><li>Yahoo! Properties </li></ul><ul><li>My Yahoo </li></ul><ul><li>Yahoo Finance </li></ul><ul><li>Yahoo Front Page </li></ul><ul><li>Yahoo Mail </li></ul><ul><li>Yahoo News </li></ul><ul><li>Yahoo Sports </li></ul>
    24. 24. Statistics <ul><li>9,000 registered members on YUI Community Forum </li></ul><ul><li>16,214+ subscribers on yuiblog </li></ul><ul><li>1.1 billion YUI files are served each week from Yahoo's open hosting </li></ul><ul><li>The YUI developer website has 200,000 inbound links </li></ul>
    25. 25. YUI <ul><li>http://developer.yahoo.com/yui/ </li></ul>
    26. 26. Mash Up tools <ul><li>http://developer.yahoo.com/openid/ </li></ul><ul><li>http://pipes.yahoo.com/ </li></ul><ul><li>http://developer.yahoo.com/maps/ </li></ul><ul><li>http://developer.yahoo.com/rss/ </li></ul><ul><li>http://developer.yahoo.com/auth/ </li></ul><ul><li>http://developer.yahoo.com/fireeagle/ </li></ul>
    27. 27. Thank you

    ×