Quick Upload

Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer.To install it, go here
Post to Twitter Post to Twitter
Share on Facebook
Myspace Hi5 Friendster Xanga LiveJournal Facebook Blogger Tagged Typepad Freewebs BlackPlanet gigya icons

YUI The Elephant In The Room

from cheilmann, 2 years ago Add as contact

5233 views | 0 comments | 9 favorites | 3 embeds (Stats)

Desc: Nate Koechley and Chris Heilmann's YUI presentation on Open Hack Day London 2007

Embed customize close
 

More Info

This slideshow is Public
CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Views: 5233 Comments: 0 Favorites: 9 Downloads: 193

View Details: 4852 on Slideshare 381 from embeds
Most viewed embeds (Top 5): More
Flagged as inappropriate Flag as inappropriate

Flag as inappropriate

Select your reason for flagging this slideshow as inappropriate.

If needed, use the feedback form to let us know more details.

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.