YUI Evolved

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

Saturday, November 21, 2009

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


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


Change always comes bearing gi@s
‐ Price Pritche*

Lighter Easier


‐ Price Pritche*

Lighter Easier

• Finer grained modules,
sub‐modules
• Lazy‐loading
• Emphasis on code reuse
- common base, plugins,
extensions


‐ Price Pritche*

Lighter Easier

• Finer grained modules, • Sandboxed development
sub‐modules
• Consistent API
• Lazy‐loading
• Convenience
• Emphasis on code reuse - each, bind, nodelist, queue,
- common base, plugins, chainability, general sugar
extensions


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

);



yui-min.js
add phase

node event

dom selector

use phase

function(Y){
// magic!
}

);



yui-min.js
add phase

node event oop

dom selector imageloader

use phase

function(Y){
// magic!
}

);



yui-min.js
add phase

node event oop


use phase

function(Y){
// magic!
}
oopevent
node
imageloader
);



yui-min.js
add phase

node event oop


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

function(Y){ function(Y){
// magic! // magic!
} }
oopevent
node
imageloader
); );



yui-min.js
event- attribute- base-
add phase

node event oop
custom base base

anim-
base

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

function(Y){ function(Y){
// magic! // magic!
} }
base-
attribute- anim-
event- event
oopevent
node
imageloader oop dom node
selector
base
); ); base
custom base


Playing in your own sandbox Easie
(but invite others too) r

yui

...
add

node
use phase



yui

...
add

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

<script>
use phase

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

Y.on("click", function(){
new Y.Overlay({ … }).render();
}, "#button" );

});
</script>



yui

...
add

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

<script> <script>
use phase

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

Y.on("click", function(){ new Y.Overlay({ … }).render();
new Y.Overlay({ … }).render();
}, "#button" ); });
</script>
});
</script>


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

nt
Eve



nt
Eve
YUI2 YUI3



nt
Eve
YUI2 YUI3
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);

}
});



nt
Eve
YUI2 YUI3
var Dom = YAHOO.util.Dom; linkNode.on("click", function(e) {
var Event = YAHOO.util.Event;
if(!e.target.hasClass("selector")){
var linkNode = Dom.get("id"); e.preventDefault();
}
Event.addListener( linkNode, "click",
function(e) { });

var target = Event.getTarget(e);

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

Event.preventDefault(e);

}
});


One moment in Jme Easie
(regarding on and aNer moments) r

nt
Eve

ON

ON

Default Behavior

After

After

After



nt
Eve

this.fire("select");

ON

ON

Default Behavior

After

After

After



nt
Eve


ON

ON e.stopImmediatePropagation()
Default Behavior

After

After

After



nt
Eve


ON

ON e.preventDefault()
Default Behavior

After

After

After



nt
Eve


ON

ON

Default Behavior

After

After e.preventDefault()

After



nt
Eve


ON

ON

Default Behavior

After

After e.stopImmediatePropagation()

After


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

nt
Eve
HTML JS



nt
Eve
HTML JS
<div id=”menu”>
<ul>

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

<em>Save file...</em>
</li>

<em>Close file</em>
</li>

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

</ul>
</div>



nt
Eve
HTML JS
<div id=”menu”> var menuDiv = Y.one(“#menu”);
<ul>
menuDiv.delegate("click", function(e){
<em>Open file...</em>
</li>

<em>Save file...</em>
</li>
}, "li.menuitem");
<em>Close file</em>
</li>

<em>Quit</em>
</li>

</ul>
</div>



nt
Eve
HTML JS
<ul>
<em>Open file...</em> Y.log( this.get(‘innerHTML’) );
</li> // <em>Quit</em>, etc

<li class=”menuitem”> // this == e.currentTarget
<em>Save file...</em> // e.container == menuDiv
</li>
}, "li.menuitem");
<em>Close file</em>
</li>

<em>Quit</em>
</li>

</ul>
</div>



nt
Eve
HTML JS
<ul>
<em>Open file...</em> Y.log( this.get(‘innerHTML’) );
</li> // <em>Quit</em>, etc

<li class=”menuitem”> // this == e.currentTarget
<em>Save file...</em> // e.container == menuDiv
</li>
}, "li.menuitem");
<em>Close file</em>
</li> // but maybe we want to stop
Y.one(“li.stop”).on(“click”,
<li class=”menuitem stop”> function(e){
<em>Quit</em> e.stopPropagation();
</li> }
);
</ul>
</div>


NoJﬁcaJon ﬂow: Bubbling Easie
(Ony bubbles) r

nt
Eve

Menu
MenuItem

ON ON

ON Def. Behavior

Def. Behavior After

After After

After

After


NoJﬁcaJon ﬂow: Bubbling Easie
(Ony bubbles) r

nt
Eve

Menu
MenuItem

ON ON

ON e.stopPropagation() Def. Behavior

Def. Behavior After

After After

After

After


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

e
Nod
YUI2 YUI3



e
Nod
YUI2 YUI3
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);

}

}



e
Nod
YUI2 YUI3
var Dom = YAHOO.util.Dom; var elm = Y.Node.get(
var Event = YAOO.util.Event; ".actions li.task.selected"
);
"task", "li", "actions"); elm.addClass("current");
elm.on("click", handler);

var elm = elms[i];

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


}

}



e
Nod
YUI2 YUI3
var Dom = YAHOO.util.Dom; var elm = Y.Node.get(
var Event = YAOO.util.Event; ".actions li.task.selected"
);
"task", "li", "actions"); elm.addClass("current");
elm.on("click", handler);

var elm = elms[i]; // want something shorter?
Y.Node.get(…).addClass("current").on(
if(Dom.hasClass(elm, "selected")){ "click",handler);


}

}


HTML Elements made easier Easie
(HTMLElement API improved) r

e
Nod
Supports Normalizes Enhances

Bulk operaOons



e
Nod
node.appendChild(new)

node.cloneNode(node)

node.scrollIntoView()

node.get("parentNode")

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

Bulk operaOons



e
Nod
node.appendChild(new) node.getAttribute("href")

node.cloneNode(node) node.contains(node)

node.scrollIntoView() node.getText()

node.get("parentNode") node.getStyle("paddingTop")

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

Bulk operaOons



e
Nod
node.appendChild(new) node.getAttribute("href") node.addClass("selectable")

node.cloneNode(node) node.contains(node) node.toggleClass("enabled")

node.scrollIntoView() node.getText() node.getXY()

node.get("parentNode") node.getStyle("paddingTop") node.get("region")

"Hello world!")

Bulk operaOons



e
Nod
node.appendChild(new) node.getAttribute("href") node.addClass("selectable")

node.cloneNode(node) node.contains(node) node.toggleClass("enabled")

node.scrollIntoView() node.getText() node.getXY()

node.get("parentNode") node.getStyle("paddingTop") node.get("region")

"Hello world!")

Bulk operaOons
var items = Y.Node.all(".actions li"); nodeList.filter(‘a[href]’);
items.addClass("disabled"); nodeList.odd();
items.set("title", "Item Disabled"); nodeList.even();

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


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

e
Nod
Node creaOon

Node removal

Node ancestry



e
Nod
Node creaOon Node removal
var fieldset =
document.createElement("fieldset"); Node ancestry
var input =
document.createElement("input");
input.type = "checkbox";
input.name = "myCheckBox";
...
fieldset.appendChild("input");
form.appendChild(fieldset);



e
Nod
var fieldset =
document.createElement("fieldset"); Node ancestry
var input =
...

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

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

// or do it right away
form.append( html );



e
Nod
var fieldset = var parent = node.parentNode;
document.createElement("fieldset"); parent.removeChild( node );
var input =
... Node ancestry






e
Nod
var input =
document.createElement("input"); node.remove();
... Node ancestry






e
Nod
var input =
document.createElement("input"); 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>


Sugar is sweet Easie
(and so are you) r


Sugar is sweet Easie
(and so are you) r

Y.log Y.Object oop
Y.clone
Y.later Y.mix
Y.aggregate
Y.cached Y.merge
Y.augment
Y.UA Y.each
Y.extend
Y.Lang Y.bind

Y.Array ++


screenshot by me :)


Photo slideshow
(because pictures are pre*eh)


Photo slideshow

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


Photo slideshow

The HTML

Datasource

Animation


Photo slideshow
<div id="show"><div id="current">
The HTML <?php echo $show ?>
</div></div>
Datasource <div id="imageDump" style="display: none;">
<?= $dump ?>
</div>
Animation


Photo slideshow
YUI().use("datasource","node","substitute","anim",
The HTML function(Y){ ...

Datasource

Animation

});


Photo slideshow

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

});


Photo slideshow

});
var myCallback = {
success: function(e){
// magic!
// (add stuff to a custom PhotoReel obj)
Y.later( 5000, myPhotoReel,
myPhotoReel.advance, Array( Y ), true );
}};

});


Photo slideshow

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

});


Photo slideshow

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

});


Photo slideshow

Datasource
PhotoReel.prototype = { ...
Animation advance : function(Y) {

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

... }
}

});


Photo slideshow

Datasource PhotoReel.prototype = { ...


... }
}

});


Photo slideshow



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

... }
}

});


Photo slideshow



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();
... }
}

});


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


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


Making life easier

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


Making life easier


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


Making life easier



YUI3 Gallery
h*p://yuilibrary.com/gallery/


Making life easier



YUI3 Gallery
h*p://yuilibrary.com/gallery/

YUI Forum
h*p://yuilibrary.com/forum/


Go forth and hack!

Or, do you have any
quesOons?
http://whimsical.nu/hack/openhacksea.php

Angela Sabas
Frontend Engineer, Yahoo!
amari@yahoo-inc.com
http://whimsical.nu
@angelamaria

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


YUI Evolved

More Related Content

What's hot

Viewers also liked

Similar to YUI Evolved

More from Michael Smith Jr.

Recently uploaded

YUI Evolved