Yui3

Yahoo! User Interface http://developer.yahoo.com/yui @yuilibrary Luke Smith (@ls_n)

server

(X)HTML server

(X)HTML Speciﬁcation server

(X)HTML Speciﬁcation Implementation server

(X)HTML Speciﬁcation Implementation Bugs server

(X)HTML Speciﬁcation Implementation Bugs [ Theory / Practice ] server

CSS BOM API (X)HTML DOM JavaScript DOM API Speciﬁcation Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server

Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Speciﬁcation Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server

Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Speciﬁcation Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server

Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification mixed: new (x)html, data: custom, xml, Data Transport Implementation behavior: js json Defects [ Theory / Practice ] server

Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs knowledge areas: 7 CSS (X)HTML dimensions: xJavaScript DOM 4 BOM API DOM API platforms: x 3 Specification mixed: new (x)html, data: custom, xml, browsers perDefects platform: x 5 Data Transport Implementation behavior: js json rendering modes: x 2 [ Theory / Practice ] server =840

usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability

What is YUI?

What is YUI? JavaScript library

What is YUI? JavaScript library True*

YUI Library Project • JavaScript library • CSS foundation • Documentation tools • Build tools • Testing tools • Server side delivery tools • Developer education

YUI Library Project YUI 2 JavaScript core, utilities, widgets; CSS foundation including Grids

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery.

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor Build-time tool for minifying JavaScript and CSS.

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation.

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test Comprehensive unit testing solution for any JS code.

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering.

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering. YUI Builder Build scripts for generating YUI JS/CSS from source.

YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery. YUI Compressor YUI Doc Build-time tool for minifying Build-time tool for generating JavaScript and CSS. API documentation. YUI Test YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering. YUI Builder YUI PHP Loader Build scripts for generating YUI PHP js/css mgt. solution, with JS/CSS from source. YUI metadata; combos.

YUI 2 YUI 3 UI YUI CSS YUI Gallery

YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js

YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js YUI Doc Builder YUI Test Compressor Development YUI Console Proﬁler

YUI 2 YUI 3 UI YUI CSS YUI Gallery CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js YUI Doc Builder YUI Test Compressor Development YUI Console Proﬁler YUI Blog yuilibrary forum Developer YUI Theater #yui (freenode)

YUI 3 YUI Gallery

YUI 3 First Concepts • DOM, Events, Ajax • Loading • Custom events • Component infrastructure

DOM var node = Y.one("#foo"); node.setStyle("background", "#900") .prepend("<em>Watch out!</em>"); var nodeList = Y.all(".bar tr"); nodeList.odd().addClass("stripe"); • Selector driven • Normalized API • Class & style management • Lots more...

Events node.on("click", handler); nodeList.on("mouseenter", handler); node.delegate("click", handler, "li"); Y.on("click", handler, "#notHereYet"); • Consistent for all subscribable objects • Baked in event delegation • Subscribe ahead of DOM availability

Events (cont.) node.on("submit", function ( e ) { e.preventDefault(); this.addClass("submitted"); }); node.on("outsideclick", fn, thisObj); • Normalized event object • Default "this" is the Node • Set "this" in handler • Create synthetic DOM events

Ajax Y.io(url, config); new Y.DataSource.IO(config); Y.yql(query, callback); Y.jsonp(url, callback); • XHR normalization • Cross Domain (XDR) • Asynchronous form submit • Lots of ways to link to remote data

YUI 3 First Concepts ✓DOM, Events, Ajax • Loading • Custom events • Component infrastructure

Before • Large blocking script for core features

Before • Large blocking script for core features • Multiple blocking <scripts> for more features

Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order

Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order • Unused code in monolithic scripts

Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order • Unused code in monolithic scripts • Volatility in collaborative environments

Loading YUI 3 <script src=”http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js”></script> <script> YUI().use('node', function (Y) { Y.one("body").setContent("Hello, World!"); Y.use(‘io’, ‘anim’, function (Y) { //lazy load on-demand Y.io("/data", { ... }); }); }); </script> • One <script> requirment: yui-min.js • Everything else via use("module") • Dependencies automatically resolved • Asychronous combo-loaded from CDN • Sandboxed code

After • Seed ﬁle (7K) • Module strategy (order independence) • Feature level submodularity (no dead code) • Optimal async loading (one non-blocking http request) • Dependency resolution (DWIW)

http://developer.yahoo.com/yui/3/conﬁgurator/

Y.use(...)

Y.use(...) Y.use(...)

Y.use(...) Y.use(...) Y.use(...) Y.use(...) ...

๏ One page

๏ One page ๏ n applications

๏ One page ๏ n applications ๏ Start with seed, base modules

๏ One page ๏ n applications ๏ Start with seed, base modules ๏ After that, the user decides what loads

YUI 3 First Concepts ✓DOM, Events, Ajax ✓Loading • Custom events • Component infrastructure

Custom events this.fire("foo", { payload: x }); myObject.on("bar", function( e ) { e.preventDefault(); }); slider.after("valueChange", handler); • Normalized API • Subscribable on and after phases • Can have cancelable default behaviors • Can bubble

Custom events http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events

YUI 3 First Concepts ✓DOM, Events, Ajax ✓Loading ✓Custom events • Component infrastructure

Component infrastructure = Your stuff

Your stuff • Attribute

Your stuff • Attribute • Base

Your stuff • Attribute • Base • Plugin

Your stuff • Attribute • Base • Plugin • Widget

Attribute MyClass.ATTRS = { foo: { value: "default", setter: setMethod, validator: validationMethod, readOnly: boolean } }; var instance = new MyClass({ foo: "new value" }); instance.after("fooChange", handler); instance.set("foo", "Hello, World!"); http://developer.yahoo.com/yui/3/attribute/

Base Y.extend( MyClass, Y.Base, { initializer: function () { ... }, destructor: function () { ... }, /* prototype */ }); var instance = new MyClass(); instance.after("fooChange", handler); instance.plug(pluginClass); instance.destroy(); http://developer.yahoo.com/yui/3/base/

Plugin Y.extend( MyPluginClass, Y.Plugin, { initializer: function () { ... }, destructor: function () { ... }, /* prototype */ }, { NS: "baz", ATTRS: { ... } } }); instance.plug(MyPluginClass); instance.baz.set("bar", "open"); instance.unplug("baz"); http://developer.yahoo.com/yui/3/plugin/

Widget Y.extend( MyWidgetClass, Y.Widget, { renderUI: function () { ... }, bindUI: function () { ... }, syncUI: function () { ... }, /* prototype */ }); var instance = new MyWidgetClass(); instance.render("#container"); instance.destroy(); http://developer.yahoo.com/yui/3/widget/

Infrastructure http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets

YUI 3 First Concepts ✓ DOM, Events, Ajax ✓ Loading ✓ Custom events ✓ Component infrastructure

Putting it together • Write reusable modules • Your modules in use(...) • YUI Gallery

YUI.add YUI.add(‘my-module’, function (Y) { function MyWidgetClass() {...} Y.extend(MyWidgetClass, Y.Widget, { ... }); Y.MyWidgetClass = MyWidgetClass; }, ‘0.0.1’, { requires: [‘widget’] }); • Expose API on Y • Identify requirements • Same infrastructure used by YUI modules

use() your stuff YUI.add(‘my-module’, ...); YUI().use(‘io’, ‘my-module’, ‘anim’, function (Y) { var instance = new Y.MyWidgetClass(); }); • Same API to load any module • Sandboxed, order independent, dependency resolution, etc

YUI Global

add phase YUI Global YUI / Yahoo! CDN

add phase YUI Global node event oop YUI / Yahoo! CDN data type

YUI Global cu cu s add phase node event oop st to om m YUI / Yahoo! CDN data lo cod ca e type tio n

YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN data lo cod ca e type tio n

YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN data lo cod ca e type tio n use phase

YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN data lo cod ca e type tio n YUI().use("imageloader", ...) use phase

YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN image data lo cod ca e loader type tio n YUI().use("imageloader", ...) use phase

YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN image data lo cod ca e loader type tio n image YUI().use("imageloader", ...) oop event node loader use phase

YUI Global cu cu my s add phase moduleto node event oop st om m YUI / Yahoo! CDN image data lo cod ca e loader type tio n image YUI().use("imageloader", ...) oop event node loader Y.use("datasource", "mymodule", ...) use phase

YUI Global data cu cu my s add phase moduleto node event io oop st source om m YUI / Yahoo! CDN image data lo cod ca e json loader type cookie cache tio n image YUI().use("imageloader", ...) oop event node loader data my data Y.use("datasource", "mymodule", ...) use phase oopevent cachejson iocookie type module source

YUI Global data cu cu my s add phase moduleto node event io oop st source om m YUI / Yahoo! CDN image data lo cod ca e json loader type cookie cache tio n image YUI().use("imageloader", ...) oop event node loader data my data Y.use("datasource", "mymodule", ...) use phase oopevent cachejson iocookie type module source YUI({ modules: { anothermodule: { fullpath: 'http://eg.com/mod.js', requires: [‘anim’, ‘stylesheet’, ... ] } }}).use("anothermodule", ...)

YUI Global data cu another cu my s add phase moduleto module node event dd io oop st source om m YUI / Yahoo! CDN image data style lo cod ca e anim json loader type sheet cookie cache tio n image YUI().use("imageloader", ...) oop event node loader data my data Y.use("datasource", "mymodule", ...) use phase oopevent cachejson iocookie type module source YUI({ modules: { my anothermodule: { oop event node module fullpath: 'http://eg.com/mod.js', requires: [‘anim’, ‘stylesheet’, ... ] } style another dd anim }}).use("anothermodule", ...) sheet module

YUI Gallery

YUI Gallery http://yuilibrary.com/gallery/

YUI Gallery http://github.com/yui/yui3-gallery/

YUI Gallery • Your code on Yahoo!’s CDN • Available from any use()

use() your stuff YUI().use(‘tabview’, ‘gallery-yql’, function (Y) { Y.yql(“select * from internet”, function (data) { // Profit }); }); • Available to anybody by use() • Served from Yahoo!’s CDN • Combo loaded with the rest of the requested modules. • Free

YUI Gallery http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing

Wrapping up • JavaScript Library + Lots more • Baked in best practices • Simple pages or complex apps • Evented programming yay! • Infrastructure templates • Docs, examples, community • OMG Gallery

Thanks! Luke Smith @ls_n http://developer.yahoo.com/yui/ http://yuilibrary.com/ http://github.com/yui/ @yuilibrary

Yui3

by Luke Smith on Apr 22, 2010

Accessibility

Tags

Upload Details

Usage Rights

1 Embed 24

Statistics

Yui3 — Presentation Transcript