Yui3
Upcoming SlideShare
Loading in...5
×
 

Yui3

on

  • 5,634 views

 

Statistics

Views

Total Views
5,634
Views on SlideShare
5,610
Embed Views
24

Actions

Likes
14
Downloads
139
Comments
1

1 Embed 24

http://www.slideshare.net 24

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • cool,thanks
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Yui3 Yui3 Presentation Transcript

  • Yahoo! User Interface http://developer.yahoo.com/yui @yuilibrary Luke Smith (@ls_n)
  • server
  • (X)HTML server
  • (X)HTML Specification server
  • (X)HTML Specification Implementation server
  • (X)HTML Specification Implementation Bugs server
  • (X)HTML Specification Implementation Bugs [ Theory / Practice ] server
  • CSS BOM API (X)HTML DOM JavaScript DOM API Specification 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 Specification 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 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 Profiler
  • 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 Profiler YUI Blog yuilibrary forum Developer YUI Theater #yui (freenode)
  • YUI 3 YUI Gallery
  • 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 file (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/configurator/
  • 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