2009 hackday taiwan yui
DESCRIPTION
Yahoo user interface 新一代架構TRANSCRIPT
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/