Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

YUI 3 quick overview

on

  • 4,421 views

A quick high level run through of the YUI Library project and a look at some of the patterns and APIs in YUI 3.

A quick high level run through of the YUI Library project and a look at some of the patterns and APIs in YUI 3.

Statistics

Views

Total Views
4,421
Views on SlideShare
4,358
Embed Views
63

Actions

Likes
14
Downloads
112
Comments
2

1 Embed 63

http://www.marcosomo.com 63

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…
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
    Are you sure you want to
    Your message goes here
    Processing…
  • good starting point for YUI3
    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 />

YUI 3 quick overview Presentation Transcript

  • 1. Yahoo! User Interface http://developer.yahoo.com/yui @yuilibrary Luke Smith (@ls_n)
  • 2. What is YUI?
  • 3. What is YUI? JavaScript library
  • 4. What is YUI? JavaScript library CSS grids package
  • 5. What is YUI? JavaScript library CSS grids package True*
  • 6. YUI Library Project • JavaScript library • CSS foundation • Documentation tools • Build tools • Testing tools • Server side delivery tools • Developer education
  • 7. YUI Library Project YUI 2 JavaScript core, utilities, widgets; CSS foundation including Grids
  • 8. YUI Library Project YUI 2 YUI 3 JavaScript core, utilities, widgets; JavaScript core, utilities; CSS CSS foundation including Grids foundation; Gallery.
  • 9. 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.
  • 10. 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.
  • 11. 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 & Yeti Comprehensive unit testing solution for any JS code.
  • 12. 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 & Yeti YUI Theater Comprehensive unit testing Video library on the discipline solution for any JS code. of frontend engineering.
  • 13. 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 & Yeti 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.
  • 14. 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 & Yeti 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.
  • 15. YUI 2 YUI 3 + Gallery Client YUI 2 CSS YUI 3 CSS
  • 16. YUI 2 YUI 3 + Gallery Client YUI 2 CSS YUI 3 CSS CDN hosting PHPLoader Server Combo Loader YUI3 + Node.js YUI Doc Builder YUI Test Compressor Development Yeti Profiler YUI Blog yuilibrary forum Developer YUI Theater #yui (freenode)
  • 17. YUI 3 + Gallery
  • 18. YUI 3 + Gallery
  • 19. YUI 3 First Concepts • DOM, Events, Ajax • Loading • Custom events • Component infrastructure
  • 20. 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...
  • 21. Events node.on("click", 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
  • 22. 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
  • 23. Ajax Y.io(url, config); new Y.DataSource.IO(config); Y.jsonp(url, callback); Y.yql(query, callback); • XHR normalization • Cross Domain (XDR) • Asynchronous form submit • Lots of ways to link to remote data
  • 24. YUI 3 First Concepts ✓DOM, Events, Ajax • Loading • Custom events • Component infrastructure
  • 25. Before • Large blocking script for core features
  • 26. Before • Large blocking script for core features • Multiple blocking <scripts> for more features
  • 27. Before • Large blocking script for core features • Multiple blocking <scripts> for more features • Dependent scripts can fail when out of order
  • 28. 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
  • 29. 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
  • 30. Loading YUI 3 <script src=”http://yui.yahooapis.com/3.3.0pr1/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
  • 31. After • Seed file (8K) • Module strategy (order independence) • Feature level submodularity (no dead code) • Optimal async loading (one non-blocking http request) • Dependency resolution (DWIW)
  • 32. http://developer.yahoo.com/yui/3/configurator/
  • 33. Y.use(...)
  • 34. Y.use(...) Y.use(...)
  • 35. Y.use(...) Y.use(...) Y.use(...) Y.use(...) ...
  • 36. ๏ One page
  • 37. ๏ One page ๏ n applications
  • 38. ๏ One page ๏ n applications ๏ Start with seed, base modules
  • 39. ๏ One page ๏ n applications ๏ Start with seed, base modules ๏ After that, the user decides what loads
  • 40. YUI 3 First Concepts ✓DOM, Events, Ajax ✓Loading • Custom events • Component infrastructure
  • 41. 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
  • 42. Custom events http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events
  • 43. YUI 3 First Concepts ✓DOM, Events, Ajax ✓Loading ✓Custom events • Component infrastructure
  • 44. Component infrastructure = Your stuff
  • 45. Your stuff • Attribute
  • 46. Your stuff • Attribute • Base
  • 47. Your stuff • Attribute • Base • Plugin
  • 48. Your stuff • Attribute • Base • Plugin • Widget
  • 49. 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/
  • 50. 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/
  • 51. 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/
  • 52. 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/
  • 53. Infrastructure http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets
  • 54. YUI 3 First Concepts ✓ DOM, Events, Ajax ✓ Loading ✓ Custom events ✓ Component infrastructure
  • 55. Putting it together • Write reusable modules • Your modules in use(...) • YUI Gallery
  • 56. YUI.add YUI.add(‘my-module’, function (Y) { Y.MyAwesomeWidget = function () {...}; Y.extend(Y.MyAwesomeWidget, Y.Widget, { ... }); }, ‘0.0.1’, { requires: [‘widget’] }); • Expose API on Y • Identify requirements • Same infrastructure used by YUI modules
  • 57. use() your stuff YUI.add(‘my-module’, ...); YUI().use(‘io’, ‘my-module’, ‘anim’, function (Y) { var instance = new Y.MyAwesomeWidget(); }); • Same API to load any module • Sandboxed, order independent, dependency resolution, etc
  • 58. YUI Gallery
  • 59. YUI Gallery 23 m 2 od ul es an d co un tin g http://yuilibrary.com/gallery/
  • 60. YUI Gallery http://github.com/yui/yui3-gallery/
  • 61. YUI Gallery • Your code on Yahoo!’s CDN • Available from any use()
  • 62. use() your stuff YUI().use(‘yql’,‘gallery-slideshow’, function (Y) { var slideshow = new Y.Slideshow({ srcNode : "#slideshow", duration: 5000, images : img_array }); slideshow.render(); • Available to anybody by use() • Served from Yahoo!’s CDN • Combo loaded with the rest of the requested modules. • Free
  • 63. YUI Gallery http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing
  • 64. 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
  • 65. Thanks! Luke Smith @ls_n http://developer.yahoo.com/yui/ http://yuilibrary.com/ http://github.com/yui/ @yuilibrary #yui on freenode