This document introduces the Yahoo! User Interface (YUI) library and highlights its key features and advantages for web development. YUI 3 aims to make development lighter, faster and easier by providing a consistent API, optimized code, and the ability to load only required modules. It helps address inconsistencies in the browser environment and makes tasks like DOM manipulation, event handling and data fetching simpler. The library is open source and supported by a large community and gallery of additional components. Developers are encouraged to use YUI to focus on their ideas rather than browser quirks.

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 forus 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(‘.fasterli’).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. <script src=“yui-min.js”> <script> <script type=‘text/javascript’> YUI().use(“anim”, function(Y) { varx = new Y.Anim({ node : “#some”, easing : Y.Easing.bounceOut }); x.run() }); </script> 16

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

18. 18 // Native Events Y.one(‘.cona’).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 NodeListas well 21

22. 22 // Node List Y.all(‘.conli’).addClass(‘some’); // Helper Functions on Node List Y.all(‘.conli’).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) { 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

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