12. YUI 3 was built to be lighter, faster and easier to work with 12
13. YUI 3 is Lighter Load only the stuff you need YUI 3 automatically determines the dependencies and loads it on your page Code is optimized Learnt from mistakes in YUI 2 Better version support 13
14. YUI 3 is Faster Code was re-factored for better performance Ability to sandbox your code 14
15. YUI 3 is Easier Consistent API Support for chaining Selectors support to easily traverse the DOM tree Ability to use YUI 2 and YUI 3 together Dependencies are self populating 15
24. // Create a YUI instance using io-base module. YUI().use(‘io-base’, function(Y) { varuri = “get.php?foo=bar”; function complete(id, o, args) { var id = id, // Transaction ID data = o.responseText, // Response data args = args[1]; // ‘a’ }; // Subscribe to event io:complete Y.on(‘io:complete’, complete, Y, [‘a’, ‘b’]); // Make an HTTP request to get.php var request = Y.io(uri); }); 24
25. // Create a YUI instance using io-xdr module. YUI().use(‘io-xdr’, function(Y) { varxdrCfg = { src : ‘io.swf’ }; Y.io.transport( xdrCfg ); varcfg = { xdr : { use : ‘flash’ }, data : ‘foo=bar&baz=boo’, timeout : 3000, }; Y.on( ‘io:success’, function( id, o, args ) { var data = o.responseText; // handle data },this); // Start the transaction var request = Y.io( uri, cfg); }); 25
26. We handle the browser mess, you concentrate on your Hack 26
27. YUI 3 is Open source and you can contribute … http://yuilibrary.com/projects/yui3/ 27
28. You can even use YUI 2 modules within a YUI 3 sandbox … 28
29. YUI().use(‘dd-drag’, ‘yui2-calendar’, function(Y) { //Will run YUI 2 code unmodified var YAHOO = Y.YUI2; varCalender = YAHOO.widget.Calender; var cal = new Calendar(‘calCont’); cal.renderEvent.subscribe(function() { vardd = new Y.DD.Drag({ node: ‘#calCont’ }).addHandle(‘div.calheader’); }); cal.render(); }); 29
30. Or use the cool things that others have already created … http://yuilibrary.com/gallery/ 30
31. YUI().use(‘node’, ‘gallery-storage-lite’, ‘yui2-editor’, function(Y) { var YAHOO = Y.YUI2; var STORE = Y.StorageLite; ….. } ); 31
32. YUI has a lot of documentation, examples and is backed by a strong community http://developer.yahoo.com/yui/3/ http://developer.yahoo.com/yui/3/examples/ http://yuilibrary.com/gallery/ http://yuiblog.com/ 32
33. Start with an Idea Search the Data Solve the problem Present it with YUI 33
34.
35. Contact Photos http://flickr.com/photos/rmsguhan Blog http://rmsguhan.com Twitter @rmsguhan 35