YUI 3: Below the Surface

YUI3: Below the surface Luke Smith @ls_n

C12H22O11

I'm not going to talk about C12H22O11

I am going to talk about

1. Modules 2. DOM abstraction

JavaScript!!!!

1.YUI().use(...); // WTF?

JavaScript needs modules

Inadequate control

Modules can help

Modules can help Did someone say "module pattern?"

holy crap inte , the rne t in re was 200 an 3?

w hile a ok t to tha

"module pattern" var api = (function () { var privateProperty = "Neener neener neener!"; function privateFn() { return "You can't catch me!"; } return { publicProperty: "public", publicMethod: function () { return "I'm " + api.publicProperty; }, protectedMethod: function () { return privateProperty + " " + privateFn(); } }; })();

http://snook.ca/archives/javascript/no-love-for-module-pattern Apr 2009

Closure variations

Closure variations (function () { var thisCanBeCompressed = "YAY!"; function asCanThis() { return "A smaller minified file!"; } })(); (function(){var A="YAY!";function B(){return "A smaller minified file!";}})();

Closure variations undefined = "Oh no you didn't!"; (function (window, document, undefined) { /* window is the global object undefined is the REAL undefined */ })(this, this.document);

Closure variations (function (original) { chef.cook = function (recipe) { recipe.add("Bacon"); return original.apply(this, arguments); } })(chef.cook);

Closure variations And plenty more

What we did with it YUI.add("my-awesome-module", function (Y) { var privateProperty = "Neener neener neener!"; function privateFn() { return "You can't catch me!"; } Y.api = { publicProperty: "public", publicMethod: function () { return "I'm " + this.publicProperty; }, protectedMethod: function () { return privateProperty + " " + privateFn(); } }; });

What we did with it YUI.add("my-awesome-module", function (Y) { var privateProperty = "Neener neener neener!"; function privateFn() { return "You can't catch me!"; } Y.api = { publicProperty: "public", publicMethod: function () { return "I'm " + this.publicProperty; }, protectedMethod: function () { return privateProperty + " " + privateFn(); } }; }); Look Ma, no execution!

Register != execute <script src="my-dependency.js"></script> <script src="my-awesome-module.js"></script>

Register != execute <script src="my-awesome-module.js"></script> <script src="my-dependency.js"></script>

use() == execute Y.use('my-dependency', 'my-awesome-module'); Y? Be cau se it's aw eso me !

Enter YUI() var Y = YUI();

YUI is

YUI is • Module registry YUI.add(...);

YUI is • Module registry YUI.add(...); • Sandbox factory var Y = YUI();

YUI is • Module registry YUI.add(...); • Sandbox factory var Y = YUI(); • A very talented Japanese musician

YUI is • Module registry YUI.add(...); • Sandbox factory var Y = YUI();

Y is • Module execution controller • YUI generated sandbox • Module API host

Y executes modules var Y = YUI(); Y.use("autocomplete"); // execute! var autocomplete = new Y.AutoComplete({ inputNode: "#movie", source: yqlMovieQuery });

Y is a YUI sandbox var Y = YUI(); Y.use("autocomplete"); var autocomplete = new Y.AutoComplete({ inputNode: "#movie", source: yqlMovieQuery });

Y is a YUI sandbox YUI().use("autocomplete", function (Y) { var autocomplete = new Y.AutoComplete({ inputNode: "#movie", source: yqlMovieQuery }); ...

Y is a YUI sandbox YUI().use("autocomplete", function (Y) { var autocomplete = new Y.AutoComplete({ inputNode: "#movie", source: yqlMovieQuery }); Y.log("This is my Y. " + "There are many like it, " + "but this one is mine.");

Y is where the APIs are // Step 1. Module registration YUI.add("autocomplete", function (Y) { Y.AutoComplete = function () { ... }; ... }); // Step 2. Module execution YUI().use("autocomplete", function (Y) { var autocomplete = new Y.AutoComplete(...); });

Y is where the APIs are YUI().use("autocomplete", function (Y) {

Y is where the APIs are Y YUI().use("autocomplete", function (Y) {

Y is where the APIs are Y YUI().use("autocomplete", function (Y) { autocomplete.js YUI.add("autocomplete", function (Y) { Y.AutoComplete = function () { ... }; ... });

Y is where the APIs are YUI().use("autocomplete", function (Y) { var autocomplete = new Y.AutoComplete({ inputNode: "#movie", source: yqlMovieQuery });

Modules • load + execute • synchronous by default • shared global context • ignorant of the system

Modules • load + execute (register vs execute) • synchronous by default • shared global context • ignorant of the system

Modules • load + execute (register vs execute) • synchronous by default (no need to be) • shared global context • ignorant of the system

Modules • load + execute (register vs execute) • synchronous by default (no need to be) • shared global context (sandboxing) • ignorant of the system

Just add meta YUI.add("autocomplete-base", function (Y) { /* Module API declared here */ }, // version '3.3.0pr1', // meta { optional: ['jsonp', 'yql'], requires: ['array-extras', 'base-build', 'event-valuechange', 'node-base'] });

Modules • load + execute (register vs execute) • synchronous by default (no need to be) • shared global context (sandboxing) • ignorant of the system (just add meta)

Modules can help • Loading decoupled from execution • Modules can be loaded out of order and asynchronously • Implementation context can be sandboxed • Metadata creates a structural relationship between modules

But that's just the beginning

While we're at it, load modules on demand Y.one("#tab2").on(["mouseenter","focus"], function () { Y.use("dd", function () { /* only needed if the user enters tab */ }); });

While we're at it, resolve dependencies YUI().use("dd", function (Y) { /* dd and dependencies loaded */ });

While we're at it, avoid duplication /** * Remove superceded modules and loaded modules. Called by * calculate() after we have the mega list of all dependencies * @method _reduce * @return {object} the reduced dependency hash. * @private */ _reduce: function(r) { r = r || this.required; var i, j, s, m, type = this.loadType; for (i in r) { if (r.hasOwnProperty(i)) { m = this.getModule(i); // remove if already loaded if (((this.loaded[i] || ON_PAGE[i]) && !this.forceMap[i] && !this.ignoreRegistered) || (type && m && m.type != type)) {

While we're at it, combine requests for (i = 0; i < len; i++) { if (m && (m.type === type) && (m.combine || !m.ext)) { ... url += frag; if (i < (len - 1)) { url += '&'; } combining.push(m.name); } }

While we're at it, leverage the CDN /** * Base path for the combo service * @property comboBase * @type string * @default http://yui.yahooapis.com/combo? */ self.comboBase = Y.Env.meta.comboBase;

While we're at it, conditionally load browser speciﬁc logic "history": { "plugins": { "history-hash-ie": { "condition": { "trigger": "history-hash", "test": "history-hash-ie-test.js" }, ...

...you get the point (we're still at it)

Old and busted <script src="one.js"></script> <script src="three.js"></script> <script src="two.js"></script> <script src="four.js"></script> <!--[if IE 6]> <script src="four-ie.js"></script> <![endif]> <script src="cheetos.js"></script> <script src="redbull.js"></script> <script src="mustache.js"></script> <script src="brownchicken.js"></script> <script> /* one, three, two? BOOM */ </script>

New hotness <script src="yui-min.js"></script> <script> YUI().use("brownchicken", function (Y) { new Y.Cow({ color: "brown"}); }); </script>

Oh yeah, and it works for CSS

And in Node.js

And in YQL

YUI.add(...); YUI().use(...);

2. DOM isn't broken it's just misunderstood

DOM level 3 was a W3C recommendation in April 2004

DOM level 3 was a W3C recommendation in April 2004 • IE6 was 3 years old

DOM level 3 was a W3C recommendation in April 2004 • IE6 was 3 years old • Firefox was 7 months from v1.0

DOM level 3 was a W3C recommendation in April 2004 • IE6 was 3 years old • Firefox was 7 months from v1.0 • Opera was ...also around

Today :) DOM speciﬁcation

Today :(

They're close :)

http://www.quirksmode.org/mobile/mobilemarket.html

We need normalization

YUI 2 Normalization by utility YAHOO.util.Dom.setAttribute(myLabel,'for','my-input');

Browser DOM

Y.u.Dom Browser DOM

Implementation Y.u.Dom Browser DOM

Problem:

Problem: Implementation

Problem: Implementation ??? Developers must know a utility method is needed

YUI 3 Normalization by utility Y.DOM.setAttribute(myLabel,'for','my-input');

YUI 3 Normalization by utility Y.DOM.setAttribute(myLabel,'for','my-input'); Utility by abstraction myLabelNode.setAttribute('for','my-input');

Browser DOM

Y.DOM S M? Browser DOM F

Y.Node Y.DOM S M? Browser DOM F

Implementation Y.Node * not to scale Y.DOM S M? Browser DOM F

Oh look, an abstraction layer! Y.Node

Abstraction FTW Y Load the optimal set of code for this environment Y.DOM Address speciﬁc DOM variances Provide convenience methods Y.Node Expose uniﬁed API and extension points

Y.Node

• Attributes • Methods • Events Y.Node

Add custom attributes /** * Conﬁguration for special attribute handling * * @property ATTRS * @static * ... */ Y.Node.ATTRS = {...}

Add custom attributes Y.Node.ATTRS.outerHTML = { readOnly: true, getter: function () { var node = this._node, par = node.parentNode.cloneNode(false); par.appendChild(node.cloneNode(true)); return par.innerHTML; } };

Add custom attributes YUI.add('node-outerhtml', function (Y) { Y.Node.ATTRS.outerHTML = {...} }, '0.0.1', { requires: ['node-base'] }); YUI().use('node-outerhtml', function (Y) { Y.one('body').get('outerHTML'); // <body...> });

Add custom methods /** * Adds methods to the Y.Node prototype * * @method addMethod * @static * ... */ Y.Node.addMethod = function(name, fn) {...}

Add custom methods Y.Node.addMethod('commonAncestor', function (me, other) { var ancestors = this.ancestors(), common = null; Y.one(other).ancestors().some(function (node) { if (ancestors.indexOf(node) > -1) { common = node; return true; } }); return common; });

Add custom methods YUI.add('node-commonancestor', function (Y) { Y.Node.addMethod('commonAncestor', ...); }, '0.0.1', { requires: ['node-base'] }); YUI().use("node-commonancestor", "node-outerhtml", function (Y) { Y.one("#a").commonAncestor("#b").get("outerHTML"); });

Preserve the abstraction Y.Node.addMethod = function(name, fn) { Y_Node.prototype[name] = function() { ... ret = fn.apply(node, args); if (ret) { ret = Y.Node.scrubVal(ret, node); } Y.Node.prototype.get = function(attr) { ... if (val) { val = Y.Node.scrubVal(val, this); } else ...

Preserve the abstraction Y.Node.scrubVal = function(val, node) { // only truthy values are risky if (val) { // safari nodeList === function if (typeof val == 'object' || typeof val == 'function') { // node || window if (NODE_TYPE in val || Y.DOM.isWindow(val)) { val = Y.one(val); // NodeList, DOM collection, or array of DOM Nodes } else if ((val.item && !val._nodes) || (val[0] && val[0].nodeType)) val = Y.all(val); } } } else if (typeof val === 'undeﬁned') { val = node; // for chaining } else if (val === null) { val = null; // IE: DOM null not the same as null } return val; };

Code slides!

In English, please Y.Node.scrubVal = function(val, node) { • Return a Node or NodeList instance };

In English, please Y.Node.scrubVal = function(val, node) { • Return a Node or NodeList instance • or return the origin Node (chainable) };

In English, please Y.Node.scrubVal = function(val, node) { • Return a Node or NodeList instance • or return the origin Node (chainable) • or return null };

In English, please Y.Node.scrubVal = function(val, node) { • Return a Node or NodeList instance • or return the origin Node (chainable) • or return null • DO NOT return DOM nodes };

Preserve the abstraction (Your part) document.createElement("p"); window.location.hash = "browns";

Preserve the abstraction (Your part) Y.conﬁg.doc.createElement("p"); Y.conﬁg.win.location.hash = "browns";

now.on("to", events);

...to be continued. Yay events! http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events

Add new DOM events Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) { var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ... node.on("keydown", _checkProgress); return detachHandle; } (circa 2009)

Plumbing is there, but Have you seen me? API

Add new DOM events Y.Event.define('yuiconf', { on: function (node, sub, notifier) { node.on("keyup", function (e) { var val = (this.get("value") || '').toLowerCase(); if (val.indexOf("yuiconf") > -1) { notifier.fire(e); } }); }, ... }); Y.one("#Nov8").on("yuiconf", horns); (today)

Add new DOM events Y.Event.define('yuiconf', { on: function (node, sub, notifier) { sub.detachHandle = node.on("keyup", function (e) { ... }); }, detach: function (node, sub, notifier) { sub.detachHandle.detach(); }, ... }); Y.one("#Nov8").detach("yuiconf", horns); (today)

Add new DOM events Y.Event.define('yuiconf', { on: function (node, sub, notifier) {...}, detach: function (node, sub, notifier) {...}, delegate: function (node, sub, notifier, filter) { ... }, }); Y.one("#calendar").delegate("yuiconf", horns, "input"); (today)

Summary

Modules are the future

Modules are the future so sayeth the Crock

The DOM is a mess

The DOM is a mess again

inadequate system + abstraction opportunity

YUI 3 exposes that opportunity to you

Thank you

Borrowed Images • http://upload.wikimedia.org/wikipedia/commons/7/7d/Sucrose-rodmodel.png • http://www.look-good-feel-great-secrets.com/images/sugar.jpg • http://www.funonthenet.in/images/stories/forwards/Roller-Coaster/roller- coaster-2.jpg • http://jpopcdcovers.ﬁles.wordpress.com/2009/07/yui_again_cd.jpg? w=600&h=600 • http://www.roger-moore.com/sirrogermoore/april27.jpg • http://redstatebluestate.mlblogs.com/assets_c/2009/05/Herve%20Villechaize- thumb-199x295-1187651.jpg • Browser icons via http://www.morcha.net/post/46.html and http:// browserversionicons.com/ • http://forsythe4kc.com/uploaded_images/HeadExplodeBig.gif • http://zbths99.weebly.com/uploads/1/9/3/5/1935885/398529.jpg?361x501

http://lanyrd.com	93
http://www.slideshare.net	3
http://twicli.neocat.jp	1
http://ja.favstar.fm	1
http://reader.livedoor.com	1

YUI 3: Below the Surface

by Luke Smith

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 99

Statistics