YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User...
-
Upload
alberta-cummings -
Category
Documents
-
view
225 -
download
2
Transcript of YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User...
![Page 1: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/1.jpg)
YUI: The Yahoo! User Interface LibraryYUI: The Yahoo! User Interface Library
Nate KoechleyNate KoechleySenior Engineer & Designer, Yahoo! User Interface (YUI) Library TeamPlatform Engineering Group Yahoo! Inc.
Slideshttp://nate.koechley.com/talks/2006/12/webbuilder/
Contacthttp://[email protected]://developer.yahoo.com/yui
Web Builder 2.0 Las Vegas
![Page 2: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/2.jpg)
Talk OutlineTalk Outline
Why we build it.What we built.Why we gave it away.Why you might like it.
![Page 3: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/3.jpg)
Talk OutlineTalk Outline
Why we build it.What we built.Why we gave it away.Why you might like it.
![Page 4: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/4.jpg)
A new season onlineA new season online
http://flickr.com/photos/getthebubbles/107463768/
![Page 5: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/5.jpg)
People expect less online…
People expect less online…
![Page 6: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/6.jpg)
…but we are online……but we are online…
![Page 7: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/7.jpg)
…and tied to the
browser.…and tied to the
browser.
![Page 8: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/8.jpg)
So we mustSo we must
level level thethe playing field playing field..
http://www.flickr.com/photos/probek/44480413/
![Page 9: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/9.jpg)
How?How?
![Page 10: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/10.jpg)
it takesit takes 22 things things
http://flickr.com/photos/latitudes/104286031/
![Page 11: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/11.jpg)
1: We must
improve our technology.
1: We must
improve our technology.
![Page 12: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/12.jpg)
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
server
CSS
Macintosh
Safari Firefox Opera
Windows
OperaIE5, 6, 7 Firefox
Linux, Unix, Mobile
10,000+ UAs
![Page 13: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/13.jpg)
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
server
CSS
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 14: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/14.jpg)
(see, we need a robust platform to offer some sanity!)
(see, we need a robust platform to offer some sanity!)
![Page 15: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/15.jpg)
2: We must raise expectations
2: We must raise expectations
![Page 16: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/16.jpg)
(so users explore and
feel comfortable)
(so users explore and
feel comfortable)
![Page 17: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/17.jpg)
http://flickr.com/photos/niznoz/81087641/
DESIGN
DEVEL
![Page 18: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/18.jpg)
{design}{design}
toto Mental Models Mental Models
from from Implementation Implementation ModelsModels
![Page 19: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/19.jpg)
{development}{development}
toto Consistent APIs & Consistent APIs & Compelling ComponentsCompelling Components
from from Heterogeneous Heterogeneous EnvironmentsEnvironments
![Page 20: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/20.jpg)
Improve technology to raise Improve technology to raise expectations:expectations:
Nuts and BoltsNuts and Bolts
http://flickr.com/photos/snood/129758197/
![Page 21: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/21.jpg)
SixSix commitmentscommitments
to the to the platformplatform
![Page 22: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/22.jpg)
1]1]Meet sites where Meet sites where they are today they are today
Facilitate incremental enhancement Facilitate incremental enhancement
“Transitional Internet Applications”“Transitional Internet Applications”
1]1]Meet sites where Meet sites where they are today they are today
Facilitate incremental enhancement Facilitate incremental enhancement
“Transitional Internet Applications”“Transitional Internet Applications”
![Page 23: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/23.jpg)
2]2]Provide a broad inclusive Provide a broad inclusive platform for Rich Internet platform for Rich Internet Application development.Application development.
a la cartea la carte not a framework!not a framework!
2]2]Provide a broad inclusive Provide a broad inclusive platform for Rich Internet platform for Rich Internet Application development.Application development.
a la cartea la carte not a framework!not a framework!
![Page 24: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/24.jpg)
3]3]Extensible and adaptive to Extensible and adaptive to meet the need of diverse meet the need of diverse product portfolio. product portfolio.
Lots of different contexts.Lots of different contexts.
3]3]Extensible and adaptive to Extensible and adaptive to meet the need of diverse meet the need of diverse product portfolio. product portfolio.
Lots of different contexts.Lots of different contexts.
![Page 25: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/25.jpg)
4]4]Support all A-grade browsers. Support all A-grade browsers. Still a demanding challenge.Still a demanding challenge.
“Graded Browser Support”“Graded Browser Support”
4]4]Support all A-grade browsers. Support all A-grade browsers. Still a demanding challenge.Still a demanding challenge.
“Graded Browser Support”“Graded Browser Support”
![Page 26: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/26.jpg)
5]5]Support our scale and scope.Support our scale and scope.
Yahoo-sized ProblemsYahoo-sized Problems
Industrial GradeIndustrial Grade
5]5]Support our scale and scope.Support our scale and scope.
Yahoo-sized ProblemsYahoo-sized Problems
Industrial GradeIndustrial Grade
![Page 27: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/27.jpg)
6]6]Be responsive and accountable Be responsive and accountable to the community of designers to the community of designers and developersand developers..
Dedicated TeamDedicated Team
Your Priority 1 bugs are our Priority 1 bugs.Your Priority 1 bugs are our Priority 1 bugs.
6]6]Be responsive and accountable Be responsive and accountable to the community of designers to the community of designers and developersand developers..
Dedicated TeamDedicated Team
Your Priority 1 bugs are our Priority 1 bugs.Your Priority 1 bugs are our Priority 1 bugs.
![Page 28: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/28.jpg)
Talk OutlineTalk Outline
Why we build it.What we built.Why we gave it away.Why you might like it.
![Page 29: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/29.jpg)
Alan Cooper’s GUI design canon
![Page 30: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/30.jpg)
[primitives]
[compounds]
[idioms]
click, drag, keypress
double-click, right-click, select
ctrl-c = copy,ctr-z = undo
![Page 31: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/31.jpg)
[primitives]
[compounds]
[idioms]
Connection Manager (Ajax)Connection Manager (Ajax) Event UtilityEvent Utility
Dom CollectionDom Collection
Drag & DropDrag & DropAnimationAnimation
The Yahoo! User Interface Library
CSS Reset, Fonts, GridsCSS Reset, Fonts, GridsLoaderLoader
Logger ControlLogger Control
Menu ControlMenu Control
SliderSliderTree ControlTree Control
Calendar ControlCalendar Control
AutoCompleteAutoComplete
DHTML WindowingDHTML Windowing
TabViewTabView
![Page 32: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/32.jpg)
Talk OutlineTalk Outline
Why we build it.What we built.Why we gave it away.Why you might like it.
![Page 33: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/33.jpg)
More Bug SquashersMore 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
![Page 34: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/34.jpg)
CommunityCommunity
Public is adding value–Jack Slocum
–Dav Glass
–Dustin Diaz
–Ross Harmes
![Page 35: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/35.jpg)
Jack Slocum (jackslocum.com)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 compo
nent for resizing elements
![Page 36: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/36.jpg)
Dav Glass (blog.davglass.com)Dav Glass (blog.davglass.com)
Extensions–YUI.Tools
–YUI.Effects
–YUI.Loader
Wizards:–Yahoo! Grids Builder
![Page 37: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/37.jpg)
Dustin Diaz (dustindiaz.com)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
![Page 38: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/38.jpg)
Ross HarmesRoss Harmes
![Page 39: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/39.jpg)
Yahoo! Developer Network:Yahoo! Developer Network:
“You bring the skills. We bring the ingredients.”
![Page 40: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/40.jpg)
YUI
http://www.flickr.com/photos/cdm/50688378/in/set-1002108/
![Page 41: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/41.jpg)
The Yahoo! Developer Network Ecosystem:The Yahoo! Developer Network Ecosystem:
Utility and Data Web ServicesUtility and Data Web ServicesServices
Browser Based Authenticatio (BBAuth), Answers, Local, Maps, Photos, Search, Shopping, Travel, Utilities, Mail
Hackable Sitesdel.icio.us, Flickr, Upcoming.org, Webjay
Burnable FeedsFinance, HotJobs, RSS Feeds, Traffic, Weather
SDKsMessenger, Music, Search Developer Kit, Widgets
Developer CentersJavaScript, Flash, .NET, PHP, Python, Ruby
![Page 42: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/42.jpg)
The Yahoo! Developer Network Ecosystem: The Yahoo! Developer Network Ecosystem:
Design PatternsDesign Patterns
![Page 43: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/43.jpg)
The Yahoo! Developer Network Ecosystem: The Yahoo! Developer Network Ecosystem:
Design PatternsDesign Patterns
![Page 44: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/44.jpg)
The Yahoo! Developer Network Ecosystem: The Yahoo! Developer Network Ecosystem:
Design PatternsDesign Patterns
![Page 45: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/45.jpg)
The Yahoo! Developer Network Ecosystem: The Yahoo! Developer Network Ecosystem:
Browser Support GuidelinesBrowser Support Guidelines
![Page 46: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/46.jpg)
The Yahoo! Developer Network Ecosystem:The Yahoo! Developer Network Ecosystem:
Browser Support GuidelinesBrowser Support Guidelines
![Page 47: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/47.jpg)
![Page 48: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/48.jpg)
A rising tide
lifts all boats
A rising tide
lifts all boats
![Page 49: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/49.jpg)
Talk OutlineTalk Outline
Why we build it.What we built.Why we gave it away.Why you might like it.
![Page 50: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/50.jpg)
If it’s good enough for Yahoo…If it’s good enough for Yahoo…
Scalability, Performance, Distributed Development, Internationalization, Accessibility, Design, Usability
![Page 51: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/51.jpg)
User Experience DesignersUser Experience Designers
Design-Engineering Collaboration
Usability Studies and ResearchHas tools for designers too:
–Grids for fast page layout
–Interesting Moments Matrics
![Page 52: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/52.jpg)
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 53: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/53.jpg)
Internationalization Baked InInternationalization Baked In
![Page 54: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/54.jpg)
Accessibility Baked InAccessibility Baked In
Victor Tsaran–Accessibility Program Manager
Close Collaboration with various a11y groups and advocates.
More goodness to come…
![Page 55: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/55.jpg)
Browser Support Baked InBrowser Support Baked In
“Set it and forget it”We collaborate with all
browser vendorsGraded Browser SupportOpera “for free”, even
mobile!
![Page 56: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/56.jpg)
Senior Architectural LeadershipSenior Architectural Leadership
Douglas Crockford:–“Yoda of lambda programming and JavaScript” according to Brendan Eich (Inventor of JavaScript)
Rasmus Lerdorf –Inventor of PHP
![Page 57: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/57.jpg)
Acclaimed DocumentationAcclaimed Documentation
Documentation for you, regardless of level or work style:–Overviews and Quick Start Guides–Tutorials and Step-by-Steps–Generated API Docs–Cheatsheets – for every component!–Mailing list–Bundles: TextMate, VIM, Eclipse, Aptana
![Page 58: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/58.jpg)
Landing Page Quick Start GuidesLanding Page Quick Start Guides
![Page 59: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/59.jpg)
Complete API DocumentationComplete API Documentation
![Page 60: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/60.jpg)
Examples and TutorialsExamples and Tutorials
![Page 61: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/61.jpg)
The YUI Cheat SheetsThe YUI Cheat Sheets
![Page 62: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/62.jpg)
ydn-javascript Mailing Listydn-javascript Mailing List
![Page 63: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/63.jpg)
Stability and DedicationStability and Dedication
Dedicated team of full-time developers.
You can use the exact same lines of code Yahoo does.
![Page 64: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/64.jpg)
We’re Good “Page Citizens”We’re Good “Page Citizens”
“Plays well with others” –Single global variable
–Consistent namespacevar $ = YAHOO.util.Dom.get;
–Can coexist with other libs
![Page 65: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/65.jpg)
We Believe in JavaScriptWe Believe in JavaScript
We don’t try to fix JavaScriptWe don’t enforce a particular
coding styleWe expect you to write JS
![Page 66: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/66.jpg)
Light Weight and Light Weight and a la cartea la carte
Multiple versions of each file–Fully commented–Minimized–Debug
No unnecessary dependenciesPre-concatenated sets of
commonly used files.
![Page 67: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/67.jpg)
Three Versions of each FileThree Versions of each File
http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
![Page 68: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/68.jpg)
À la carte À la carte DependenciesDependencies
![Page 69: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/69.jpg)
Lightweight CSS FoundationLightweight CSS Foundation
![Page 70: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/70.jpg)
It’s Got a Great CommunityIt’s Got a Great Community
4000 member of our public listhttp://groups.yahoo.com/groups/ydn-javascript
Packages for VIM, TextMate, Eclipse, Aptana
![Page 71: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/71.jpg)
The most open license: BSD
The most open license: BSD
![Page 72: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/72.jpg)
Great Functionality and FlexibilityGreat Functionality and Flexibility
Custom Events / pub-sub–onMenuCollapse, onMenuOpen
Automatic iFrame shim, as necessary
Etc etc…
![Page 73: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/73.jpg)
YUI EventYUI Event
Flexible batch assignment Handler Attachment Deferral
–onAvailable and onContentReady
Scope correction and assignment Automatic cleanup Custom Events
![Page 74: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/74.jpg)
YUI Event’s Custom EventsYUI Event’s Custom Events
var myEvent = new YAHOO.util.CustomEvent('myEvent');
myEvent.subscribe(function() { alert('event fired');
});
myEvent.fire();
![Page 75: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/75.jpg)
YUI AnimationYUI 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 76: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/76.jpg)
YUI ConnectionYUI Connection
Iron-clad Ajax object With File uploading And extra-argument callbacks.
![Page 77: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/77.jpg)
YUI Container FamilyYUI Container Family
![Page 78: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/78.jpg)
Drag and DropDrag and Drop
It’s easy, sorta, but easy to get wrong too Point, Region, Multiple Handles, !Handles Exposes 15 interesting moments
![Page 79: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/79.jpg)
YUI Logger and FirebugYUI Logger and Firebug
alert(“stop the insanity”); YAHOO.log(“There IS a better way”);
Debug with Logger or Firebug directly.
![Page 80: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/80.jpg)
CSS GridsCSS Grids
Page Widths Template Presets Nesting Grids
Together, 200 layouts for 2kb.
![Page 81: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/81.jpg)
Who’s using it?Who’s using it?
![Page 82: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/82.jpg)
External ImplementationsExternal Implementations
Wall Street Journal
Technorati IndyCar.com SugarCRM SmugMug Stikkit
PayPal eBay Yuriz PowerReviews.c
om Madonet You?
![Page 83: YUI: The Yahoo! User Interface Library Nate Koechley Senior Engineer & Designer, Yahoo! User Interface (YUI) Library Team Platform Engineering Group Yahoo!](https://reader035.fdocuments.us/reader035/viewer/2022062516/56649e625503460f94b5e459/html5/thumbnails/83.jpg)
Thank you.Thank you.
http://nate.koechley.com/talks
http://developer.yahoo.com/yuihttp://yuiblog.comhttp://nate.koechley.com/blog
Photo Credits:– http://www.flickr.com/photos/jacqueline-w/56107224/– http://www.flickr.com/photos/grimreaperwithalawnmower/1918904
28/– http://www.flickr.com/photos/jasonmichael/4126695/