14. YUI: Primeiros passos
jQuery
$(document).ready(function(){
// Your code here
});
YUI3
YUI().use(‘widget’, function(Y) {
// Your code here
});
15. YUI: Primeiros passos
YUI Sandbox
YUI().use(‘widget’, function(Y) {
// Your code here
var widget = new Y.Widget();
});
16. YUI: Primeiros passos
YUI Sandbox
YUI().use(‘widget’, function(Y) {
// Your code here
var widget = new Y.Widget();
});
Alloy Sandbox
AUI().use(‘widget’, function(A) {
// Your code here
var widget = new A.Widget();
});
20. YUI: Primeiros passos
jQuery vs. YUI
jQuery:
var foo = $('div.foo:first');
foo.someMethod();
YUI3:
var foo = Y.one('div.foo');
if (foo) { foo.someMethod(); }
31. Por que usar YUI3?
• Built-in Lazy Loading
• Base
• Widget
• Graphics
• Custom Events
• Muito mais
32. Por que usar YUI3?
Loader Module
YUI().use(‘mod1’,‘mod2’, function(Y) {
// Your code here
var widget = new Y.Widget();
});
Scripts block downloads in
IE6&7, Firefox 2&3.0, Safari
3, Chrome 1, and Opera
Scripts downloads in parallel
33. Por que usar YUI3?
Y.Base
Y.User = A.Component.create({
NAME: 'User', var user1 = new Y.User({
nome: ‘Eduardo’
ATTRS: { });
nome: { value: 'Default name' }
},
EXTENDS: Y.Base,
prototype: {
initializer: function() {}
}
});
44. Diagram Builder
• Drag-and-drop interface
• HTML5 and web standards (no flash)
• Support modern browsers and devices
• HTML vs Graphic API
• Flexible and extensible API