yui(). yui 2’s perfect. what more could i want? lighter finer grained modules/sub-modules emphasis...
TRANSCRIPT
YUI()
YUI 2’s Perfect. What More Could I Want?
Lighter Finer Grained Modules/Sub-Modules Emphasis on Code Reuse: Common Base, Plugins, Extensions
Easier Consistent API
Base, Selector, Widget, IO/Get/DataSource Convenience
each, bind, nodelist, queue, chainability, general sugar
Faster Opportunity to re-factor core performance pain points
From YAHOO to YUI()
Sandboxed App Development Your own protected YUI environment Ability to reach out to other instances if required Future: Explicit Versioning support
YAHOO
var Y = YUI()
new YAHOO.util.Anim()
new Y.Anim()
Not Only Protected; Self-Populating Too
YUI().use("anim")
Built-in, Optimal Dependency Loading
Makes finer grained modules practical No more file order concerns Self-Healing
Enough With The Bullet Points, Show Us Something With Curly Braces…
Protected…So, a user chooses to include your "Stock Tracker App" on a portal 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>
Then they add the "My Favorite Jonas Brother App"...
<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">
<script>
YUI().use("overlay", function(Y) {
new Y.Overlay({...}).render();
});
</script>
Self-Populating…<script src="yui-min.js">
<script>
YUI().use("anim", function(Y) {
});
</script>
<script src="http://yui.yahooapis.com/combo?oop-min.js&event-min.js..">
<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">
var a = new Y.Anim({...});
a.run();
Avoiding The Kitchen SinkYUI 2
The foosball table, PS3, relaxation fountain, throw pillows, scented candles and the kitchen sink
YUI 3 The foosball table and the PS3 The relaxation fountain, throw pillows and the
scented candles
Sub-Modules…
io : All IO functionality (7.4K) io-base : Core XHR functionality (3.3K) io-form : Form mining support (1K) io-queue : Transaction Queuing support (0.7K) io-upload : File upload support (1.7K) io-xdr : Cross domain support (0.7K)
YUI().use("io-base", function(Y) {…})YUI().use("io-xdr", function(Y) {…})YUI().use("io", function(Y) {…})
IO – K-Weight Breakup
0
2
4
6
8
10
12
K-W
eig
ht
(min
ifie
d, n
on
-gzi
p)
YUI 2 YUI 3
io-xdr
io-upload
io-queue
io-form
io-base
connection
Plugins 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(Y.Widget, [ Widget-Position, // Positioning Widget-Position-Ext, // Adv. Positioning Widget-Stack, // Shim/Stack Support Widget-StdMod // Header/Body/Footer]);
Instead of Extending Overlay, Reuse Just The Feature Extensions Tooltip Needs :
Y.Tooltip = Y.Base.build(Y.Widget, [ Widget-Position, // Positioning Widget-Stack // Shim/Stack Support]);
Plugins: Instance Based Flexibility…
Base Overlay instance with IO Support
var ioOverlay = new Y.Overlay(...);
ioOverlay.plug(Y.OverlayIOPlugin, { url: "http://foo/getData" });
ioOverlay.io.refreshContent();
Base Overlay instance with Animation Support
var animOverlay = new Y.Overlay(...); animOverlay.plug(Y.WidgetAnimPlugin);
animOverlay.show(); animOverlay.hide();
Custom Events: Now With Flavor Crystals!
Event Facades Built-in on and after moments Default Behavior (preventDefault) Event Bubbling (stopPropagation) Detach Handles
The Enhanced Custom Event System Is AnIntegral Part of YUI 3’s Goal To Be Lighter, Allowing For Highly Decoupled Code
Event Facades// 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();
}});
On and After Moments : 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) {...});
On and After Moments : YUI 3// Publishershow : function() { this.fire("show");},
_defShowFn : function(e) { node.removeClass("hidden"); ...}
// Subscriberoverlay.on("show", function(e) { if (!taskSelected) { e.preventDefault(); }}
overlay.after("show", function(e) {...});
Notification Flow: On/After/Default
ON
ON
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation()e.preventDefault()
e.preventDefault()e.stopImmediatePropagation()
Bubbling: Delegation Beyond the DOM
Menu.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(); ...}
MenuMenuItem
Notification Flow : Bubbling
ON
ON
Def. Behavior
After
After
After
this.fire("menuitem:select");
ON
Def. Behavior
After
After
e.stopPropagation()
Detaching Listeners// 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|*");
Node: An HTML Element Kwik-E Mart
Supports Normalizes Enhances
Extendable Constrainable
A single convenient location for working with
HTML Elements
Working with HTML Elements: YUI 2
var elms = YAHOO.util.Dom.getElementsByClassName(
"task", "li", "actions");
for (var i = 0; i < elms.length; i++) {
var elm = elms[i];
if (YAHOO.util.Dom.hasClass(elm, "selectable")){
YAHOO.util.Dom.addClass(elm, "current");
YAHOO.util.Event.on(elm, "click", handler);
}
}
Working with HTML Elements: YUI 3
var elm = Y.Node.get(".actions li.task.selected");
elm.addClass("current");
elm.on("click", handler);
Y.Node.get(…).addClass("current").on("click",handler);
Supports the HTMLElement API
node.appendChild(aNode)
node.cloneNode(aNode)
node.scrollIntoView()
node.get("parentNode")
node.set("innerHTML","Foo")
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")
… With State Change Events (wip)
node.on("srcChange", function(e) {
if (!isRelative(e.newVal)) {
e.preventDefault();
}
});
node.after("innerHTMLChange", reflow);
Extendable
Plugins can provide app specific features…
node.plug(IOPlugin);
node.io.getContent("http://foo/bar");
node.plug(DragDropPlugin);
node.dd.set("handle", ".title");
Constrainable
Makes YUI 3 ideal as a trusted source in "constrained" environments such as Caja and Ad-Safe
Node is the single point for DOM access,throughout YUI 3
NodeList: Bulk Node Operations*
Used to Batch Node operations
* The Costco to Node’s Kwik-E Mart
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");});
Core Language Conveniences Array Extras isString, isNumber … Bind Each Later OOP
Augment, Extend, Aggregate, Merge, Clone AOP
Before/After For Methods
A Common Component Foundation
Y.AttributeManaged Attribute Support
Configurable Attributes readOnly, writeOnce validators, getters and setters
Attribute Value Change Events on/after
Complex Attribute Support set("strings.label_enabled", "Enabled");
A Common Component Foundation
Y.Base"this.constructor.superestclass"
The Class From Which YUI 3 Classes Will Be Derived Combines Custom Event And Attribute Support Manages the "init" and "destroy" Lifecycle Moments Provides Plugin/Extension Management
A Common Component Foundation
Y.WidgetA Common Widget API
The Base Implementation For All Widgets Introduces Common Attributes, Methods
boundingBox, contentBox width, height visible, disabled, hasFocus strings show(), hide(), focus(), blur(), enable(), disable()
Manages The "render" Lifecycle Moment Establishes A Common Pattern For Widget Development
Phew!Satyen Desai
@dezziness
Read, http://developer.yahoo.com/yui/3
Discuss, http://yuilibrary.com/forum/viewforum.php?f=15
Or, just jump in headfirst…
http://github.com/yui/yui3/tree/master
Image Attribution Sink:
http://www.flickr.com/photos/shazbot/1639273/ Slushy:
http://www.flickr.com/photos/yaffamedia/705369091/ Toothpaste:
http://www.flickr.com/photos/toasty/412580888/