YUI:YUI: TheThe Yahoo!Yahoo! UserUser InterfaceInterface LibraryLibrary

Web Builder 2.0 Las Vegas

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 [email protected] http://developer.yahoo.com/yui TalkTalk OutlineOutline zWhy we build it. zWhat we built. zWhy we gave it away. zWhy you might like it. TalkTalk OutlineOutline zWhy we build it. zWhat we built. zWhy we gave it away. zWhy you might like it. AA newnew seasonseason onlineonline

http://flickr.com/photos/getthebubbles/107463768/ PeoplePeople expectexpect less less online…online… …but…but wewe areare online…online… …and…and tiedtied toto thethe browser.browser. SoSo wewe mustmust levellevel thethe playingplaying fieldfield..

http://www.flickr.com/photos/probek/44480413/ How?How? itit takestakes 22 thingsthings

http://flickr.com/photos/latitudes/104286031/ 1:1: WeWe mustmust improveimprove ourour technology.technology. Safari (X)HTML Macintosh Opera [ Theory/ Practice ] IE5, 6,7 Implementation DOM CSS Specification Defects Windows Firefox Opera BOM API DOM API , Unix,Mobile 10,000+ UAs JavaScript Data Transport data: custom, xml, behavior: js mixed: new xhtml, Safari rwesprpafr:x4 x browsers perplatform: (X)HTML Macintosh Firefox edrn oe:x2 x rendering modes: nweg ra:7 knowledge areas: Opera [ Theory/ Practice ] IE5, 6,7 iesos 4 x dimensions: Implementation DOM CSS Specification ltom:x3 x platforms: Defects Windows Firefox Opera BOM API DOM API Linux, Unix,Mobile 10,000+ UAs JavaScript Data Transport data: custom, xml, json behavior: js mixed: new xhtml, (see,(see, wewe needneed aa robustrobust platformplatform toto offeroffer somesome sanity!)sanity!) 2:2: WeWe mustmust raiseraise expectationsexpectations (so(so usersusers exploreexploreandand feelfeel comfortablecomfortable)) DESIGN DEVEL

http://flickr.com/photos/niznoz/81087641/ fromfrom ImplementationImplementation ModelsModels

{design}{design}

toto MentalMental ModelsModels fromfrom HeterogeneousHeterogeneous EnvironmentsEnvironments

{development}{development}

toto ConsistentConsistent APIsAPIs && CompellingCompelling ComponentsComponents ImproveImprove technologytechnology toto raiseraise expectations:expectations:

NutsNuts andand BoltsBolts

http://flickr.com/photos/snood/129758197/ SixSix commitmentscommitments toto thethe platformplatform 1]1]1] MeetMeetMeet sitessitessites wherewherewhere theytheythey areareare todaytodaytoday

FacilitateFacilitateFacilitate incrementalincrementalincremental enhancementenhancementenhancement

““TransitionalTransitional InternetInternet ApplicationsApplications”” 2]2]2] ProvideProvideProvide aaa broadbroadbroad inclusiveinclusiveinclusive platformplatformplatform forforfor RichRichRich InternetInternetInternet ApplicationApplicationApplication development.development.development. aaa lalala cartecartecarte notnot aa framework!framework! 3]3]3] ExtensibleExtensibleExtensible andandand adaptiveadaptiveadaptive tototo meetmeetmeet thethethe needneedneed ofofof diversediversediverse productproductproduct portfolio.portfolio.portfolio.

LotsLotsLots ofofof differentdifferentdifferent contexts.contexts.contexts. 4]4]4] SupportSupportSupport allallall AAA-grade--gradegrade browsers.browsers.browsers. StillStillStill aaa demandingdemandingdemanding challenge.challenge.challenge.

“““GradedGradedGraded BrowserBrowserBrowser SupportSupportSupport”

”” 5]5]5] SupportSupportSupport ourourour scalescalescale andandand scope.scope.scope.

YahooYahooYahoo-sized Problems --sizedsized ProblemsProblems IndustrialIndustrialIndustrial GradeGradeGrade 6]6]6] BeBeBe responsiveresponsiveresponsive andandand accountableaccountableaccountable tototo thethethe communitycommunitycommunity ofofof designersdesignersdesigners andandand developersdevelopersdevelopers...

DedicatedDedicatedDedicated TeamTeamTeam

YourYourYour PriorityPriorityPriority 111 bugsbugsbugs

areareare ourourour PriorityPriorityPriority 111 bugs.bugs.bugs. TalkTalk OutlineOutline zWhy we build it. zWhat we built. zWhy we gave it away. zWhy you might like it. Alan Cooper’s GUI design canon ctrl- = copy, [idioms] ctr-z = undo

double-click, [compounds] right-click, select

click, drag, [primitives] keypress The Yahoo! User[idioms] Interface Library

TreeTree ControlControl AutoCompleteAutoComplete SliderSlider

CalendarCalendar ControlControl [compounds]TabViewTabView MenuMenu ControlControl

LoggerLogger ControlControl DHTMLDHTML WindowingWindowing

AnimationAnimation DragDrag && DropDrop [primitives] ConnectionConnection EventEvent UtilityUtility ManagerManager ()(Ajax)

DomDom CollectionCollection

LoaderLoader CSSCSS Reset,Reset, Fonts,Fonts, GridsGrids TalkTalk OutlineOutline zWhy we build it. zWhat we built. zWhy we gave it away. zWhy you might like it. MoreMore BugBug SquashersSquashers z First legit bug report within 24 hours of initial release. z Bug Reports and Feature Requests: http://sourceforge.net/tracker/index.php?func=detail &aid=1583846&group_id=165715 CommunityCommunity z Public is adding value –Jack Slocum –Dav Glass –Dustin Diaz –Ross Harmes JackJack SlocumSlocum ((jackslocum.comjackslocum.com)) z YAHOO.ext z A Grid Component for Yahoo! UI - Part 1 – Creating an AJAX feed viewer using Yahoo! UI and the new Grid Component z A SplitBar component for Yahoo! UI z WordPress Comments System built with Yahoo! UI z Resizable Reloaded - A reusable component for resizing elements DavDav GlassGlass ((blog.davglass.comblog.davglass.com)) z Extensions –YUI.Tools –YUI.Effects –YUI.Loader z Wizards: –Yahoo! Grids Builder DustinDustin DiazDiaz ((dustindiaz.comdustindiaz.com)) z Screencasts – YUI Basics and DOM Hijacking (0:20) – Ajax with Connection Manager (0:25) – Developing an Object Oriented Web Service (0:45) z Articles – Forget addEvent, use Yahoo!’s Event Utility – JavaScript Publisher/Subscriber Pattern – Publishing Custom Events in JavaScript – YUI Tetris! z Interviews/Podcasts z Prototypes RossRoss HarmesHarmes Yahoo!Yahoo! DeveloperDeveloper Network:Network:

“You bring the skills. We bring the ingredients.” YUI

http://www.flickr.com/photos/cdm/50688378/in/set-1002108/ The Yahoo! Developer Network Ecosystem: UtilityUtility andand DataData WebWeb ServicesServices 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 The Yahoo! Developer Network Ecosystem: DesignDesign PatternsPatterns The Yahoo! Developer Network Ecosystem: DesignDesign PatternsPatterns The Yahoo! Developer Network Ecosystem: DesignDesign PatternsPatterns The Yahoo! Developer Network Ecosystem: BrowserBrowser SupportSupport GuidelinesGuidelines The Yahoo! Developer Network Ecosystem: BrowserBrowser SupportSupport GuidelinesGuidelines

AA risingrising tidetide liftslifts allall boatsboats TalkTalk OutlineOutline zWhy we build it. zWhat we built. zWhy we gave it away. zWhy you might like it. IfIf itit’’ss goodgood enoughenough forfor YahooYahoo…… z Scalability, Performance, Distributed Development, Internationalization, Accessibility, Design, Usability UserUser ExperienceExperience DesignersDesigners z Design-Engineering Collaboration z Usability Studies and Research z Has tools for designers too: –Grids for fast page layout –Interesting Moments Matrics WhatWhat happenshappens whenwhen thethe mousemouse isis pressedpressed onon thethe draggabledraggable object object butbut draggingdragging hashas notnot initiated?initiated?

Storyboard Template for Drag & Drop InternationalizationInternationalization BakedBaked InIn AccessibilityAccessibility BakedBaked InIn z Victor Tsaran –Accessibility Program Manager z Close Collaboration with various a11y groups and advocates. z More goodness to come… BrowserBrowser SupportSupport BakedBaked InIn z “Set it and forget it” z We collaborate with all browser vendors z Graded Browser Support z Opera “for free”, even mobile! SeniorSenior ArchitecturalArchitectural LeadershipLeadership z : –“Yoda of lambda programming and JavaScript” according to (Inventor of JavaScript) z –Inventor of PHP AcclaimedAcclaimed DocumentationDocumentation z 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, , , LandingLanding PagePage QuickQuick StartStart GuidesGuides CompleteComplete APIAPI DocumentationDocumentation ExamplesExamples andand TutorialsTutorials TheThe YUIYUI CheatCheat SheetsSheets ydnydn--javascriptjavascript MailingMailing ListList StabilityStability andand DedicationDedication z Dedicated team of full-time developers. z You can use the exact same lines of code Yahoo does. WeWe’’rere GoodGood ““PagePage CitizensCitizens”” z “Plays well with others” –Single global variable –Consistent namespace var $ = YAHOO.util.Dom.get; –Can coexist with other libs WeWe BelieveBelieve inin JavaScriptJavaScript z We don’t try to fix JavaScript z We don’t enforce a particular coding style z We expect you to write JS LightLight WeightWeight andand aa lala cartecarte z Multiple versions of each file –Fully commented –Minimized –Debug z No unnecessary dependencies z Pre-concatenated sets of commonly used files. ThreeThree VersionsVersions ofof eacheach FileFile

http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/ Dependencies Dependencies

la carte la carte

À À LightweightLightweight CSSCSS FoundationFoundation ItIt’’ss GotGot aa GreatGreat CommunityCommunity z 4000 member of our public list http://groups.yahoo.com/groups/ydn-javascript z Packages for VIM, TextMate, Eclipse, Aptana TheThe mostmost openopen license:license: BSDBSD GreatGreat FunctionalityFunctionality andand FlexibilityFlexibility z Custom Events / pub-sub –onMenuCollapse, onMenuOpen z Automatic iFrame shim, as necessary z Etc etc… YUIYUI EventEvent z Flexible batch assignment z Handler Attachment Deferral – onAvailable and onContentReady z Scope correction and assignment z Automatic cleanup z Custom Events YUIYUI EventEvent’’ss CustomCustom EventsEvents var myEvent = new YAHOO.util.CustomEvent('myEvent'); myEvent.subscribe(function() { alert('event fired'); }); myEvent.fire(); YUIYUI AnimationAnimation var anim = new YAHOO.util.Anim(el, { width: {to: 400}, height: {by: 400, unit: 'em' }, opacity: {from: 0, to: 1} 1); anim.animate(); z Includes support for Bezier math control YUIYUI ConnectionConnection z Iron-clad Ajax object z With File uploading z And extra-argument callbacks. YUIYUI ContainerContainer FamilyFamily DragDrag andand DropDrop z It’s easy, sorta, but easy to get wrong too z Point, Region, Multiple Handles, !Handles z Exposes 15 interesting moments YUIYUI LoggerLogger andand FirebugFirebug z alert(“stop the insanity”); z YAHOO.log(“There IS a better way”); z Debug with Logger or Firebug directly. CSSCSS GridsGrids z Page Widths z Template Presets z Nesting Grids z Together, 200 layouts for 2kb. Who’sWho’s usingusing it?it? ExternalExternal ImplementationsImplementations z Wall Street Journal z PayPal z Technorati z eBay z IndyCar.com z Yuriz z SugarCRM z PowerReviews.com z SmugMug z Madonet z Stikkit z You? ThankThank you.you. [email protected] http://nate.koechley.com/talks

http://developer.yahoo.com/yui http://yuiblog.com http://nate.koechley.com/blog

Photo Credits: – http://www.flickr.com/photos/jacqueline-w/56107224/ – http://www.flickr.com/photos/grimreaperwithalawnmower/191890428/ – http://www.flickr.com/photos/jasonmichael/4126695/ We’re hiring! (Josie Arguada: [email protected])

[email protected] http://nate.koechley.com/talks Questions?Questions?

[email protected] http://nate.koechley.com/talks II don’tdon’t know.know.

[email protected] http://nate.koechley.com/talks