YUI The Elephant In The Room

Slideshow Transcript

1. Slide 1: YUI – The Elephant in the room Christian Heilmann and Nate Koechley UK Open Hack Day – London – 16th June 2007 cheil@yahoo-inc.com & natek@yahoo-inc.com & creative commons by: 3.0
2. Slide 2: Following is a transcript of a chat I had a week before I joined Yahoo! a bit over a year ago. I had just finished writing my book on JavaScript.
3. Slide 3: [chris] Hey, I took the job at Yahoo in London! [friend] Congrats, so much for you coding. I guess now it is all YUI for you. [chris] Nah, I honestly haven’t done much with it, but what I saw seems a bit bloated, I guess for most of the stuff I will code my own scripts. It is an OK library, but I am not convinced.
4. Slide 4: Now I am standing here, talking to you about the YUI and why it is a good thing. What happened?
5. Slide 5: To: Mechanical Turk Subject: I can has beat-up for Chris?
6. Slide 6: To: Mechanical Turk Subject: I can has beat-up for Chris?
7. Slide 9: Pragmatism
8. Slide 10: Let me show you some of the things I spend money on…
9. Slide 12: This is our third Henry, … the first … lasted five years, the only reason it went was because it was used and abused but still worked. The second lasted about ten years went for the same reason as the first. Our last Henry was a bit of a disappointment it blew up after fifteen years but we have still purchased another one.
10. Slide 14: • Air cushioned • Resistant to – Oil – Fat – Acid – Petrol – Alkali • Steel Toes Perfect to wear on the tube
11. Slide 15: • And this is what the YUI is. – Industrial-strength solutions for every day problems – If it works for our web sites it should work for you (or do you have more users?).
12. Slide 16: • Using the YUI also means another, very important step towards producing big products. – It takes the random element out of web development. • Normally we have the following scenario:
13. Slide 17: HKR Prod 1 1 •Own conventions •Own testing methods •Own environment •Own coding style •Own sense of who uses the product
14. Slide 18: HKR Prod 2 1 •Own conventions •Own testing methods •Own environment •Own coding style •Own sense of who uses the product
15. Slide 19: HKR Prod 3 1 •Own conventions •Own testing methods •Own environment •Own coding style •Own sense of who uses the product
16. Slide 20: Prod 1
17. Slide 21: HKR 1 YUI HKR Prod Magic! 2 1 HKR 3
18. Slide 22: • YUI allows simple collaboration by enforcing a strict namespace. • This is what I considered “bloated” until I realized the benefits of it. • Namespacing of the different YUI components and clever namespacing of your objects ensures readability.
19. Slide 23: YAHOO.util.Dom.addClass YAHOO.util.Event.getTarget YAHOO.widget.Tooltip YAHOO.util.DragDrop YAHOO.util.Connect.isCallInProgress All do what they say on the tin.
20. Slide 24: • By coming up with your own namespace and sticking to it, you ensure that your code will play well with others. • You can cut your applications up into several components and develop them in parallel without interfering. • File size of your scripts can be easily reduced by minifying and gzipping the scripts – long names pack nicely.
21. Slide 25: • The best thing: – Readable method names = half a good comment – Agreed namespace = understanding what your predecessors have done.
22. Slide 26: • The next best thing: – Submitted hacks should either use a BBC or a Yahoo! API.
23. Slide 27: • The next best thing: – Submitted hacks should either use a BBC or a Yahoo! API. yahoo-min.js is 1kb, gives you the namespace and satisfies this rule :-)
24. Slide 28: HKR Prod 1 1
25. Slide 29: HKR Prod 1 1 The INTERNETS
26. Slide 30: DA DAH DUUUUUMMMM… HKR Prod 1 1 The INTERNETS
27. Slide 31: • The INTERNETS are scary, as they mean: – Different Browsers – Different Assistive Technology – Different Operating Systems – Different Configurations – Different Hardware
28. Slide 32: 80% 20% HKR Prod 1 1 The INTERNETS
29. Slide 33: HKR HKR HKR HKR HKR 1 2 3 4 5 Prod 1
30. Slide 34: Secret YUI lair! HKR HKR HKR HKR HKR 1 2 3 4 5 Prod 1
31. Slide 35: Secret YUI lair! HKR HKR HKR HKR HKR 1 2 3 4 5 Prod 1 Battle And Tame The Internets!
32. Slide 36: Secret YUI lair! HKR HKR HKR HKR HKR 1 2 3 4 5 Several hundreds in X HKR world-wide locations
33. Slide 37: And now we need you to help us make this even better.
34. Slide 38: • Photo Credits Numatic Henry http://www.flickr.com/photos/nicohogg/516490143/ Docs http://www.flickr.com/photos/davetron5000/276535342/ Elephant http://www.flickr.com/photos/euromagic/318774561/ Vic20 Game http://www.flickr.com/photos/lifeontheedge/84913291/ Chris and the babes: http://www.flickr.com/photos/72169999@N00/348839862/ Nate http://www.flickr.com/photos/freshelectrons/400135496/ Spaghetti http://www.flickr.com/photos/hikikomori/155256307/ Kitten http://www.flickr.com/photos/miller-lowe/346191736/ Puppy http://www.cuteoverload.com
35. Slide 39: YUI Goodies Industrial strength cross-browser JavaScript and CSS, free for all
36. Slide 40: The YUI Team
37. Slide 41: “You bring the skills. We bring the ingredients.”
38. Slide 42: What’s YUI got?
39. Slide 43: The Yahoo! User Interface Library [idioms] Tree Control AutoComplete Slider TabView Menu Control Calendar Control [compounds] Logger Control DHTML Windowing Animation Drag & Drop [primitives] Connection Event Utility Manager (Ajax) Dom Collection CSS Reset, Fonts, Grids
40. Slide 44: DOM Utility • Positioning HTML Elements • Get/set Styles • Client/Viewport/Doc Size • Manage Class Names • Regions & points
41. Slide 45: Event Utility • Attach to one or many • Auto-deferral if nodes aren’t yet available; execute onAvailable • Auto scope correction (or assign) • Can send objects • Automatic listener cleanup • Custom Events (pub/sub)
42. Slide 46: Animation • Beautiful API • Size/opacity/color/position/etc • Bezier math
43. Slide 47: Good for spicing up hacks: • Slider • AutoComplete • DragDrop • Menu / Tabs / Trees • Container • Reset / Fonts / Grids
44. Slide 48: But wait, there’s more!
45. Slide 49: Design Patterns
46. Slide 50: Design Patterns
47. Slide 51: What happens when the mouse is pressed on the draggable object but dragging has not initiated? Storyboard Template for Drag & Drop
48. Slide 52: A full pantry web services & data + YUI (interface code) + Y design patterns -------------------- = tasty hack goodness
49. Slide 53: Getting Started
50. Slide 54: Wide-open BSD License
51. Slide 55: Free hardcore hosting http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js http://yui.yahooapis.com/2.2.2/build/event/event-min.js http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/res
52. Slide 57: Three Versions of each File http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
53. Slide 58: À la carte Dependencies
54. Slide 60: Download full dist with all docs & examples http://developer.yahoo.com/yui/dow nload/
55. Slide 61: Landing Page Quick Start Guides
56. Slide 62: Complete API Documentation
57. Slide 63: Examples and Tutorials
58. Slide 64: The YUI Cheat Sheets
59. Slide 65: ydn-javascript list
60. Slide 66: YUI Logger and Firebug • alert(“stop the insanity”); • YAHOO.log(“There IS a better way”); • Debug with Logger or Firebug directly.
61. Slide 67: Things we’re proud of: • Good page citizens • We like javascript • We care about accessibility and browser support
62. Slide 68: Graded Browser Support
63. Slide 69: Senior Architectural Leadership • Douglas Crockford: – “Yoda of lambda programming and JavaScript” according to Brendan Eich (Inventor of JavaScript) • Rasmus Lerdorf – Father of PHP
64. Slide 70: Now Hack! And come find me anytime.