The document provides an overview of the YUI library. It discusses: 1) What YUI is and its main components like the JavaScript library, CSS foundation, documentation tools, build tools, testing tools, and more. 2) Some of the core utilities included in YUI like Event, Node, YUI Global Object, Array, mix, extend, augment, Object, merge, clone, and Module. 3) How to use YUI features like the loader, events, DOM events, custom events, Node, IO, Transition, and infrastructure components like Base, Attributes, Plugin, and Widget.

1. Get Started with YUI
Adam Lu
http://adamlu.com/
@adamlu
Frontend Engineer

2. What is YUI?
YUI = Yahoo! User Interface Library
http://yuilibrary.com/

4. YUI Library Project
• JavaScript library
• CSS foundation
• Documentation tools
• Build tools
• Testing tools
• Server side delivery tools
• Developer education

5. http://www.mindmeister.com/149577110/yui-library-project

6. YUI Core & Utilities
• Event • Anim
• Node • History
• YUI Global Object • IO
• Transition
• …

7. YUIGlobalObject
• YUI.add
• YUI(config).use()
• YUI_config
• YUI.GlobalConfig
• YUI.applyConfig
• Instance Config
YUI({
debug: true,
combine: true,
comboBase: 'http://mydomain.com/combo?',
root: 'yui3/'
}).use('node', function (Y) {});

8. YUIGlobalObject
• Y.Lang • Y.UA
Y.Lang.isArray Y.UA.android
Y.Lang.isBoolean Y.UA.ie
Y.Lang.isFunction Y.UA.ios
Y.Lang.isNumber Y.UA.ipad
Y.Lang.isObject Y.UA.iphone
Y.Lang.isString Y.UA.ipod
Y.Lang.now Y.UA.mobile
Y.Lang.sub Y.UA.opera
Y.Lang.trim Y.UA.os
Y.UA.safari
Y.UA.webkit

9. Y.Array
• dudupe • map
• each • numericSort
• every • partition
• filter • reduce
• find • reject
• grep • some
• hashindexOf • test
• Invoke • unique
• lastIndexOf • zip

10. Y.mix
mix ( receiver supplier [overwrite=false] [whitelist] [mode=0] [merge=false] )
Mixes supplier's properties into receiver.
0: Default. Object to object.
1: Prototype to prototype.
2: Prototype to prototype and object to object.
3: Prototype to object.
4: Object to prototype.
Y.mix(AttributeEvents, EventTarget, false, null, 1);
Y.mix(Attribute, Y.AttributeEvents, true, null, 1);
Y.mix(Base, Attribute, false, null, 1);
Y.aggregate = function(r, s, ov, wl) {
return Y.mix(r, s, ov, wl, 0, true);
};

11. Y.extend
Create Class Hierarchies with extend
Y.extend = function(r, s, px, sx) { function Bird(name) {
var sp = s.prototype, rp = Y.Object(sp); this.name = name;
r.prototype = rp; }
rp.constructor = r;
r.superclass = sp; Bird.prototype.flighted = true; //
// add prototype overrides Default for all Birds
if (px) {
Y.mix(rp, px, true);
} function Chicken(name) {
// add object overrides Chicken.superclass.constructor.call
if (sx) { (this, name);
Y.mix(r, sx, true); }
} Y.extend(Chicken, Bird);
return r; Chicken.prototype.flighted = false;
};

12. Y.augment
augment ( receiver supplier [overwrite=false] [whitelist] [args] )
Augments the receiver with prototype properties from the supplier.
The receiver may be a constructor function or an object. The
supplier must be a constructor function.
Y.augment(TreeNode, Y.EventTarg function Foo() {}
et, true, null, { Foo.prototype.doSomething = function () {};
emitFacade: true, function Bar() {}
prefix: 'tree' Y.augment(Bar, Foo);
}); varb = new Bar();
if (binstanceof Bar) {} // true
if (binstanceofFoo) {} //false

13. Y.Object
Prototype inheritance
Y.Object = Lang._isNative(Object.create) ? function (obj) {
return Object.create(obj);
} : (function () {
function F() {}
return function (obj) {
F.prototype= obj;
return new F();
};
}());

14. Y.merge
Returns a new object containing all of the properties of all the supplied objects. The
properties from later objects will overwrite those in earlier objects.
var set1 = { foo : "foo" };
var set2 = { foo : "BAR", bar : "bar" };
var set3 = { foo : "FOO", baz : "BAZ" };
var merged = Y.merge(set1, set2, set3);
//{foo => FOO, bar => bar, baz => BAZ}

15. Y.clone
clone ( o safe fc owner cloned )
Deep object/array copy.
yeach(o, function(v, k) {
if (k == 'prototype') {
// skip the prototype
// } else if (o[k] === o) {
// this[k] = this;
} else {
this[k] =
Y.clone(v, safe, f, c, owner || o, marked);
}
}, o2);

16. Module
YUI.add("mywidget", function(Y) {
function MyWidget(){}
Y.namespace(‘MyWidget’) = MyWidget;
｝, "1.0.0", {requires:["widget", "substitute"]});
YUI.use(‘mywidget’, function(Y){
new Y.MyWidget();
});
A module's add() callback isn't executed until that module is attached to a
YUI instance via use(). Each time a module is attached via use(), the module's
add() callback will be executed, and will receive as an argument the same YUI
instance that will later be passed to the use() callback.

17. Loader
• Built into YUI Global Object
• Self-aware dependency management
• Asynchronous combo-loaded from CDN
• Sandboxed Code
• Dynamic Loading withuse() method
YUI().use('calendar', function (Y) {
Y.use('autocomplete', function () {
// The autocomplete module is available here, and the calendar module
});
});

18. Event
• Dom Events
• Custom Events
• Event API
• Custom Events more DOM like
• “After” subscriptions
• Unified subscription

19. DOM Events
button.on('click', function (e) {
e.target.get('id'); // => 'readygo'
e.preventDefault();
e.stopPropagation();
});
button.detach("click", handleClick);
Y.one('#items').delegate('click', handleClick, 'button.remove’, context);
Y.Event.define("tripleclick", {});
button.on('tripleclick', omgYayCantClickEnough);

20. Custom Events
Y.augment(MyClass, Y.EventTarget);
var instance = new MyClass();
instance.on('addItem', function (e) {
alert("Yay, I'm adding " + e.item);
});
instance.add('a new item');
Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = {
on: function (type, fn, ctx) {
var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65],
...
node.on("keydown", _checkProgress);
return detachHandle;
}
node.on(konami, addUnicorns);

21. Node
// Use Y.one( [css selector string] )
var node = Y.one('#main');
node.one(".hello").setContent("<h1>Hello, <em>World</em>!</h1>");
node.addClass('highlight');
vardoneTasks = Y.all('#tasklist .completed');
doneTasks.each(function (taskNode) {
taskNode.transition({ opacity: 0 }, function () {
completedTasklist.appendChild(this);
});
});
http://jsfiddle.net/adamlu/zKSZq/

22. IO
• io-base: base class used for standard XHR
• io-xdr: extension for cross-domain requests
• ……
varcfg, request;
cfg = {
method: 'POST',
arguments: { 'start' : 'bar' },
on: {
start: function(o){},
complete: function(o){
console.log(o.responseText);
}
}
};
request = Y.io(uri, cfg);

23. Transition
YUI().use('transition', function (Y) {
Y.one('#demo').transition({
duration: 1,
height:0,
width: {
delay: 1,
duration: 0.5,
value: 0
}
}, function() {
Y.log('end');
});
});
http://jsfiddle.net/adamlu/RE6dF/

24. YUI Infrastructure
http://yuilibrary.com/yui/infrastructure/

25. YUI Infrastructure

26. Base
function MyClass(config) {
// Invoke Base constructor, passing through arguments
MyClass.superclass.constructor.apply(this, arguments);
}
MyClass.NAME = "myClass";
MyClass.ATTRS = {
A:{
// Attribute "A" configuration
},
};
Y.extend(MyClass, Y.Base, {
initializer: function(cfg) {},
destructor : function() {},
...
});
App = Y.Base.create('app', Y.Base, [View, Router, PjaxBase], {});

27. Attributes
function MyClass(userValues) {
varattributeConfig = {
attrA : {
// ... Configuration for attribute "attrA" ...
},
attrB : {
// ... Configuration for attribute "attrB" ...
}
};
this.addAttrs(attributeConfig, userValues);
};
Y.augment(MyClass, Y.Attribute);
varo = new MyClass({
attrA:5
});
o.set("attrB", "Hello World!”)

29. Plugin
function AnchorPlugin(config) {this._node = config.host;}
AnchorPlugin.NS = "anchors"
AnchorPlugin.prototype = {
disable: function() {}
};
var container = Y.one("div.actions");
container.plug(AnchorPlugin);
container.anchors.disable();
Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {
initializer: function(config) {
this.afterHostEvent('render', this.insertCornerElements);
this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible);
},
_uiAnimSetVisible : function(show) {
return new Y.Do.Prevent();
}
})
http://yuilibrary.com/yui/docs/overlay/overlay-anim-plugin.html

30. Widget

31. Widget
• Basic Attributes: boudingBox, contentBox, focused…
• Rendering Methods:
init, destroy, render, renderUI, bindUI, syncUI
• Plugins and Extensions
Extensions - A Class Level Concept
Plugins - An Instance Level Concept

32. /* MyWidget class constructor */
function MyWidget(config) {
MyWidget.superclass.constructor.apply(this, arguments);
}
MyWidget.NAME = "myWidget";
MyWidget.ATTRS = {
attrA : {
value: "A”
}
｝
Y.extend(MyWidget, Y.Widget, {
renderUI: function() {｝,
bindUI: function() {｝,
syncUI: function() {｝,
};
varmywidget = new MyWidget();
mywidget.render(‘#container’);

33. App Framework
• MVC-style framework var router = new Y.Router();
router.route(/library/:lib/, function (req) {
• Y.Model var lib = req.params.lib;
if (lib === yui) {
• Y.ModelList Y.log(YUI Library is awesome!);
}
• Y.View });
• Y.Router router.save(/library/yui/);// => YUI Library
is awesome!
• Y.App
• Templating: Y.Handlebars
http://yuilibrary.com/yui/docs/app/app-todo.html

34. App Framework
varusersApp = new Y.App({
views: {
users: { type : Y.UsersView, preserve: true },
user: { type : Y.UserView, parent: ‘users’ }
}
});
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView(users, {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView(user, {model: user}, function (view) {});
});
http://photosnear.me/

35. YUI Gallery

36. Learn More
• http://yuilibrary.com/yui/docs/tutorials
• http://yuilibrary.com/theater/
• http://yuilibrary.com/gallery/
• https://github.com/yui/yui3
• http://www.slideshare.net/drprolix/yui-3-
quick-overview
• http://www.slideshare.net/eferraiuolo/app-
framework-youve-been-wanting-this

37. http://www.amazon.com/YUI-3-Cookbook-Evan-Goer/dp/1449304192