YUI The Elephant In The Room

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    9 Favorites & 3 Groups

    YUI The Elephant In The Room - Presentation Transcript

    1. YUI – The Elephant in the room Christian Heilmann and Nate Koechley UK Open Hack Day – London – 16 th June 2007 [email_address] & [email_address] & creative commons by: 3.0
      • 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.
      • [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.
      • Now I am standing here, talking to you about the YUI and why it is a good thing.
      • What happened?
    2. To: Mechanical Turk Subject: I can has beat-up for Chris?
    3. To: Mechanical Turk Subject: I can has beat-up for Chris?
    4.  
    5.  
      • Pragmatism
      • Let me show you some of the things I spend money on…
    6.  
      • 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.
    7.  
      • Air cushioned
      • Resistant to
        • Oil
        • Fat
        • Acid
        • Petrol
        • Alkali
      • Steel Toes
        • Perfect to wear on the tube
      • 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?).
      • 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:
    8. HKR 1 Prod 1
      • Own conventions
      • Own testing methods
      • Own environment
      • Own coding style
      • Own sense of who uses the product
    9. HKR 2 Prod 1
      • Own conventions
      • Own testing methods
      • Own environment
      • Own coding style
      • Own sense of who uses the product
    10. HKR 3 Prod 1
      • Own conventions
      • Own testing methods
      • Own environment
      • Own coding style
      • Own sense of who uses the product
    11. Prod 1
    12. HKR 2 Prod 1 HKR 3 HKR 1 YUI Magic!
      • 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.
        • 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.
      • 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.
      • The best thing:
        • Readable method names = half a good comment
        • Agreed namespace = understanding what your predecessors have done.
      • The next best thing:
        • Submitted hacks should either use a BBC or a Yahoo! API.
      • 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 :-)
    13. HKR 1 Prod 1
    14. HKR 1 Prod 1 The INTERNETS
    15. HKR 1 Prod 1 The INTERNETS DA DAH DUUUUUMMMM…
      • The INTERNETS are scary, as they mean:
        • Different Browsers
        • Different Assistive Technology
        • Different Operating Systems
        • Different Configurations
        • Different Hardware
    16. HKR 1 Prod 1 The INTERNETS 20% 80%
    17. HKR 1 Prod 1 HKR 3 HKR 2 HKR 4 HKR 5
    18. HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5
    19. HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 Battle And Tame The Internets!
    20. HKR 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 HKR Several hundreds in world-wide locations X
      • And now we need you to help us make this even better.
      • 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
    21. YUI Goodies Industrial strength cross-browser JavaScript and CSS, free for all
    22. The YUI Team
      • “ You bring the skills. We bring the ingredients.”
    23. What’s YUI got?
    24. [primitives] [compounds] [idioms] Connection Manager (Ajax) Event Utility Dom Collection Drag & Drop Animation CSS Reset, Fonts, Grids The Yahoo! User Interface Library Logger Control Menu Control Slider Tree Control Calendar Control AutoComplete DHTML Windowing TabView
    25. DOM Utility
      • Positioning HTML Elements
      • Get/set Styles
      • Client/Viewport/Doc Size
      • Manage Class Names
      • Regions & points
    26. 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)
    27. Animation
      • Beautiful API
      • Size/opacity/color/position/etc
      • Bezier math
    28. Good for spicing up hacks:
      • Slider
      • AutoComplete
      • DragDrop
      • Menu / Tabs / Trees
      • Container
      • Reset / Fonts / Grids
    29. But wait, there’s more!
    30. Design Patterns
    31. Design Patterns
    32. What happens when the mouse is pressed on the draggable object but dragging has not initiated? Storyboard Template for Drag & Drop
    33. A full pantry
      • web services & data
      • + YUI (interface code)
      • + Y design patterns
      • --------------------
      • = tasty hack goodness
    34. Getting Started
    35. Wide-open BSD License
    36. 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/reset-fonts-grids.css
    37.  
    38. Three Versions of each File
      • http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
    39. À la carte Dependencies
    40.  
    41. Download full dist with all docs & examples
      • http://developer.yahoo.com/yui/download/
    42. Landing Page Quick Start Guides
    43. Complete API Documentation
    44. Examples and Tutorials
    45. The YUI Cheat Sheets
    46. ydn-javascript list
    47. YUI Logger and Firebug
      • alert(“stop the insanity”);
      • YAHOO.log(“There IS a better way”);
      • Debug with Logger or Firebug directly.
    48. Things we’re proud of:
      • Good page citizens
      • We like javascript
      • We care about accessibility and browser support
    49. Graded Browser Support
    50. Senior Architectural Leadership
      • Douglas Crockford:
        • “ Yoda of lambda programming and JavaScript” according to Brendan Eich (Inventor of JavaScript)
      • Rasmus Lerdorf
        • Father of PHP
    51. Now Hack! And come find me anytime.

    + Christian HeilmannChristian Heilmann, 3 years ago

    custom

    7025 views, 9 favs, 3 embeds more stats

    Nate Koechley and Chris Heilmann's YUI presentation more

    More Info

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version
    • Total Views 7025
      • 6644 on SlideShare
      • 381 from embeds
    • Comments 0
    • Favorites 9
    • Downloads 210
    Most viewed embeds
    • 346 views on http://icant.co.uk
    • 32 views on http://www.wait-till-i.com
    • 3 views on http://www.techiegyan.com

    more

    All embeds
    • 346 views on http://icant.co.uk
    • 32 views on http://www.wait-till-i.com
    • 3 views on http://www.techiegyan.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories