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 hacksSubramanyan MuraliWeb Developer, Hacker, PhotographerYahoo! 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 with7

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 20099

10. Step aside YAHOO, here comes YUI10

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 with12

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 code14

15. YUI 3 is Easier Consistent APISupport for chaining Selectors support to easily traverse the DOM treeAbility to use YUI 2 and YUI 3 togetherDependencies 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 manipulationNormalized event handling17

18. 18// Native EventsY.one(‘.cona’).on(‘click’, handler);// Custom Eventsslider.on(‘valueChange’, handler);

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

20. //Create a YUI instanceYUI().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 well21

22. 22// Node ListY.all(‘.conli’).addClass(‘some’);// Helper Functions on Node ListY.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 dataargs = args[1]; // ‘a’ }; // Subscribe to event io:completeY.on(‘io:complete’, complete, Y, [‘a’, ‘b’]); // Make an HTTP request to get.phpvar 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 transactionvar request = Y.io( uri, cfg);});25

26. We handle the browser mess, you concentrate on your Hack26

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 communityhttp://developer.yahoo.com/yui/3/http://developer.yahoo.com/yui/3/examples/http://yuilibrary.com/gallery/http://yuiblog.com/32

33. Start with an IdeaSearch 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/rmsguhanBlog http://rmsguhan.comTwitter @rmsguhan35