YUI for your Hacks

1,875 views
1,807 views

Published on

Presentation at Open Hack Day Bangalore 2010

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,875
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 />

×