Yahoo!Kimo YUI 3: Design and Architecture

Thomas S. ShaYUI

developer.yahoo.com/yui/

YUI Evolved

Faster, Lighter, Smarter

YUI Evolved

Architecture, Lifecycle, Packaging

From YAHOO to YUI()

From

var request = YAHOO.util.Connect.asyncRequest( );

To

var request = Y.io( );

• Protected YUI environment.

• Ability to communicate with other instances.

• Will have explicit versioning support.

From YAHOO to YUI()

YUI().use(“io-base”, function (Y) {

var request = Y.io( );

});

Self-Completing

YUI().use("anim“, function(Y){ });

• Optimal loading strategy.

• Provides dependency ordering and resolution.

• Makes discrete, functional modules practical.

Protected

Add “Module A” to a page<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">

<script>

YUI().use("overlay", function(Y) {

Y.on("click", function(){

new Y.Overlay({...}).render();

}, "#button");

});

</script>

Protected, again

Now add “Module B"

<script src=“../3.0/build/overlay/overlay-min.js">

<script>

YUI().use("overlay", function(Y) {

new Y.Overlay({...}).render();

});

</script>

Self-Populating

Loading the Animation module

<script src="yui-min.js">

<script>

YUI().use("anim", function(Y) { });

</script>

Reconciling Dependencies

<script src="oop-min.js">

<script src="event-min.js">

<script src="attribute-min.js">

<script src="base-min.js">

<script src="dom-min.js">

<script src="node-min.js">

<script src="anim-min.js">

Yahoo! CDN and Combo-Handling

<script src="http://yui.yahooapis.com/combo?oop-min.js&event-min.js...">

From Module to Sub-Module

io : All io functionality (7.4K)

io-base : Core XHR functionality (3.3K)

io-form : Form serialization (1.0K)

io-queue : Transaction queue (0.7K)

io-upload : File upload transport(1.7K)

io-xdr : Cross domain transport(0.7K)

YUI().use("io-base", function(Y){ })YUI().use("io-xdr", function(Y){ })YUI().use("io", function(Y){ })

YUI IO – Size Analysis

0

2

4

6

8

10

12

K-S

ize

(min

ifie

d,

no

n-g

zip

)

YUI 2 YUI 3

io-xdr

io-upload

io-queue

io-form

io-base

connection

Plug-Ins and Extensions

The Flexibility To Mix and

Match Features

Overlay

Tooltip

myOverlay

Positioning

Adv. Positioning

Shimming/Stacking

Header/Body/Footer

Animation

IO Binding

Extensions: Class-based Flexibility

Create an Overlay Class

Y.Overlay = Y.Base.build("overlay", Y.Widget, [ Widget-Position, // Positioning Widget-Position-Ext, // Adv. Positioning Widget-Stack, // Shim/Stack Support Widget-StdMod // Header/Body/Footer]);

Extensions: Reuse

Reuse only the extensions desired for Tooltip

Y.Tooltip = Y.Base.build("tooltip", Y.Widget, [ Widget-Position, // Positioning Widget-Stack // Shim/Stack Support]);

Plug-in: Instance-based Flexibility

Instance of Overlay, adding io support

var ioOverlay = new Y.Overlay(...);

ioOverlay.plug(Y.OverlayIOPlugin, { url: "http://host.foo.com/getOverlayContent"});

ioOverlay.io.refreshContent();

Plug-in: Instance-based Override

Instance of Overlay, adding Animation Support

var animOverlay = new Y.Overlay(...);animOverlay.plug(Y.WidgetAnimPlugin);

animOverlay.show();animOverlay.hide();

• Event Facades

• On and after moments for aspect.

• Default Behavior (preventDefault)

• Event Bubbling (stopPropagation)

• Detach Handles

The enhanced Custom Event system is anintegral part of YUI 3. Its goal is to be as lightweight as possible, allowing for highly decoupled code.

Custom Events

Event Façades

// DOM EventlinkNode.on("click", function(e) {

if (!e.target.hasClass("selector")) {e.preventDefault();

}});

// Custom Eventslider.on("valueChange", function(e) {

if (e.newVal < 200) {e.preventDefault();

}});

Event Aspect in YUI 2

// Publishershow : function() { if (this.fire("beforeShow")) { YAHOO.util.Dom.removeClass(node, "hidden");

this.fire("show"); }}

// Subscriberoverlay.subscribe("beforeShow", function(t, args) { if (!taskSelected) { return false; }}

overlay.subscribe("show", function(t, args) {...});

Event Aspect in YUI 3

// Publishershow : function() { this.fire("show");}

_defaultShowFunction : function(e) { node.removeClass("hidden");}

// Subscriberoverlay.on("show", function(e) { if (!taskSelected) { e.preventDefault(); }}

overlay.after("show", function(e) { });

Event Flow: On -> Default -> After

ON

ON

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation()e.preventDefault()

e.preventDefault()e.stopImmediatePropagation()

Bubbling: Delegation Beyond the DOMMenu.prototype = { addItem : function(menuItem) { var menu = this;

menuItem.addTarget(menu); }, initializer : function() { this.on("menuitem:select", this._itemSelect); }}

menu.getItem(2).on("select", function(e) { // Handle select for item 2, don’t bubble to Menu e.stopPropagation(); ...}

Event Bubbling: Delegation Beyond the DOM

MenuMenuItem

Event Flow : Bubbling

ON

ON

Default

After

After

After

this.fire("menuitem:select");

ON

Default

After

After

e.stopPropagation()

// YUI 2overlay.on("show", myShowHandler, myApp, true);overlay.unsubscribe("show", myShowHandler, myApp);

// YUI 3var handle = overlay.on("show", myShowHandler, myApp, true);handle.detach();

// Oroverlay.on("myApp:show", myShowHandler, myApp, true);overlay.on("myApp:hide", myHideHandler, myApp, true);

overlay.detach("myApp:show");overlay.detach("myApp:*");

Detaching Event Listeners

• Supports• Normalizes• Enhances• Extendable (with Plug-Ins)• Constrainable

A single convenient API for working with HTML Elements.

Node: The Ideal Element

var element = YAHOO.util.Dom.getElementsByClassName(

"task", "li", "actions");

for (var i = 0; i < elms.length; i++) {

var elment = elms[i];

if (YAHOO.util.Dom.hasClass(element, "selectable")){

YAHOO.util.Dom.addClass(element, "current");

YAHOO.util.Event.on(element, "click", handler);

}

}

Working with HTML Elements in YUI 2

var element = Y.Node.get(".actions li.task.selected");

element.addClass("current");

element.on("click", handler);Y.Node.get(…).addClass("current").on("click",handler);

Working with HTML Elements in YUI 3

node.appendChild(aNode)

node.cloneNode(boolean)

node.scrollIntoView()

node.get("parentNode")

node.set("innerHTML","Foo")

Supports the HTMLElement API

Normalizes the HTMLElement API

node.getAttribute("href")

node.contains(aNode)

node.getText()

node.getStyle("paddingTop")

node.previous()

Enhances The HTMLElement API

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

Reacting to Property Changes in Node

node.on("srcChange", function(e) {

if (!isRelative(e.newVal)) {

e.preventDefault();

}

});

node.after("innerHTMLChange", reflow);

Remember the Extensibility of Plug-Ins

Plug-Ins can provide instance-specific features.

node.plug(IOPlugin);

node.io.getContent("http://foobar.com/baz/");

node.plug(DragDropPlugin);

node.dd.set("handle", ".title");

Node is the single point for DOM access,throughout YUI 3.

Makes YUI 3 ideal as a trusted source in protected environments such as Caja and Ad-Safe.

Constrained by Façades

var items = Y.Node.all(".actions li"); items.addClass("disabled"); items.set("title", "Item Disabled");

items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled"); });

NodeList: Operations a on Node Collection

Core Language Conveniences

• Array extras

• Type checking utility methods.

• Bind for execution context.

• Iterators.

• Later

• OOP methods- Augment, Extend, Aggregate, Merge, Clone

• AOP infrastructure for Plug-Ins- “Before” and “After” for methods

A Common Component Foundation

Y.Attribute

• Configurable Attributes- readOnly, writeOnce- validators, getters and setters

• Attribute Value Change Events- On and After moments.

• Complex Attribute Support- set("strings.label_enabled", "Enabled");

A Common Component Foundation

Y.Base

• The foundation class for building YUI classes.

• Combines Custom Event and Attribute support.

• Manages the "initialization" and "destroy" lifecycle.

• Provides plug-in and extension management.

A Common Component Foundation

Y.Widget

• The base implementation for all widgets.

• Introduces common attributes, methods.

• Manages the "render" lifecycle moment.

• Establishes a common pattern for widget development.

For More Information

Read

• YUI 3 - http://developer.yahoo.com/yui/3

• YUI 2 - http://developer.yahoo.com/yui/2

• All things YUI - http://YUIBlog.com

Discuss

• YUI 3 and YUI 2 - http://YUILibrary.com/forum/

Source Code

• YUI 3 - http://github.com/yui/yui3/

• YUI 2 - http://github.com/yui/yui2/