Introduction to YUI 3
Jeff Craig
May 13, 2010
Jeff Craig () Introduction to YUI 3 May 13, 2010 1 / 21
About Me
Who am I?
Software Developer at Washington State University
Contact:
foxxtrot@foxxtrot.net
http://blog.foxxtrot.n...
YUI What
What is YUI?
Housed and Developed at Yahoo!
YUI2 Released in 2006, still actively supported
YUI3 launched late 20...
YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Developer Tools
Jeff Craig () Introduction to YUI 3...
YUI What
YUI3 Structure
Core
Lang, UA, Queue, Object, Get, Array, Node, Event
Component Infrastructure
Utilities
Widgets
D...
YUI What
YUI3 Structure
Core
Component Infrastructure
Base, Attribute, Plugin, Widget
Utilities
Widgets
Developer Tools
Je...
YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Animation, Cache, Cookie, DataSchema, IO, JSON, ImageLoade...
YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Overlay, Slider, TabView, GridView
Developer Tools...
YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Developer Tools
Console, Profiler, Test
Jeff Craig (...
YUI Why?
Why YUI3?
Modular: Load only the code you need.
Flexible: Base functionality provides flexible Attribute and Plugi...
YUI Why Not?
Why not YUI3?
Your existing codebase works
Many widgets haven’t been ported yet.
Jeff Craig () Introduction to...
YUI Why Not?
Why not YUI3?
Your existing codebase works
Many widgets haven’t been ported yet.
Some will not be.
Jeff Craig ...
YUI SimpleYUI
SimpleYUI
Introduced with YUI 3.2
Eliminates the Sandbox
Fastest way to get started with YUI3
Provides Node/...
YUI SimpleYUI
Why not use SimpleYUI?
There are performance benefits to using the module pattern
There is safety in the sand...
YUI Community
YUI3 and the Community
With YUI3, the team refocused on open-source. They launched YUI3 with
a public bug tr...
YUI Resources
YUI Resources
http://yuilibrary.com/
http://developer.yahoo.com/yui/3/
http://github.com/yui/
http://yuiblog...
YUI Standard Utilities
Node
Y.one(’#nav’);
Y.all(’#nav li’);
Y.one returns a ’Node’
Y.all returns a ’NodeList’
Jeff Craig (...
YUI Standard Utilities
Node Methods
var input = Y.one(’input[type=text]’);
input.addClass(’hide’); // Add the ’hide’ class...
YUI Standard Utilities
NodeList Methods
var items = Y.one(’li’);
items.filter(’.hidden’);
items.even().addClass(’even’);
i...
YUI Standard Utilities
Events
Y.on(’click’, handler, ’#actionButton’);
handler = function(e) {
// e is a DOM Event Facade
...
YUI Standard Utilities
Event Delegation
Y.delegate(’click’, handler, ’#container’, selector);
Assign one event, on the con...
YUI Standard Utilities
Event Delegation
Y.delegate(’click’, handler, ’#container’, selector);
Assign one event, on the con...
YUI Standard Utilities
YUI3 Templating
TEMPLATE = "<li><a href=’{link}’>{label}</a></li>";
data = {
link: "http://blog.fox...
YUI Standard Utilities
Advanced YUI3 Templating
TEMPLATE = "<li class=’{selected}’><a href=’{link}’>{label}</a
data = {
li...
YUI AJAX
Server Calls
Y.io("/path/to/request", {
method: ’GET’,
data: ’field1=value&field2=3’,
on: {
start: handler,
compl...
YUI AJAX
JSON
Y.JSON.stringify({
name: "Jeff Craig",
nick: "foxxtrot",
session: "Intro to YUI3"
});
Y.JSON.parse("{’event’...
YUI AJAX
Transistions
Y.one(’#demo’).transition({
duration: 1, // seconds
easing: ’ease-out’,
height: 0,
width: 0,
left: ’...
YUI End Notes
Links
YUI:
http://yuilibrary.com/
http://developer.yahoo.com/yui/3/
http://github.com/yui/
http://yuiblog.co...
Upcoming SlideShare
Loading in …5
×

Introduction to YUI3 - Palouse Code Camp 2010

921 views
872 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
921
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×