The Yahoo User Interface Library (YUI) is a JavaScript framework that helps build web applications by abstracting away browser inconsistencies and issues. It includes CSS solutions for layouts and typography, JavaScript utilities, and tested widgets like AutoComplete, DataTable, Button, Calendar, and more. All components are fully documented and have examples to learn from. YUI makes it easier to build interfaces without dealing with browser pain points and allows chaining of animations through custom events.

1. The Yahoo User
Interface Library
(YUI)
Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org
Delhi, India, University Hack Day, January 2009

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

3. The client side is where
strange things happen.

4. Browsers render in
fascinating and totally wrong
ways.

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

6. ...and you fix more than you
develop.

7. The web is a total mess!

8. The reason is that things
seemingly work.

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

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

11. And this is why we built the
YUI.

12. YUI is a framework to build
working web applications.

13. It includes CSS solutions to
create layouts that work
across browsers and allow for
predictable typography.

14. And it takes the pain out of
writing JavaScript.

15. Last but very much not least
it allows you to create
applications using tested and
working widgets that extend
what HTML gives us.

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

18. Everything is fully
documented.

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

20. And there are almost 300
examples to look at.

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

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

24. Say for example you want to
make sure to securely chain
animation sequences...

25. //This is the first animation; this one will
//fire when the button is clicked.
var move = new YAHOO.util.Anim(quot;animatorquot;, {
left: {from:0, to:75}
}, 1);
//This is the second animation; it will fire
//when the first animation is complete.
var changeColor = new YAHOO.util.ColorAnim(
quot;animatorquot;, { backgroundColor:
{from:quot;#003366quot;, to:quot;#ff0000quot;}
}, 1);
//Here's the chaining glue: We subscribe to the
//first animation's onComplete event, and in
//our handler we animate the second animation:
move.onComplete.subscribe(function() {
changeColor.animate();
});

26. //Here we set up our YUI Button and subcribe to
//its click event. When clicked, it will
//animate the first animation:
var start = new YAHOO.widget.Button(quot;startAnimquot;);
start.subscribe(quot;clickquot;, function() {
//reset the color value to the start so that
//the animation can be run multiple times:
YAHOO.util.Dom.setStyle(quot;animatorquot;,
quot;backgroundColorquot;,
quot;#003366quot;);
move.animate();
});

27. //You can also make use of the onStart and onTween
//custom events in Animation; here, we'll log all
//of changeColor's custom events and peek at their
//argument signatures:
changeColor.onStart.subscribe(function() {
YAHOO.log(quot;changeColor animation is starting.quot;,
quot;infoquot;, quot;examplequot;);
});
changeColor.onTween.subscribe(function(s, o) {
YAHOO.log(quot;changeColor onTween firing with these
arguments: quot; + YAHOO.lang.dump(o),
quot;infoquot;, quot;examplequot;);
});
changeColor.onComplete.subscribe(function(s, o) {
YAHOO.log(quot;changeColor onComplete firing with
these arguments: quot; + YAHOO.lang.dump(o),
quot;infoquot;, quot;examplequot;);
});

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

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

30. Built on agreed standards
Separated into modules
each dealing with one task
Constant reporting of what
is going on
Own Debugging
environment

31. Let’s hack using YUI!

32. Step 1: Get the page structure
built for you.

33. http://developer.yahoo.com/yui/grids/builder/

34. Step 2: Get some nice data,
for example photos from
Delhi.

35. http://developer.yahoo.com/yql/console/

36. Step 3: Find a nice way to
display it – for example a
Carousel

37. http://developer.yahoo.com/yui/examples/
carousel/csl_circular.html

38. Step 4: Add tabs for more
content

39. http://developer.yahoo.com/yui/tabview/

40. Step 5: Add a menu for other
pages

41. http://developer.yahoo.com/yui/menu/

42. Step 6: Add a Map!

43. http://developer.yahoo.com/maps/ajax/

44. And...
L
I
A
F

45. http://yuiblog.com/blog/2006/12/14/maps-plus-yui/

46. After you fixed that:

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

48. Of course this is a mashup,
not a hack.

49. It is also not creative at all
and has been done to death!

50. But it shows you how you can
build a working interface

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