1. 1 The Yahoo! User Interface Library (YUI) Nate Koechley nate@koechley.com http://nate.koechley.com/blog Refresh 06 Orlando, Florida 2006.11.17

2. 2 YUI http://www.flickr.com/photos/cdm/50688378/in/set-1002108/

3. 3 The Yahoo! Developer Network Utility and Data Web Services Design Patterns Library Browser Support Guidelines Yahoo! User Interface Library (YUI)

4. 4 The Yahoo! Developer Network Ecosystem: Utility and Data Web Services Services Browser Based Authenticatio (BBAuth)Browser Based Authenticatio (BBAuth), Answers, Local, Maps, Photos, Search, Shopping, Travel, Utilities, (Mail coming soon)Answers LocalMapsPhotosSearchShoppingTravel Utilities Hackable Sites del.icio.usdel.icio.us, Flickr, Upcoming.org, WebjayFlickrUpcoming.orgWebjay Burnable Feeds FinanceFinance, HotJobs, RSS Feeds, Traffic, WeatherHotJobsRSS FeedsTrafficWeather SDKs MessengerMessenger, Music, Search Developer Kit, WidgetsMusicSearch Developer KitWidgets Developer Centers JavaScriptJavaScript, Flash,.NET, PHP, Python, RubyFlash.NETPHPPythonRuby

5. 5 The Yahoo! Developer Network Ecosystem: Design Patterns

6. 6

7. 7

8. 8 The Yahoo! Developer Network Ecosystem: Browser Support Guidelines

9. 9

10. 10

11. 11 Why?

12. 12 changing seasons on the web http://flickr.com/photos/getthebubbles/107463768/

13. 13 People expect less online.

14. 14 But we are online…

15. 15 … and tied to the browser.

16. 16 So we must level the playing field. http://www.flickr.com/photos/probek/44480413/

17. 17 how?

18. 18 it takes 2 things http://flickr.com/photos/latitudes/104286031/

19. 19 We must improve our technology

20. 20 Data Transport data: custom, xml, json behavior: js mixed: new xhtml, (X)HTML DOM JavaScript Specification Implementation Defects [ Theory / Practice ] BOM API DOM API CSS server Macintosh SafariFirefoxOpera Windows Opera IE5, 6, 7 Firefox Linux, Unix, Mobile 10,000+ UAs

21. 21 Data Transport data: custom, xml, json behavior: js mixed: new xhtml, (X)HTMLDOM JavaScript Specification Implementation Defects [ Theory / Practice ] BOM API DOM API CSS server Macintosh SafariFirefoxOpera Windows Opera IE5, 6, 7 Firefox Linux, Unix, Mobile 10,000+ UAs knowledge areas:7 dimensions:x 4 platforms:x 3 browsers per platform:x 4 rendering modes:x 2 =672

22. 22 (we need a robust platform!)

23. 23 and raise expectations

24. 24 (so users engage and explore with confidence!)

25. 25 http://flickr.com/photos/niznoz/81087641/ DESIGN DEVEL

26. 26 {design} from Implementation Models to Mental Models

27. 27 {development} from Heterogeneous Environments to Compelling and Consistent APIs

28. 28 Nuts and Bolts http://flickr.com/photos/snood/129758197/

29. 29 Six commitments to the platform

30. 30 1] Meet properties where they are today. Facilitate incremental enhancement (“Transitional Internet Applications”)

31. 31 2] Provide a broad, inclusive platform for Web 2.0’s “Rich Internet Application” development (a la carte, not framework)

32. 32 3] Extensible and adaptive, to meet the needs of our diverse product portfolio (lots of different contexts)

33. 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

34. 34 5] Support our scale and scope (industrial grade)

35. 35 6] Be responsive and accountable to the community of designers and engineers (your P1 bugs are our P1 bugs)

36. 36 Learn from Desktop History Adapted from Alan Cooper’s “About Face 2.0” Book

37. 37 [primitives] [compounds] [idioms] Connection Manager (Ajax) Event Utility Dom Collection Drag & Drop Animation Logger Control Menu Control Slider TreeView Calendar Control AutoComplete The Yahoo! User Interface (YUI) Library DHTML Windowing CSS Reset, Fonts, Grids Loader TabView

38. 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

39. 39 YUI Event Event –Flexible batch assignment –onAvailable and onContentReady –Scope correction and assignment –Automatic cleanup –Custom Events

40. 40 YUI Event’s Custom Events var myEvent = new YAHOO.util.CustomEvent('myEvent'); myEvent.subscribe(function() { alert('event fired'); }); myEvent.fire();

41. 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

42. 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

43. 43 YUI Container Family

44. 44 Drag and Drop It’s easy, sorta, but easy to get wrong too Point, Region, Multiple Handles, !Handles Exposes 15 interesting moments

45. 45 Storyboard Template for Drag & Drop What happens when the mouse is pressed on the draggable object but dragging has not initiated?

46. 46 YUI Logger and Firebug alert(“stop the insanity”); YAHOO.log(“There IS a better way”); Debug with Logger or Firebug directly.

47. 47 CSS Grids Page Widths Template Presets Nesting Grids Together, 200 layouts for 2kb.

48. 48 About YUI Page Weight http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/

49. 49 À la carte Dependencies

50. 50 Lightweight CSS Foundation

51. 51 Why Open Source?

52. 52 What about the timeline? 2005, January –Initial development –One-person team 2005, July –Initial internal release 2006, February 13 th –Open-source release –#1 on Delicious, Digg, Techmeme –36,000 downloads 2006, September 18 th –3000 th member on ydn-javascript ydn-javascript 2006, November 7 th –Linux Journal Editor’s Choice Award: Best Software LibraryBest Software Library –300k downloads 2006, November 13 th –Current release –9 person team

53. 53 What about the namespace? (because I really like $ )

54. 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/

55. 55 What’s in the distribution? 100s of files –All examples –All documentation –All development builds –All production builds –All minimized builds

56. 56 Yahoo! is powered by the exact same bits we offer to you.

57. 57 What is the license? The most-open there is: BSD

58. 58 Who’s Using It?

59. 59 External Implementations Wall Street Journal Technorati IndyCar.com SugarCRM SmugMug PayPal eBay Yuriz PowerReviews.com Madonet You?

60. 60 Documentation?

61. 61 Landing Page Guides

62. 62 Complete API Documentation

63. 63 Examples and Tutorials

64. 64 The YUI Cheat Sheets

65. 65 Team Blog

66. 66 Is there a community? http://yuiblog.com http://groups.yahoo.com/group/ydn-javascripthttp://groups.yahoo.com/group/ydn-javascript http://www.jackslocum.com/yui/ YUI.exthttp://www.jackslocum.com/yui/ http://blog.davglass.com/ YUI.addonshttp://blog.davglass.com/ SourceForge

67. 67 Jack Slocum

68. 68 How is it different from GWT? We believe in JavaScript.

69. 69 Thanks! nate.koechley.com/talks/2006/11/refresh06/YUI/ nate.koechley.com/talks/2006/11/refresh06/YUI/ Nate Koechley: –nate@koechley.com | natek@yahoo-inc.comnate@koechley.comnatek@yahoo-inc.com –http://nate.koechley.com/bloghttp://nate.koechley.com/blog Yahoo! Developer Network & Y! UI Blog: –http://developer.yahoo.comhttp://developer.yahoo.com –http://developer.yahoo.com/yuihttp://developer.yahoo.com/yui –http://developer.yahoo.com/ypatternshttp://developer.yahoo.com/ypatterns –http://www.yuiblog.comhttp://www.yuiblog.com –http://groups.yahoo.com/group/ydn-javascripthttp://groups.yahoo.com/group/ydn-javascript

70. 70 We’re Hiring! Josie Aguada: jaguada@yahoo-inc.comjaguada@yahoo-inc.com Usual suspects: JavaScript, PHP, CSS, HTML, ActionScript…