1 / 86

YUI: The Yahoo! User Interface Library

Web Builder 2.0 Las Vegas YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo! Inc. Slides http://nate.koechley.com/talks/2006/12/webbuilder/ Contact http://yuiblog.com

daniel_millan
Download Presentation

YUI: The Yahoo! User Interface Library

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Builder 2.0 Las Vegas YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo! Inc. Slides http://nate.koechley.com/talks/2006/12/webbuilder/ Contact http://yuiblog.com natek@yahoo-inc.com http://developer.yahoo.com/yui

  2. Talk Outline • Why we build it. • What we built. • Why we gave it away. • Why you might like it.

  3. Talk Outline • Why we build it. • What we built. • Why we gave it away. • Why you might like it.

  4. A new season online http://flickr.com/photos/getthebubbles/107463768/

  5. People expectless online…

  6. …but we areonline…

  7. …and tied to the browser.

  8. So we mustlevel the playing field. http://www.flickr.com/photos/probek/44480413/

  9. How?

  10. it takes2things http://flickr.com/photos/latitudes/104286031/

  11. 1: We must improve our technology.

  12. (X)HTML Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile data: custom, xml, json behavior: js mixed: new xhtml, Data Transport CSS JavaScript DOM BOM API DOM API Specification Implementation Defects [ Theory / Practice ] server

  13. dimensions: (X)HTML rendering modes: Safari browsers per platform: platforms: Firefox Opera IE5, 6, 7 Firefox x 4 x 3 Opera 10,000+ UAs x 4 x 2 Macintosh Windows Linux, Unix, Mobile data: custom, xml, json behavior: js mixed: new xhtml, Data Transport CSS knowledge areas: 7 JavaScript DOM BOM API DOM API Specification Implementation Defects [ Theory / Practice ] server =672

  14. (see, we need a robust platform to offer some sanity!)

  15. 2: We must raise expectations

  16. (so users explore and feel comfortable)

  17. DESIGN DEVEL http://flickr.com/photos/niznoz/81087641/

  18. from Implementation Models {design} to Mental Models

  19. from Heterogeneous Environments {development} to Consistent APIs & Compelling Components

  20. Improve technology to raise expectations:Nuts and Bolts http://flickr.com/photos/snood/129758197/

  21. Sixcommitmentsto the platform

  22. 1]Meet sites where they are today Facilitate incremental enhancement “Transitional Internet Applications”

  23. 2]Provide a broad inclusive platform for Rich Internet Application development.a la cartenot a framework!

  24. 3]Extensible and adaptive to meet the need of diverse product portfolio. Lots of different contexts.

  25. 4]Support all A-grade browsers. Still a demanding challenge.“Graded Browser Support”

  26. 5]Support our scale and scope.Yahoo-sized ProblemsIndustrial Grade

  27. 6]Be responsive and accountable to the community of designers and developers.Dedicated TeamYour Priority 1 bugs are our Priority 1 bugs.

  28. Talk Outline • Why we build it. • What we built. • Why we gave it away. • Why you might like it.

  29. Alan Cooper’s GUI design canon

  30. click, drag, keypress ctrl-c = copy, ctr-z = undo [idioms] double-click, right-click, select [primitives] [compounds]

  31. The Yahoo! User Interface Library Tree Control AutoComplete Slider TabView Calendar Control Menu Control Logger Control DHTML Windowing [idioms] [compounds] Animation Drag & Drop [primitives] Connection Manager (Ajax) Event Utility Dom Collection Loader CSS Reset, Fonts, Grids

  32. Talk Outline • Why we build it. • What we built. • Why we gave it away. • Why you might like it.

  33. More Bug Squashers • First legit bug report within 24 hours of initial release. • Bug Reports and Feature Requests: http://sourceforge.net/tracker/index.php?func=detail&aid=1583846&group_id=165715

  34. Community • Public is adding value • Jack Slocum • Dav Glass • Dustin Diaz • Ross Harmes

  35. Jack Slocum (jackslocum.com) • YAHOO.ext • A Grid Component for Yahoo! UI - Part 1 • Creating an AJAX feed viewer using Yahoo! UI and the new Grid Component • A SplitBar component for Yahoo! UI • WordPress Comments System built with Yahoo! UI • Resizable Reloaded - A reusable component for resizing elements

  36. Dav Glass (blog.davglass.com) • Extensions • YUI.Tools • YUI.Effects • YUI.Loader • Wizards: • Yahoo! Grids Builder

  37. Dustin Diaz (dustindiaz.com) • Screencasts • YUI Basics and DOM Hijacking (0:20) • Ajax with Connection Manager (0:25) • Developing an Object Oriented Web Service (0:45) • Articles • Forget addEvent, use Yahoo!’s Event Utility • JavaScript Publisher/Subscriber Pattern • Publishing Custom Events in JavaScript • YUI Tetris! • Interviews/Podcasts • Prototypes

  38. Ross Harmes

  39. Yahoo! Developer Network: “You bring the skills. We bring the ingredients.”

  40. YUI http://www.flickr.com/photos/cdm/50688378/in/set-1002108/

  41. The Yahoo! Developer Network Ecosystem:Utility and Data Web Services Services Browser Based Authenticatio (BBAuth), Answers, Local, Maps, Photos, Search, Shopping, Travel, Utilities, Mail Hackable Sites del.icio.us, Flickr, Upcoming.org, Webjay Burnable Feeds Finance, HotJobs, RSS Feeds, Traffic, Weather SDKs Messenger, Music, Search Developer Kit, Widgets Developer Centers JavaScript, Flash, .NET, PHP, Python, Ruby

  42. The Yahoo! Developer Network Ecosystem: Design Patterns

  43. The Yahoo! Developer Network Ecosystem: Design Patterns

  44. The Yahoo! Developer Network Ecosystem: Design Patterns

  45. The Yahoo! Developer Network Ecosystem: Browser Support Guidelines

  46. The Yahoo! Developer Network Ecosystem:Browser Support Guidelines

  47. A rising tide lifts all boats

  48. Talk Outline • Why we build it. • What we built. • Why we gave it away. • Why you might like it.

  49. If it’s good enough for Yahoo… • Scalability, Performance, Distributed Development, Internationalization, Accessibility, Design, Usability

More Related