YUI Evolved

YUI Evolved:YUI3 and Why It’s Good for You

Saturday, November 21, 2009

http://www.flickr.com/photos/valjk/634696442/





document.onmousemove = mouseMove;document.onmouseup = mouseUp;var dragObject = null;var mouseOffset = null;

function mouseCoords(ev){ if(ev.pageX||ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop };}

function makeClickable(object){ object.onmousedown = function(){ dragObject = this; }

}function mouseUp(ev){ dragObject = null;}function getMouseOffset(target,ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};}function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function mouseMove(ev){

ev = ev||window.event; var mousePos = mouseCoords(ev); if(dragObject){dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; return false; }}function mouseUp(){ dragObject = null;}function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; }




http://www.flickr.com/photos/funadium/2311851858/





<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ //Selector of the node to make draggable node: '#demo' }); });




http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js




Change always comes bearing gi@s‐ Price Pritche*

Lighter Easier



• Finer grained modules, sub‐modules

• Lazy‐loading

• Emphasis on code reuse- common base, plugins,

extensions

Lighter Easier




• Lazy‐loading


extensions

• Sandboxed development

• Consistent API

• Convenience- each, bind, nodelist, queue,

chainability, general sugar

Lighter Easier




• Lazy‐loading


extensions

• Sandboxed development

• Consistent API

• Convenience- each, bind, nodelist, queue,

chainability, general sugar

Lighter Easier


All in a day’s work(but taking less than a day, hopefully)



yui-min.js



yui-min.js

node event

dom selector



yui-min.js

node event

dom selector

YUI().use("imageloader", function(Y){ // magic! }

);



add ph

ase

use ph

ase

yui-min.js

node event

dom selector


);



add ph

ase

use ph

ase

yui-min.js

node event oop

dom selector imageloader


);



add ph

ase

use ph

ase

yui-min.js

node event oop



);oop imageloadereventnode



add ph

ase

use ph

ase

yui-min.js

node event

YUI().use("anim-base",

function(Y){ // magic! }

);

oop



);oop imageloadereventnode



add ph

ase

use ph

ase

yui-min.js

node event

YUI().use("anim-base",

function(Y){ // magic! }

);

oopevent-custom

attribute-base

base-base

dom selectoranim-base

imageloader


);oop imageloadereventnode oopevent-

customattribute-

basebase-basedomselector

eventnode

anim-base


Playing in your own sandbox(but invite others too)

add

use ph

ase

yui

node ...

Easier



add

use ph

ase

yui

node ...

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

Easier



add

use ph

ase

yui

node ...




});</script>

<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">


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

});</script>

Easier



add

use ph

ase

yui

node ...




});</script>

<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">


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

});</script>


Easier


Everything where you want them(a.k.a. event façades)

Easier

Event



YUI2 YUI3

Easier

Event



var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;

var linkNode = Dom.get("id");

Event.addListener( linkNode, "click", function(e) {

var target = Event.getTarget(e);

if( Dom.hasClass( target, "selector" )) {

Event.preventDefault(e);

}});

YUI2 YUI3

Easier

Event



var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;

var linkNode = Dom.get("id");

Event.addListener( linkNode, "click", function(e) {

var target = Event.getTarget(e);

if( Dom.hasClass( target, "selector" )) {

Event.preventDefault(e);

}});

YUI2 YUI3

linkNode.on("click", function(e) {

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

});

Easier

Event


ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After

this.fire("select");

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After


Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After


e.stopImmediatePropagation()

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After



Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After


e.preventDefault()

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After


e.preventDefault()

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After


e.preventDefault()

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After


e.preventDefault()

Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After



Easier

Event


ON

ON

Default Behavior

After

After

After

ON


ON

Default Behavior

After

After

After



Easier

Event


Too many events spoil the page(a.k.a. event delegaOon)

HTML JS

Easier

Event



<div id=”menu”> <ul>

<li class=”menuitem”> <em>Open file...</em> </li>

<li class=”menuitem”> <em>Save file...</em> </li>

<li class=”menuitem”> <em>Close file</em> </li>

<li class=”menuitem stop”> <em>Quit</em> </li>

</ul></div>

HTML JS

Easier

Event








</ul></div>

HTML JS

var menuDiv = Y.one(“#menu”);

menuDiv.delegate("click", function(e){

}, "li.menuitem");

Easier

Event








</ul></div>

HTML JS



}, "li.menuitem");

Easier

Event

Y.log( this.get(‘innerHTML’) ); // <em>Quit</em>, etc

// this == e.currentTarget // e.container == menuDiv








</ul></div>

HTML JS



}, "li.menuitem");

Easier

Event

Y.log( this.get(‘innerHTML’) ); // <em>Quit</em>, etc

// this == e.currentTarget // e.container == menuDiv

// but maybe we want to stopY.one(“li.stop”).on(“click”, function(e){ e.stopPropagation(); });


Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event


Menu

ON

Def. Behavior

After

After


MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event


Menu

ON

Def. Behavior

After

After


MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event


Menu

ON

Def. Behavior

After

After


MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event


Menu

ON

Def. Behavior

After

After


MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

e.stopPropagation()

Easier

Event


Menu

ON

Def. Behavior

After

After


MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

e.stopPropagation()

Easier

Event


Working with HTML Elements(selectors, sugar, chaining, oh my)

YUI2 YUI3

Easier

Node



var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;

var elms = Dom.getElementsByClassName( "task", "li", "actions");

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

var elm = elms[i];

if(Dom.hasClass(elm, "selected")){

Dom.addClass(elm, "current"); Event.on(elm, "click", handler);

}

}

YUI2 YUI3

Easier

Node






var elm = elms[i];



}

}

YUI2 YUI3

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

elm.addClass("current");elm.on("click", handler);

Easier

Node






var elm = elms[i];



}

}

YUI2 YUI3

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

elm.addClass("current");elm.on("click", handler);

Easier

Node

// want something shorter?Y.Node.get(…).addClass("current").on( "click",handler);


HTML Elements made easier(HTMLElement API improved)

Supports Normalizes Enhances

Easier

Bulk operaOons

Node



node.appendChild(new)

node.cloneNode(node)

node.scrollIntoView()

node.get("parentNode")

node.set("innerHTML", "Hello world!")


Easier

Bulk operaOons

Node









node.getAttribute("href")

node.contains(node)

node.getText()

node.getStyle("paddingTop")

node.previous()

Easier

Bulk operaOons

Node










node.contains(node)

node.getText()


node.previous()

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

Easier

Bulk operaOons

Node










node.contains(node)

node.getText()


node.previous()

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

Easier

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");});

Bulk operaOons

nodeList.filter(‘a[href]’);nodeList.odd();nodeList.even();

Node


CreaJon, removal, and ancestry(a couple of last points)

Node creaOon

Node removal

Node ancestry

Easier

Node



var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);

Node creaOon Node removal

Node ancestry

Easier

Node



var html = '<fieldset><input type="checkbox" ... ></fieldset>';

// create the node and appendvar node = Y.node.create( html );form.appendChild( node );

// or do it right awayform.append( html );



Node ancestry

Easier

Node








var parent = node.parentNode;parent.removeChild( node );

Node ancestry

Easier

Node









node.remove();

Node ancestry

Easier

Node









node.remove();

Node ancestry

var root = li.ancestor('.root');

<ul class="root"> <li>One</li> <li>Two</li> <li> <ul> <li>Sub One</li> <li>Sub Two</li> </ul> </li></ul>

Easier

Node


Sugar is sweet(and so are you)

Easier


oop

Sugar is sweet(and so are you)

Y.log

Y.later

Y.cached

Y.UA

Y.Lang

Easier

Y.Array

Y.Object

Y.mix

Y.merge

Y.clone

Y.aggregate

Y.augment

Y.extend

Y.each

Y.bind

++


screenshot by me :)


Photo slideshow(because pictures are pre*eh)



http://whimsical.nu/hack/openhacksea.php


http://whimsical.nu/hack/flickr.php

http://whimsical.nu/hack/flickr.php




The HTML

Datasource

Animation



<div id="show"><div id="current"> <?php echo $show ?></div></div><div id="imageDump" style="display: none;"> <?= $dump ?></div>

The HTML

Datasource

Animation

The HTML



The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});



The HTML

Datasource

Animation


});

Datasource



The HTML

Datasource

Animation


});

var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});

Datasource



The HTML

Datasource

Animation


});

var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});var myCallback = { success: function(e){ // magic! // (add stuff to a custom PhotoReel obj) Y.later( 5000, myPhotoReel, myPhotoReel.advance, Array( Y ), true ); }};

Datasource



The HTML

Datasource

Animation


});

var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});var myCallback = { success: function(e){ // magic! // (add stuff to a custom PhotoReel obj) Y.later( 5000, myPhotoReel, myPhotoReel.advance, Array( Y ), true ); }};

myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { resultListLocator: "photos.photo", resultFields: ["id", "owner", "secret", "server", "farm", "title","ownername"] }});

Datasource



The HTML

Datasource

Animation


});

Datasource



The HTML

Datasource

Animation


});

Y.on( 'domready', function(e){ myDataSource.sendRequest("", myCallback); });

Datasource



The HTML

Datasource

Animation


});



The HTML

Datasource

Animation


});

PhotoReel.prototype = { ...

advance : function(Y) {

Y.one( "#show" ).append( '<div id="next" style="opacity:0;">' + this.photos[this.current] + '</div>' );

... }}

Animation



The HTML

Datasource

Animation




... }}

});

Animation



The HTML

Datasource

Animation




... }}

});

fadeInAnim = new Y.Anim({ node : "#next", to : { opacity: 1 } }); fadeOutAnim = new Y.Anim({ node : "#current", to : { opacity: 0 } })

Animation



The HTML

Datasource

Animation




... }}

});

Animation



The HTML

Datasource

Animation




... }}

});

fadeInAnim.on( 'run', function(e) { fadeOutAnim.run(); });

fadeInAnim.on( 'end', function(e) {

Y.one( "#current" ).setContent( this.photos[this.current] ); Y.one( "#next" ).remove();

}, this );

fadeInAnim.run();

Animation


http://www.flickr.com/photos/kandyjaxx/2012468692/




Making life easier(for you and for me and the enOre human race)



Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/


http://developer.yahoo.com/yui/3/









YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/

















YUI3 Galleryh*p://yuilibrary.com/gallery/






http://yuilibrary.com/gallery/

















YUI Forumh*p://yuilibrary.com/forum/








http://yuilibrary.com/forum/

http://yuilibrary.com/forum/

http://www.flickr.com/photos/bzedan/2905906576/

Go forth and hack!

Or, do you have any quesOons?

Angela Sabas

[email protected]://whimsical.nu@angelamaria

Frontend Engineer, Yahoo!





mailto:[email protected]

mailto:[email protected]

http://whimsical.nu

http://whimsical.nu

http://twitter.com/angelamaria

http://twitter.com/angelamaria



Technology

YUI Evolved