Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to YUI3 - Palouse Code Camp 2010

1,045 views

Published on

Slides from Introduction to YUI3 talk I gave at Palouse Code Camp 2010. The project and source used for this talk are on GitHub, here: http://github.com/foxxtrot/yui3intro

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to YUI3 - Palouse Code Camp 2010

  1. 1. Introduction to YUI 3 Jeff Craig May 13, 2010 Jeff Craig () Introduction to YUI 3 May 13, 2010 1 / 21
  2. 2. About Me Who am I? Software Developer at Washington State University Contact: foxxtrot@foxxtrot.net http://blog.foxxtrot.net/ twitter.com/foxxtrot github.com/foxxtrot Jeff Craig () Introduction to YUI 3 May 13, 2010 2 / 21
  3. 3. YUI What What is YUI? Housed and Developed at Yahoo! YUI2 Released in 2006, still actively supported YUI3 launched late 2009 Used across most Yahoo! properties, new development is in YUI3 Designed to be scalable, fast, secure, and modular Jeff Craig () Introduction to YUI 3 May 13, 2010 3 / 21
  4. 4. YUI What YUI3 Structure Core Component Infrastructure Utilities Widgets Developer Tools Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21
  5. 5. YUI What YUI3 Structure Core Lang, UA, Queue, Object, Get, Array, Node, Event Component Infrastructure Utilities Widgets Developer Tools Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21
  6. 6. YUI What YUI3 Structure Core Component Infrastructure Base, Attribute, Plugin, Widget Utilities Widgets Developer Tools Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21
  7. 7. YUI What YUI3 Structure Core Component Infrastructure Utilities Animation, Cache, Cookie, DataSchema, IO, JSON, ImageLoader, Internationalization, etc. Widgets Developer Tools Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21
  8. 8. YUI What YUI3 Structure Core Component Infrastructure Utilities Widgets Overlay, Slider, TabView, GridView Developer Tools Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21
  9. 9. YUI What YUI3 Structure Core Component Infrastructure Utilities Widgets Developer Tools Console, Profiler, Test Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21
  10. 10. YUI Why? Why YUI3? Modular: Load only the code you need. Flexible: Base functionality provides flexible Attribute and Plugin systems Complete: Tons of utilities available now, and widgets are coming Fast: Demonstrable faster at common tasks, and fast enough for one of the worlds largest websites. Jeff Craig () Introduction to YUI 3 May 13, 2010 5 / 21
  11. 11. YUI Why Not? Why not YUI3? Your existing codebase works Many widgets haven’t been ported yet. Jeff Craig () Introduction to YUI 3 May 13, 2010 6 / 21
  12. 12. YUI Why Not? Why not YUI3? Your existing codebase works Many widgets haven’t been ported yet. Some will not be. Jeff Craig () Introduction to YUI 3 May 13, 2010 6 / 21
  13. 13. YUI SimpleYUI SimpleYUI Introduced with YUI 3.2 Eliminates the Sandbox Fastest way to get started with YUI3 Provides Node/Events, Transitions, IO Jeff Craig () Introduction to YUI 3 May 13, 2010 7 / 21
  14. 14. YUI SimpleYUI Why not use SimpleYUI? There are performance benefits to using the module pattern There is safety in the sandbox You have more control in standard YUI Jeff Craig () Introduction to YUI 3 May 13, 2010 8 / 21
  15. 15. YUI Community YUI3 and the Community With YUI3, the team refocused on open-source. They launched YUI3 with a public bug tracker and forums, and put the source up on GitHub. In October 2009, the Gallery launched, providing a mechanism for modules to be shared easily outside of the core of YUI, including offering hosting on the Yahoo! CDN for modules, and easy inclusion within YUI3 projects. In early 2010, the YUI Team began hosting ”YUI Open Hours” a periodic conference call. Jeff Craig () Introduction to YUI 3 May 13, 2010 9 / 21
  16. 16. YUI Resources YUI Resources http://yuilibrary.com/ http://developer.yahoo.com/yui/3/ http://github.com/yui/ http://yuiblog.com/ http://twitter.com/miraglia/yui/members Jeff Craig () Introduction to YUI 3 May 13, 2010 10 / 21
  17. 17. YUI Standard Utilities Node Y.one(’#nav’); Y.all(’#nav li’); Y.one returns a ’Node’ Y.all returns a ’NodeList’ Jeff Craig () Introduction to YUI 3 May 13, 2010 11 / 21
  18. 18. YUI Standard Utilities Node Methods var input = Y.one(’input[type=text]’); input.addClass(’hide’); // Add the ’hide’ class to the node input.removeClass(’hide’); input.toggleClass(’hide’); input.get(’value’); input.getStyle(’display’); input.test(’.hide’); // Tests if the node matches a selctor Jeff Craig () Introduction to YUI 3 May 13, 2010 12 / 21
  19. 19. YUI Standard Utilities NodeList Methods var items = Y.one(’li’); items.filter(’.hidden’); items.even().addClass(’even’); items.odd().addClass(’odd’); items.item(4); // NOT an array-like object items.size(); items.each(function(item, index, list) { // Treat this kind of like a for loop. }); Jeff Craig () Introduction to YUI 3 May 13, 2010 13 / 21
  20. 20. YUI Standard Utilities Events Y.on(’click’, handler, ’#actionButton’); handler = function(e) { // e is a DOM Event Facade // Same betwen all browsers e.halt(); // Stop propogation and default action e.preventDefault(); e.stopPropogation(); } Same syntax as custom events Support for touch events Jeff Craig () Introduction to YUI 3 May 13, 2010 14 / 21
  21. 21. YUI Standard Utilities Event Delegation Y.delegate(’click’, handler, ’#container’, selector); Assign one event, on the container, but only call the handler on children that match the selector. Jeff Craig () Introduction to YUI 3 May 13, 2010 15 / 21
  22. 22. YUI Standard Utilities Event Delegation Y.delegate(’click’, handler, ’#container’, selector); Assign one event, on the container, but only call the handler on children that match the selector. Doesn’t fix non-bubbling events, like change-events in Internet Explorer Jeff Craig () Introduction to YUI 3 May 13, 2010 15 / 21
  23. 23. YUI Standard Utilities YUI3 Templating TEMPLATE = "<li><a href=’{link}’>{label}</a></li>"; data = { link: "http://blog.foxxtrot.net/", label: "My Blog" }; Y.Lang.sub(TEMPLATE, data); Jeff Craig () Introduction to YUI 3 May 13, 2010 16 / 21
  24. 24. YUI Standard Utilities Advanced YUI3 Templating TEMPLATE = "<li class=’{selected}’><a href=’{link}’>{label}</a data = { link: "http://blog.foxxtrot.net/", label: "My Blog", selected: true }; Y.use(’substitutue’, function(Y) { Y.substitute(TEMPLATE, data, function(key, value) { if(key === "selected") { return value ? "selected" : ""; } return value; }); }); Jeff Craig () Introduction to YUI 3 May 13, 2010 17 / 21
  25. 25. YUI AJAX Server Calls Y.io("/path/to/request", { method: ’GET’, data: ’field1=value&field2=3’, on: { start: handler, complete: handler, success: handler, failure: handler, end: handler } sync: false, timeout: 2000 }); Jeff Craig () Introduction to YUI 3 May 13, 2010 18 / 21
  26. 26. YUI AJAX JSON Y.JSON.stringify({ name: "Jeff Craig", nick: "foxxtrot", session: "Intro to YUI3" }); Y.JSON.parse("{’event’: ’Palouse Code Camp’, ’date’: ’2010.10.30’}"); Jeff Craig () Introduction to YUI 3 May 13, 2010 19 / 21
  27. 27. YUI AJAX Transistions Y.one(’#demo’).transition({ duration: 1, // seconds easing: ’ease-out’, height: 0, width: 0, left: ’150px’, top: ’100px’, opacity: 0 }, function() { Y.one(’#demo’).destroy(true); } ); Jeff Craig () Introduction to YUI 3 May 13, 2010 20 / 21
  28. 28. YUI End Notes Links YUI: http://yuilibrary.com/ http://developer.yahoo.com/yui/3/ http://github.com/yui/ http://yuiblog.com/ http://twitter.com/miraglia/yui/members Me: foxxtrot@foxxtrot.net http://blog.foxxtrot.net/ twitter.com/foxxtrot github.com/foxxtrot Jeff Craig () Introduction to YUI 3 May 13, 2010 21 / 21

×