1. YUI for your hacks Subramanyan Murali Web Developer, Hacker, Photographer Yahoo! Content Engineering

2. “The browser is an inefficient and inconsistent application platform” - Douglas Crockford

3. It is an dynamic environment with a lot of inconsistencies and challenges for us engineers to think harder 3

4. … hence we end up spending more time fixing the mess, rather than developing something cool  4

5. So we decided to dust the mess under the covers and give you 5

6. YUI is all about doing more with less 6

7. YUI 2.x gave you over 30 components to play with 7

8. YUI 2.x gave the developer the ability to quickly build up great web interactions … 8

9. But YUI 2.x was fun for Open hack day 2009 9

10. Step aside YAHOO, here comes YUI 10

11. YUI.use(‘lighter’, function(Y) { Y.all(‘.faster li’).each( function(li) { li.set(‘innerHTML’, ‘easier’); }); 11

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

16. YUI().use(“anim”, function(Y) { var x = new Y.Anim({ node : “#some”, easing : Y.Easing.bounceOut }); x.run() }); 16

17. Node is the core for YUI 3 DOM manipulation Normalized event handling 17

18. 18 // Native Events Y.one(‘.con a’).on (‘click’, handler); // Custom Events slider.on(‘valueChange’, handler);

19. YUI 3 has better support for ‘interesting moments’ on the page 19

20. //Create a YUI instance YUI().use(‘event-custom’, function(Y) { function publisher() { Y.fire(‘my-app:started’); } …. function subscriber() { Y.on(‘my-app:started’, function(e) { e.preventDefault(); }; Y.after(‘my-app:started’, function(e) { …. }; } }); 20

21. Node can be batched as NodeList, operations can be batched on NodeList as well 21

22. 22 // Node List Y.all(‘.con li’).addClass(‘some’); // Helper Functions on Node List Y.all(‘.con li’).each(function(item, i){ item.set(‘innerHTML’, ‘wow ’+i); });

23. Fetching data has never been easier, same domain or X-domain 23

24. // Create a YUI instance using io-base module. YUI().use(‘io-base’, function(Y) { var uri = “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) { var xdrCfg = { src : ‘io.swf’}; Y.io.transport( xdrCfg ); var cfg = { 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; var Calender = YAHOO.widget.Calender; var cal = new Calendar(‘calCont’); cal.renderEvent.subscribe(function() { var dd = 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. “ An idea can transform the world and rewrite all the rules ” -Cobb, “Inception” Happy Hacking !!! 34

35. Contact Photos – http://flickr.com/photos/rmsguhan Blog – http://rmsguhan.com Twitter – @rmsguhan 35