• Save
YUI for your Hacks
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

YUI for your Hacks

on

  • 1,986 views

Presentation at Open Hack Day Bangalore 2010

Presentation at Open Hack Day Bangalore 2010

Statistics

Views

Total Views
1,986
Views on SlideShare
1,985
Embed Views
1

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

YUI for your Hacks Presentation Transcript

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