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 Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, , Mobile

CSS

BOM API (X)HTML DOM JavaScript DOM API

Specification Implementation

Defects js new xhtml, new custom, , 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)

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

• 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- • 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