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

1. Introduction to YUI 3
Jeff Craig
May 13, 2010
Jeff Craig () Introduction to YUI 3 May 13, 2010 1 / 21

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. 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. YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Developer Tools
Jeff Craig () Introduction to YUI 3 May 13, 2010 4 / 21

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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