The Yahoo User
Interface Library
(YUI)
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
Web Directions North, Denver, Colorado, February 2009

Let’s take a walk...
...on the client side

The client side is where
strange things happen.

Browsers render in
fascinating and totally wrong
ways.

Random code from dubious
sources interferes with your
godlike, clean and high
quality code.

...and you fix more than you
develop.

The web is a total mess!

The reason is that things
seemingly work.

However, you are not the
web and neither is your
computer.

To make things work for
Yahoo we needed to find a
way to abstract these issues
away from us.

And this is why we built the
YUI.

It brings order to the chaos.

What chaos?

JavaScript is a part of a larger
world.
This is not the
copyrighted
photo you are
looking for

Browser
Interaction with other
technologies (CSS, Markup)
Interaction with other
scripts
Interaction with the
backend

Interaction with the
operating system.
Interaction with the user
(with unknown ability)
Interaction with bad code
(a.k.a. ads)

YUI deals with all of this.

Because it has to – we built it
for industrial (Yahoo)
strength.

The first thing we needed to
get are some sensible
constraints.

We did this with the Graded
Browser Support:
http://developer.yahoo.com/
yui/articles/gbs/

This gave us a defined
playground, and we were able
to start tackling the other
issues.

The first thing to tackle before
you can even hope to build
interfaces are browser
differences in CSS.

There is no such thing as an
“unstyled page”.

There is no such thing as an
“unstyled page”.

Good luck working around
that one.

Unless you use reset.css
http://developer.yahoo.com/
yui/reset/

Starting with a blank canvas
=
good.

What about typography?

Make it work across browsers
with fonts.css
http://developer.yahoo.com/
yui/fonts/

Even create layouts with
grids.css
http://developer.yahoo.com/
yui/grids/

Grids gives you an amazingly
large amount of options and
layout permutations.

YUI comes with a lot of tools
to gain knowledge about what
is happening under the hood
of your application.

YUI logger gives you a cross-
browser console to show
values.

Death to alert()!

You can even include the
logger on the fly with a
bookmarklet.

http://blog.rajatpandit.com/sandbox/yuilogger/index.html

If you need even more
control, there is the YUI
profiler.
http://developer.yahoo.com/
yui/profiler/

And the YUI test framework
for test driven development.
http://developer.yahoo.com/
yui/yuitest/

On a code level, YUI comes
out-of-the-box with
namespacing.

Which – if used correctly –
keeps large amounts of code
readable and maintainable.

YAHOO.lang also comes with a
lot of validation methods to
ensure things are what they
are.

All in all YUI is a good choice
for large, distributed teams.

Built on agreed standards
Separated into modules each
dealing with one task (Core,
DOM, Event,Animation, IO...)
Constant reporting of what is
going on
Own debugging environment

YUI is a framework to build
working web applications.

It allows you to create
applications using tested and
working widgets that extend
what HTML gives us.

Interface Widgets
AutoComplete DataTable
Button Layout
Calendar Menu
Rich Text
Charts
TabView
Container

Everything is fully
documented.

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

And there are almost 300
examples to look at.

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

The controls are driven by
custom events to allow for
extending and monitoring
them.

All YUI components come as a
debug version which log
everything that is going on to
the logger.

All in all YUI allows you to
build web interfaces without
having to know all the pain
that goes on in the browser
world.

What does the future hold?

YUI3
http://developer.yahoo.com/
yui/3/

Include on demand
Multiple sandboxed
instances in a page
Modularity on CSS level (per
element reset)
Every event is a custom
event

Screen reader compatible
widgets.
Widgets extendable with
plugins
Framework (SDK) for own
compatible widgets.

The elevator lift pitch
YUI is the system that Yahoo uses to
build its web sites. It is constantly tested
to work for the largest amount of users,
free, open source and covers everything
from design patterns to out-of-the-box
widgets. It is modular and you can use
only what you need. You can either host
it yourself or get it from a network of
distributed servers.

http://isithackday.com/hacks/delhi/

THANKS!
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8