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