the yahoo! user interface library (yui)
DESCRIPTION
The Yahoo! User Interface Library (YUI). Nate Koechley [email protected] http://nate.koechley.com/blog. Refresh 06 Orlando, Florida 2006.11.17. YUI. http://www.flickr.com/photos/cdm/50688378/in/set-1002108/. The Yahoo! Developer Network. Utility and Data Web Services - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/1.jpg)
1
The Yahoo! User Interface Library (YUI)
Nate Koechley [email protected]://nate.koechley.com/blog
Refresh 06Orlando, Florida
2006.11.17
![Page 2: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/2.jpg)
2
YUI
http://www.flickr.com/photos/cdm/50688378/in/set-1002108/
![Page 3: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/3.jpg)
3
The Yahoo! Developer Network
• Utility and Data Web Services
• Design Patterns Library
• Browser Support Guidelines
• Yahoo! User Interface Library (YUI)
![Page 4: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/4.jpg)
4
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, WebjayBurnable Feeds
Finance, HotJobs, RSS Feeds, Traffic, WeatherSDKs
Messenger, Music, Search Developer Kit, WidgetsDeveloper Centers
JavaScript, Flash, .NET, PHP, Python, Ruby
![Page 5: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/5.jpg)
5
The Yahoo! Developer Network Ecosystem:
Design Patterns
![Page 6: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/6.jpg)
6
The Yahoo! Developer Network Ecosystem:
Design Patterns
![Page 7: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/7.jpg)
7
The Yahoo! Developer Network Ecosystem:
Design Patterns
![Page 8: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/8.jpg)
8
The Yahoo! Developer Network Ecosystem:
Browser Support Guidelines
![Page 9: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/9.jpg)
9
The Yahoo! Developer Network Ecosystem:
Browser Support Guidelines
![Page 10: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/10.jpg)
10
![Page 11: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/11.jpg)
11
Why?
![Page 12: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/12.jpg)
12
changing seasons
on the webhttp://flickr.com/photos/getthebubbles/107463768/
![Page 13: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/13.jpg)
13
People expect less online.
![Page 14: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/14.jpg)
14
But we are online…
![Page 15: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/15.jpg)
15
… and tied to the browser.
![Page 16: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/16.jpg)
16
So we must
level the playing field.
http://www.flickr.com/photos/probek/44480413/
![Page 17: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/17.jpg)
17
how?
![Page 18: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/18.jpg)
18
it takes 2 things
http://flickr.com/photos/latitudes/104286031/
![Page 19: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/19.jpg)
19
We must
improve our technology
![Page 20: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/20.jpg)
20
Dat
a T
ran
spo
rt
dat
a: c
us
tom
, xm
l,
js
on
beh
avio
r: j
sm
ixed
: n
ew x
htm
l,
(X)HTML DOM JavaScript
Specification
Implementation
Defects
[ Theory / Practice ]
BOM API
DOM API
CSS
server
Macintosh
Safari Firefox Opera
Windows
OperaIE5, 6, 7 Firefox
Linux, Unix, Mobile
10,000+ UAs
![Page 21: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/21.jpg)
21
Dat
a T
ran
spo
rt
dat
a: c
us
tom
, xm
l,
js
on
beh
avio
r: j
sm
ixed
: n
ew x
htm
l,
(X)HTML DOM JavaScript
Specification
Implementation
Defects
[ Theory / Practice ]
BOM API
DOM API
CSS
server
Macintosh
Safari Firefox Opera
Windows
OperaIE5, 6, 7 Firefox
Linux, Unix, Mobile
10,000+ UAs
knowledge areas: 7dimensions: x 4
platforms: x 3
browsers per platform: x 4
rendering modes: x 2
=672
![Page 22: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/22.jpg)
22
(we need a robust platform!)
![Page 23: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/23.jpg)
23
and
raise expectations
![Page 24: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/24.jpg)
24
(so users engage and explore with confidence!)
![Page 25: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/25.jpg)
25http://flickr.com/photos/niznoz/81087641/
DESIGN
DEVEL
![Page 26: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/26.jpg)
26
{design}
from Implementation Models
to Mental Models
![Page 27: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/27.jpg)
27
{development}
from Heterogeneous Environments
to Compelling and
Consistent APIs
![Page 28: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/28.jpg)
28
Nuts and Bolts
http://flickr.com/photos/snood/129758197/
![Page 29: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/29.jpg)
29
Six
commitments
to the platform
![Page 30: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/30.jpg)
30
1] Meet properties where they are today. Facilitate incremental
enhancement(“Transitional Internet Applications”)
![Page 31: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/31.jpg)
31
2] Provide a broad, inclusive platform for Web 2.0’s “Rich
Internet Application” development
(a la carte, not framework)
![Page 32: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/32.jpg)
32
3] Extensible and adaptive, to meet the needs of our diverse
product portfolio(lots of different contexts)
![Page 33: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/33.jpg)
33
4] Support all A-grade browsers – an evolving and still demanding challenge
(Graded Browser Support)
http://developer.yahoo.com/yui/articles/gbs/gbs.html
![Page 34: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/34.jpg)
34
5] Support our scale and scope (industrial grade)
![Page 35: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/35.jpg)
35
6] Be responsive and accountable to the community of
designers and engineers(your P1 bugs are our P1 bugs)
![Page 36: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/36.jpg)
36
Learn from Desktop History
Adapted from Alan Cooper’s “About Face 2.0” Book
![Page 37: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/37.jpg)
37
[primitives]
[compounds]
[idioms]
Connection Manager (Ajax)Connection Manager (Ajax) Event UtilityEvent Utility
Dom CollectionDom Collection
Drag & DropDrag & DropAnimationAnimation
Logger ControlLogger Control
Menu ControlMenu Control
SliderSliderTreeViewTreeView
Calendar ControlCalendar Control
AutoCompleteAutoComplete
The Yahoo! User Interface (YUI) Library
DHTML WindowingDHTML Windowing
CSS Reset, Fonts, GridsCSS Reset, Fonts, GridsLoaderLoader
TabViewTabView
![Page 38: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/38.jpg)
38
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
![Page 39: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/39.jpg)
39
YUI Event
• Event
– Flexible batch assignment
– onAvailable and onContentReady
– Scope correction and assignment
– Automatic cleanup
– Custom Events
![Page 40: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/40.jpg)
40
YUI Event’s Custom Events
• var myEvent = new YAHOO.util.CustomEvent('myEvent');
• myEvent.subscribe(function() { alert('event fired'); });
• myEvent.fire();
![Page 41: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/41.jpg)
41
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
![Page 42: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/42.jpg)
42
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
![Page 43: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/43.jpg)
43
YUI Container Family
![Page 44: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/44.jpg)
44
Drag and Drop
• It’s easy, sorta, but easy to get wrong too
• Point, Region, Multiple Handles, !Handles
• Exposes 15 interesting moments
![Page 45: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/45.jpg)
45
Storyboard Template for Drag & Drop
What happens when the mouse is pressed on the draggable object but dragging has not initiated?
What happens when the mouse is pressed on the draggable object but dragging has not initiated?
![Page 46: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/46.jpg)
46
YUI Logger and Firebug
• alert(“stop the insanity”);
• YAHOO.log(“There IS a better way”);
• Debug with Logger or Firebug directly.
![Page 47: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/47.jpg)
47
CSS Grids
• Page Widths
• Template Presets
• Nesting Grids
• Together, 200 layouts for 2kb.
![Page 48: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/48.jpg)
48
About YUI Page Weight
http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
![Page 49: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/49.jpg)
49
À la carte Dependencies
![Page 50: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/50.jpg)
50
Lightweight CSS Foundation
![Page 51: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/51.jpg)
51
Why Open Source?
![Page 52: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/52.jpg)
52
What about the timeline?
• 2005, January
– Initial development
– One-person team• 2005, July
– Initial internal release• 2006, February 13th
– Open-source release
– #1 on Delicious, Digg, Techmeme
– 36,000 downloads
• 2006, September 18th
– 3000th member on ydn-javascript
• 2006, November 7th
– Linux Journal Editor’s Choice Award: Best Software Library
– 300k downloads• 2006, November 13th
– Current release
– 9 person team
![Page 53: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/53.jpg)
53
What about the namespace?
(because I really like $)
![Page 54: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/54.jpg)
54
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/
![Page 55: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/55.jpg)
55
What’s in the distribution?
• 100s of files
– All examples
– All documentation
– All development builds
– All production builds
– All minimized builds
![Page 56: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/56.jpg)
56
Yahoo! is powered by the exact same bits we
offer to you.
![Page 57: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/57.jpg)
57
What is the license?
The most-open there is: BSD
![Page 58: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/58.jpg)
58
Who’s Using It?
![Page 59: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/59.jpg)
59
External Implementations
• Wall Street Journal
• Technorati
• IndyCar.com
• SugarCRM
• SmugMug
• PayPal
• eBay
• Yuriz
• PowerReviews.com
• Madonet
• You?
![Page 60: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/60.jpg)
60
Documentation?
![Page 61: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/61.jpg)
61
Landing Page Guides
![Page 62: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/62.jpg)
62
Complete API Documentation
![Page 63: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/63.jpg)
63
Examples and Tutorials
![Page 64: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/64.jpg)
64
The YUI Cheat Sheets
![Page 65: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/65.jpg)
65
Team Blog
![Page 66: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/66.jpg)
66
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
![Page 67: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/67.jpg)
67
Jack Slocum
![Page 68: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/68.jpg)
68
How is it different from GWT?
We believe in JavaScript.
![Page 69: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/69.jpg)
69
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
![Page 70: The Yahoo! User Interface Library (YUI)](https://reader035.vdocuments.mx/reader035/viewer/2022062408/56813679550346895d9e07f4/html5/thumbnails/70.jpg)
70
We’re Hiring!
Josie Aguada: [email protected]
Usual suspects:
JavaScript, PHP, CSS, HTML, ActionScript…