Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YUI for your Hacks

2,021 views

Published on

Presentation at Open Hack Day Bangalore 2010

Published in: Technology
  • Be the first to comment

YUI for your Hacks

  1. 1. YUI for your hacks<br />Subramanyan Murali<br />Web Developer, Hacker, Photographer<br />Yahoo! Content Engineering<br />
  2. 2. “The browser is an inefficient and inconsistent application platform”<br />- Douglas Crockford<br />
  3. 3. It is an dynamic environment with a lot of inconsistencies and challenges forus engineers to think harder <br /><br />3<br />
  4. 4. … hence we end up spending more time fixing the mess, rather than developing something cool <br /><br />4<br />
  5. 5. So we decided to dust the mess under the covers and give you <br />5<br />
  6. 6. YUI is all about doing more with less <br />6<br />
  7. 7. YUI 2.x gave you over 30 components to play with<br />7<br />
  8. 8. YUI 2.x gave the developer the ability to quickly build up great web interactions … <br />8<br />
  9. 9. But YUI 2.x was fun for Open hack day 2009<br />9<br />
  10. 10. Step aside YAHOO, <br />here comes YUI<br />10<br />
  11. 11. YUI.use(‘lighter’, function(Y) { <br />Y.all(‘.fasterli’).each( function(li) { <br />li.set(‘innerHTML’, ‘easier’); <br /> }); <br />});<br />11<br />
  12. 12. YUI 3 was built to be lighter, faster and easier to work with<br />12<br />
  13. 13. YUI 3 is Lighter <br />Load only the stuff you need <br />YUI 3 automatically determines the dependencies and loads it on your page <br />Code is optimized <br />Learnt from mistakes in YUI 2 <br />Better version support <br />13<br />
  14. 14. YUI 3 is Faster <br />Code was re-factored for better performance <br />Ability to sandbox your code<br />14<br />
  15. 15. YUI 3 is Easier <br />Consistent API<br />Support for chaining <br />Selectors support to easily traverse the DOM tree<br />Ability to use YUI 2 and YUI 3 together<br />Dependencies are self populating <br />15<br />
  16. 16. <script src=“yui-min.js”> <script> <br /><script type=‘text/javascript’> YUI().use(“anim”, function(Y) {<br />varx = new Y.Anim({<br /> node : “#some”, <br /> easing : Y.Easing.bounceOut<br /> });<br />x.run()<br /> }); <br /></script> <br />16<br />
  17. 17. Node is the core for YUI 3 DOM manipulation<br />Normalized event handling<br />17<br />
  18. 18. 18<br />// Native Events<br />Y.one(‘.cona’).on(‘click’, handler);<br />// Custom Events<br />slider.on(‘valueChange’, handler);<br />
  19. 19. YUI 3 has better support for ‘interesting moments’ on the page<br />19<br />
  20. 20. //Create a YUI instance<br />YUI().use(‘event-custom’, function(Y) { <br /> function publisher() {<br />Y.fire(‘my-app:started’); <br /> }<br /> ….<br /> function subscriber() {<br />Y.on(‘my-app:started’, function(e) {<br />e.preventDefault();<br /> };<br />Y.after(‘my-app:started’, function(e) {<br /> ….<br /> }; <br /> }<br />});  <br />20<br />
  21. 21. Node can be batched as NodeList, operations can be batched on NodeListas well<br />21<br />
  22. 22. 22<br />// Node List<br />Y.all(‘.conli’).addClass(‘some’);<br />// Helper Functions on Node List<br />Y.all(‘.conli’).each(function(item, i){<br />item.set(‘innerHTML’, ‘wow ’+i);<br />});<br />
  23. 23. Fetching data has never been easier, same domain or X-domain <br />23<br />
  24. 24. // Create a YUI instance using io-base module.<br />YUI().use(‘io-base’, function(Y) { <br />varuri = “get.php?foo=bar”;   <br /> function complete(id, o, args) { <br />var id = id, // Transaction ID<br /> data = o.responseText, // Response data<br />args = args[1]; // ‘a’<br /> };   <br /> // Subscribe to event io:complete<br />Y.on(‘io:complete’, complete, Y, [‘a’, ‘b’]);   <br /> // Make an HTTP request to get.php<br />var request = Y.io(uri); <br />}); <br />24<br />
  25. 25. // Create a YUI instance using io-xdr module.<br />YUI().use(‘io-xdr’, function(Y) {<br />varxdrCfg = { src : ‘io.swf’ };<br />Y.io.transport( xdrCfg );<br />varcfg = {<br />xdr : { use : ‘flash’ },<br /> data : ‘foo=bar&baz=boo’,<br /> timeout : 3000, <br /> };<br />Y.on( ‘io:success’, function( id, o, args ) {<br />var data = o.responseText; // handle data<br />},this);<br /> // Start the transaction<br />var request = Y.io( uri, cfg);<br />});<br />25<br />
  26. 26. We handle the browser mess, you concentrate on your Hack<br />26<br />
  27. 27. YUI 3 is Open source and you can contribute …<br />http://yuilibrary.com/projects/yui3/ <br />27<br />
  28. 28. You can even use YUI 2 modules within a YUI 3 sandbox … <br />28<br />
  29. 29. YUI().use(‘dd-drag’, ‘yui2-calendar’, <br />function(Y) { //Will run YUI 2 code unmodified <br />var YAHOO = Y.YUI2;   <br />varCalender = YAHOO.widget.Calender;<br />var cal = new Calendar(‘calCont’); <br />cal.renderEvent.subscribe(function() {<br />vardd = new Y.DD.Drag({ <br /> node: ‘#calCont’<br /> }).addHandle(‘div.calheader’); <br /> });<br />cal.render(); <br />});<br />29<br />
  30. 30. Or use the cool things that others have already created …<br />http://yuilibrary.com/gallery/<br />30<br />
  31. 31. YUI().use(‘node’, <br /> ‘gallery-storage-lite’, <br /> ‘yui2-editor’, <br />function(Y) {   <br />var YAHOO = Y.YUI2;<br />var STORE = Y.StorageLite;<br /> …..<br /> }<br />); <br />31<br />
  32. 32. YUI has a lot of documentation, examples and is backed by a strong community<br />http://developer.yahoo.com/yui/3/<br />http://developer.yahoo.com/yui/3/examples/<br />http://yuilibrary.com/gallery/<br />http://yuiblog.com/<br />32<br />
  33. 33. Start with an Idea<br />Search the Data <br />Solve the problem <br />Present it with YUI <br />33<br />
  34. 34. “An idea can transform the world and rewrite all the rules ” <br /><ul><li>Cobb, “Inception”</li></ul>Happy Hacking !!!<br />34<br />
  35. 35. Contact <br />Photos<br /> http://flickr.com/photos/rmsguhan<br />Blog <br />http://rmsguhan.com<br />Twitter <br />@rmsguhan<br />35<br />

×