YUI The Elephant In The Room

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?

To: Mechanical Turk Subject: 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:

HKR 1 Prod 1
Own conventions
Own testing methods
Own environment
Own coding style
Own sense of who uses the product

HKR 2 Prod 1
Own conventions
Own testing methods
Own environment
Own coding style

HKR 3 Prod 1
Own conventions
Own testing methods
Own environment
Own coding style

Prod 1

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

HKR 1 Prod 1

HKR 1 Prod 1 The INTERNETS

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

HKR 1 Prod 1 The INTERNETS 20% 80%

HKR 1 Prod 1 HKR 3 HKR 2 HKR 4 HKR 5

HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5

HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 Battle And Tame The Internets!

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

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

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

What happens when the mouse is pressed on the draggable object but dragging has not initiated? Storyboard Template for Drag & Drop

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

Getting Started

Wide-open BSD 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.

http://icant.co.uk	346
http://www.wait-till-i.com	32
http://www.techiegyan.com	3
http://www.slideshare.net	1

YUI The Elephant In The Room

by Christian Heilmann

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 382

Statistics

YUI The Elephant In The Room Presentation Transcript