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

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?

To: Mechanical TurkSubject: I can has beat-up for Chris?

To: Mechanical TurkSubject: I can has beat-up for Chris?

Pragmatism

Let me show you some of the things I spend money on…

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.

• 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:

HKR1

Prod1

•Own conventions

•Own testing methods

•Own environment

•Own coding style

•Own sense of who uses the product

HKR2

Prod1

•Own conventions

•Own testing methods

•Own environment

•Own coding style

•Own sense of who uses the product

HKR3

Prod1

•Own conventions

•Own testing methods

•Own environment

•Own coding style

•Own sense of who uses the product

Prod1

HKR2

Prod1

HKR3

HKR1

YUIMagic!

• 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 :-)

HKR1

Prod1

HKR1

Prod1

The INTERNETS

HKR1

Prod1

The INTERNETS

DA DAH DUUUUUMMMM…

• The INTERNETS are scary, as they mean:– Different Browsers– Different Assistive Technology– Different Operating Systems– Different Configurations– Different Hardware

HKR1

Prod1

The INTERNETS

20%

80%

HKR1

Prod1

HKR3

HKR2

HKR4

HKR5

HKR1

Prod1

Secret YUI lair!

HKR3

HKR2

HKR4

HKR5

HKR1

Prod1

Secret YUI lair!

HKR3

HKR2

HKR4

HKR5

Battle And Tame The Internets!

HKR1

Secret YUI lair!

HKR3

HKR2

HKR4

HKR5

HKRSeveral hundreds in world-wide locationsX

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

YUI Goodies

Industrial strength cross-browser JavaScript and CSS,

free for all

The YUI Team

“You bring the skills. We bring the ingredients.”

What’s YUI got?

[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

DOM Utility

•Positioning HTML Elements •Get/set Styles •Client/Viewport/Doc Size •Manage Class Names •Regions & points

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)

Animation

• Beautiful API • Size/opacity/color/position/etc• Bezier math

Good for spicing up hacks:

• Slider• AutoComplete• DragDrop• Menu / Tabs / Trees• Container• Reset / Fonts / Grids

But wait, there’s more!

Design Patterns

Design Patterns

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?

A full pantry

web services & data + YUI (interface code)+ Y design patterns--------------------= tasty hack goodness

Getting Started

Wide-openBSD License

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

Three Versions of each File

http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/

À la carte Dependencies

Download full dist with all docs & examples

http://developer.yahoo.com/yui/download/

Landing Page Quick Start Guides

Complete API Documentation

Examples and Tutorials

The YUI Cheat Sheets

ydn-javascript list

YUI Logger and Firebug

• alert(“stop the insanity”);• YAHOO.log(“There IS a better

way”);

• Debug with Logger or Firebug directly.

Things we’re proud of:

• Good page citizens• We like javascript• We care about accessibility and

browser support

Graded Browser Support

Senior Architectural Leadership

•Douglas Crockford:–“Yoda of lambda programming

and JavaScript” according to Brendan Eich (Inventor of JavaScript)

•Rasmus Lerdorf –Father of PHP

Now Hack!

And come find me anytime.