The Yahoo! User Interface Library (YUI)
Nate Koechley Refresh 06 [email protected] Orlando, Florida http://nate.koechley.com/blog 2006.11.171 YUI
http://www.flickr.com/photos/cdm/50688378/in/set-1002108/ 2 The Yahoo! Developer Network
• Utility and Data Web Services • Design Patterns Library • Browser Support Guidelines • Yahoo! User Interface Library (YUI)
3 The Yahoo! Developer Network Ecosystem: Utility and Data Web Services
Services Browser Based Authenticatio (BBAuth), Answers, Local, Maps, Photos, Search, Shopping, Travel, Utilities, (Mail coming soon) 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
4 The Yahoo! Developer Network Ecosystem: Design Patterns
5 The Yahoo! Developer Network Ecosystem: Design Patterns
6 The Yahoo! Developer Network Ecosystem: Design Patterns
7 The Yahoo! Developer Network Ecosystem: Browser Support Guidelines
8 The Yahoo! Developer Network Ecosystem: Browser Support Guidelines
9 10 Why?
11 changing seasons
on the web http://flickr.com/photos/getthebubbles/107463768/ 12 People expect less online.
13 But we are online…
14 …and tied to the browser.
15 So we must level the playing field.
http://www.flickr.com/photos/probek/44480413/ 16 how?
17 it takes 2 things
http://flickr.com/photos/latitudes/104286031/ 18 We must improve our technology
19 Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile
CSS
BOM API (X)HTML DOM JavaScript DOM API
Specification Implementation
Defects js new xhtml, new json custom, xml, custom, [ Theory / Practice ] Data Transport data: behavior: mixed:
20 Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile
knowledgeCSS areas: 7
BOM API (X)HTML dimensions:DOM xJavaScript4 DOM API platforms: x 3 Specification browsers perImplementation platform: x 4 Defects js new xhtml, new json custom, xml, custom, rendering[ Theory / Practicemodes: ] x 2Data Transport data: behavior: mixed:
21 (we need a robust platform!)
22 and raise expectations
23 (so users engage and explore with confidence!)
24 DESIGN DEVEL
http://flickr.com/photos/niznoz/81087641/ 25 from Implementation Models
{design}
to Mental Models
26 from Heterogeneous Environments
{development}
to Compelling and Consistent APIs
27 Nuts and Bolts
http://flickr.com/photos/snood/129758197/ 28 Six commitments to the platform
29 1] Meet properties where they are today. Facilitate incremental enhancement (“Transitional Internet Applications”)
30 2] Provide a broad, inclusive platform for Web 2.0’s “Rich Internet Application” development (a la carte, not framework)
31 3] Extensible and adaptive, to meet the needs of our diverse product portfolio (lots of different contexts)
32 4] Support all A-grade browsers – an evolving and still demanding challenge (Graded Browser Support)
http://developer.yahoo.com/yui/articles/gbs/gbs.html 33 5] Support our scale and scope (industrial grade)
34 6] Be responsive and accountable to the community of designers and engineers (your P1 bugs are our P1 bugs)
35 Learn from Desktop History
Adapted from Alan Cooper’s “About Face 2.0” Book 36 The Yahoo! User[idioms] Interface (YUI) Library
TreeViewTreeView AutoCompleteAutoComplete SliderSlider
CalendarCalendar ControlControl [compounds]TabViewTabView MenuMenu ControlControl
LoggerLogger ControlControl DHTMLDHTML WindowingWindowing
AnimationAnimation DragDrag && DropDrop [primitives] ConnectionConnection EventEvent UtilityUtility ManagerManager (Ajax)(Ajax)
DomDom CollectionCollection
LoaderLoader CSSCSS Reset,Reset, Fonts,Fonts, GridsGrids 37 YUI DOM Collection
• isAncestor(parent, potentialChild) • inDocument(el) • getDocumentHeight, getDocumentWidth • getViewportHeight, getViewportWidth • getElementsBy – YAHOO.util.Dom.getElementsBy(function(el) { return (/^http:\/\/www\.yahoo\.com/. test(el.getAttribute('href'))); }, 'a', 'content')); • Class management utilities
38 YUI Event
• Event – Flexible batch assignment – onAvailable and onContentReady – Scope correction and assignment – Automatic cleanup –Custom Events
39 YUI Event’s Custom Events
• var myEvent = new YAHOO.util.CustomEvent('myEvent'); • myEvent.subscribe(function() { alert('event fired'); }); • myEvent.fire();
40 YUI Animation var anim = new YAHOO.util.Anim(el, { width: {to: 400}, height: {by: 400, unit: 'em' }, opacity: {from: 0, to: 1} 1); anim.animate(); • Includes support for Bezier math control
41 YUI Connection
• File uploading in addition to XHR – Easy implementation of file uploading across the A-Grade browsers – Use the upload member of the callback object (instead of "success" or "failure") • XHR callback with extra arguments
42 YUI Container Family
43 Drag and Drop
• It’s easy, sorta, but easy to get wrong too • Point, Region, Multiple Handles, !Handles • Exposes 15 interesting moments
44 WhatWhat happenshappens whenwhen thethe mousemouse isis pressedpressed onon thethe draggabledraggable object object butbut draggingdragging hashas notnot initiated?initiated?
Storyboard Template for Drag & Drop
45 YUI Logger and Firebug
• alert(“stop the insanity”); • YAHOO.log(“There IS a better way”);
• Debug with Logger or Firebug directly.
46 CSS Grids
• Page Widths • Template Presets • Nesting Grids
• Together, 200 layouts for 2kb.
47 About YUI Page Weight
http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
48 À la carte Dependencies
49 Lightweight CSS Foundation
50 Why Open Source?
51 What about the timeline?
• 2005, January • 2006, September 18th – Initial development – 3000th member on – One-person team ydn-javascript • 2006, November 7th • 2005, July – Initial internal release – Linux Journal Editor’s Choice Award: Best • 2006, February 13th Software Library – Open-source release – 300k downloads – #1 on Delicious, Digg, • 2006, November 13th Techmeme – Current release – 36,000 downloads – 9 person team
52 What about the namespace?
(because I really like $)
53 Global Variables are Evil
• Ideally, only a single global per app|lib|widget • Speed unaffected; self documentation; reliable • Shorten locally if you want.
• var $ = YAHOO.util.Dom.get;
• http://yuiblog.com/blog/2006/06/01/global-domination/
54 What’s in the distribution?
• 100s of files – All examples – All documentation – All development builds – All production builds – All minimized builds
55 Yahoo! is powered by the exact same bits we offer to you.
56 What is the license?
The most-open there is: BSD
57 Who’s Using It?
58 External Implementations
• Wall Street Journal •PayPal • Technorati •eBay • IndyCar.com •Yuriz • SugarCRM • PowerReviews.com • SmugMug • Madonet • You?
59 Documentation?
60 Landing Page Guides
61 Complete API Documentation
62 Examples and Tutorials
63 The YUI Cheat Sheets
64 Team Blog
65 Is there a community?
• http://yuiblog.com • http://groups.yahoo.com/group/ydn-javascript • http://www.jackslocum.com/yui/ YUI.ext • http://blog.davglass.com/ YUI.addons • SourceForge
66 Jack Slocum
67 How is it different from GWT? We believe in JavaScript.
68 Thanks! nate.koechley.com/talks/2006/11/refresh06/YUI/
• Nate Koechley: – [email protected] | [email protected] – http://nate.koechley.com/blog • Yahoo! Developer Network & Y! UI Blog: – http://developer.yahoo.com – http://developer.yahoo.com/yui – http://developer.yahoo.com/ypatterns – http://www.yuiblog.com – http://groups.yahoo.com/group/ydn-javascript
69 We’re Hiring!
Josie Aguada: [email protected]
Usual suspects: JavaScript, PHP, CSS, HTML, ActionScript…
70