YUI(). YUI 2’s Perfect. What More Could I Want? Lighter Finer Grained Modules/Sub-Modules Emphasis...

Post on 16-Dec-2015

214 views 0 download

Tags:

Transcript of YUI(). YUI 2’s Perfect. What More Could I Want? Lighter Finer Grained Modules/Sub-Modules Emphasis...

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

sdesai@yahoo-inc.com

@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/