Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery Jumble

jQuery Jumble

A collection of three jQuery techniques for a designer/developer audience. Pairs with this project on Github: http://github.com/dcneiner/frontend-shop

Doug Neiner

June 21, 2013
Tweet

More Decks by Doug Neiner

Other Decks in Programming

Transcript

  1. View Slide

  2. Doug Neiner
    @dougneiner

    View Slide

  3. I

    View Slide

  4. View Slide

  5. Audience
    This presentation was crafted specifically for delivery at the Front End Design
    Conference in St. Petersburg, FL. The audience consisted of designers who use
    jQuery very little through developers who use jQuery regularly.
    The slide portion of this presentation covers the three primary topics I covered
    during live coding.
    If you have any questions after watching this presentation and looking at the code,
    please let me know: [email protected] (Be sure to reference this presentation
    when emailing!)

    View Slide

  6. How much do you jQuery?
    audience poll
    Results:

    View Slide

  7. jum•ble |ˈjəmbəl |
    “an untidy collection
    or pile of things”
    – New Oxford American Dictionary

    View Slide

  8. Slides Coding
    QUESTIONS
    This

    View Slide

  9. What

    View Slide

  10. jQuery
    • DOM Manipulation (Find something, do something)
    • Event Delegation
    • AJAX
    • Deferreds/Promises
    • CSS/Animation

    View Slide

  11. In a Jumble
    jQuery & CSS
    #1

    View Slide

  12. jQuery: What & How
    • show() or hide()
    • What: I want my element to be hidden or visible
    • How: Show or hide by setting adjusting the `display`. It will appear or disappear
    immediately when this setting is changed.
    • slideUp() or slideDown();
    • What: I want my element to be hidden or visible via a nice animation
    • How: Show or hide by animating the height property.
    • How: I want the animation to last exactly 400ms.

    View Slide

  13. jQuery: What & How
    • show() or hide()
    • What: I want my element to be hidden or visible
    • How: Show or hide by setting adjusting the `display`. It will appear or disappear
    immediately when this setting is changed.
    • slideUp() or slideDown();
    • What: I want my element to be hidden or visible via a nice animation
    • How: Show or hide by animating the height property.
    • How: I want the animation to last exactly 400ms.
    NO

    View Slide

  14. .my-­‐product  {  display:  none;  }
    .my-­‐product.is-­‐visible  {  display:  block;  }
    jQuery: WHAT & CSS: HOW
    jQuery: What
    CSS: How
    $el.addClass(  "is-­‐visible"  );
    $el.removeClass(  "is-­‐visible"  );
    This

    View Slide

  15. CSS: How
    .my-­‐product  {
    left:  -­‐100%;
    transition:  left  linear  500ms;
    }
    .my-­‐product.is-­‐visible  {
    left:  0;
    }
    jQuery: What & CSS: How
    But,

    View Slide

  16. Why?
    • CSS classes can easily affect decedent elements
    • Adding an `is-visible` class describes the state, but allows the CSS to manage
    exactly how it becomes and remains visible.
    • Visible no longer has to mean “display: block”
    • Invisible can now mean low opacity instead of completely hidden
    • CSS animation via transitions can be used as part of the showing or hiding

    View Slide

  17. jQuery applies the classes, CSS controls the rest
    jquery controls the "what"
    CSS CONTROLS the "how"

    View Slide

  18. Animation & jQuery
    • Animation was how I started using jQuery
    • CSS3 Transitions and animations have come a long way
    • Class-based CSS3 Transitions have inherent fallbacks for older browsers

    View Slide

  19. Event Delegation
    #2

    View Slide

  20. Event delegation
    • Event bubbling allows it to work
    (This is patched by jQuery as necessary)
    • One event on a parent vs. many events on children
    • Filtering vs. Traversal
    • Responsible events – only run on user action
    • Can be added before the document is ready
    • Forces a contextual approach

    View Slide

  21. Event Delegation
    click
    click
    click
    click
    click
    click
    click
    click
    click
    click
    click
    click
    CONTAINER CONTAINER

    View Slide

  22. BOUND vs DELEGATED
    • Separate handler for each element
    • Executes only when event is
    triggered on bound elements
    • Elements can be retrieved ahead
    of time
    • Must be bound after the DOM is
    ready
    • Single handler for all elements
    • Checks event on every element in
    its context, and executes when a
    match is found
    • Elements should be retrieved at
    run time
    • Can be setup as soon as the
    context element is ready

    View Slide

  23. syntax
    $(  "a"  ).on(  "click",  function  ()  {  ...  }  );
    $(  document  ).on(  "click",  "a",  function  ()  {  ...  }  );
    $(  document  ).delegate(  "a",  "click",  function  ()  {  ...  }  );
    Older

    View Slide

  24. Problem with live
    $(  "a"  ).live(  "click",  function  ()  {  ...  }  );
    • Step 1: Search all the DOM for "a"
    • Step 2: Throw away the result
    • Step 3: Create a delegated event for "click" on an "a"
    Live

    View Slide

  25. jQuery.DEFERRED
    #3

    View Slide

  26. Traditional Callbacks
    $.get(  "/path/to",  function  (  data  )  {
         console.log(  "I  got  my  data!!!",  data  );
    });

    View Slide

  27. More Callbacks
    $.get(  "/path/to/1",  function  (  data1  )  {
         $.get(  "/path/to/2",  function  (  data2  )  {
               $.get(  "/path/to/3",  function  (  data3  )  {
                     console.log(  "I  got  my  data!!!",  data  );
               });
         });
    });

    View Slide

  28. Problem with Callbacks
    • They queue up
    The first has to finish before the nested call can begin.
    • Potential for Ugly, nested code
    • You still need to handle caching

    View Slide

  29. Deferred
    $.get(  "/path/to"  )
     .then(function  (  data  )  {
         console.log(  "I  got  my  data!!!",  data  );
     });

    View Slide

  30. Multiple Deferreds
    $.when(
     $.get(  "/path/to/1"  ),
     $.get(  "/path/to/2"  ),
     $.get(  "/path/to/3"  )
    ).then(function  (  ret1,  ret2,  ret3  )  {
       console.log(  "I  got  my  data!!!",  ret3[0]  );
    });
    Each

    View Slide

  31. What is a Deferred?
    • An object that starts in an unresolved state
    • Can either be rejected or resolved with data
    • Once resolved or rejected, it remains forever in that state
    • It can do a LOT more as well. See http://api.jquery.com/jquery.deferred for more
    information.

    View Slide

  32. $.then
    • jQuery’s implementation is based on Promises/A Spec, but not fully compliant
    • "Thenable" is the primary API for Deferreds
    $.get(  "/path/to"  )
     .then(  passCallback,  failCallback  );

    View Slide

  33. $.WHEN
    Creates a new deferred that resolves a set of deferreds or values are ready. For
    non-deferreds, truthy values trigger a resolve, falsey trigger a reject.
    $.when(  deferredOne(),  deferredTwo(),  true  )
    .then(  function  (  res1,  res2,  res3  )  {
    });

    View Slide

  34. $.done and $.fail
    Shortcut versions of one part of $.then(  pass,  fail  );
    //  Done  vs  Then
    dfd.done(  function  ()  {  …  }  );
    dfd.then(  function  ()  {  …  }  );
    //  Fail  vs  Then
    dfd.fail(  function  ()  {  …  }  );
    dfd.then(  null,  function  ()  {  …  }  );

    View Slide

  35. Creating a deferred
    var  dfd  =  $.Deferred();
    dfd.then(  function  (  data  )  {
         console.log(  data  );  //  Logs  out,  It  worked
    });
    //  Some  long  running  operation
    dfd.resolve(  "It  worked"  );

    View Slide

  36. Resolving and rejecting
    dfd.resolve(  {  successData:  true  }  );
    //  OR
    dfd.reject(  {  errorMessage:  "Something  is  wrong!"  }  );

    View Slide

  37. Promising
    var  createDfd  =  function  ()  {
         var  dfd  =  $.Deferred();
         ...
         return  dfd.promise();
    };
    //  Fails,  no  method  named  "resolve"
    createDfd().resolve(  "Something"  );

    View Slide

  38. Creating & Promising
    var  promise  =  $.Deferred(  function  (  d  )  {
         d.resolve(  "It  worked!"  );
    }).promise();
    • Create the deferred and return a promise in one statement.
    • The callback will be invoked with the new Deferred as the first parameter

    View Slide

  39. Alternative
    • If all you need are promises, there are other options than jQuery.
    • One option is a State Machine library Machina plus a plugin I wrote for it:
    Machina.Promise (Promises/A Compliant)
    http://github.com/a2labs/machina.promise

    View Slide

  40. Lets Code!
    Finished code is available here:
    https://github.com/dcneiner/frontend-shop

    View Slide

  41. Links
    • Front End Shop (Example Project)
    http://github.com/dcneiner/frontend-shop
    • Contextual jQuery Video (jQuery UK 2012)
    http://vimeo.com/40873228
    • Machina Introduction Video (jQuery UK 2013)
    http://vimeo.com/67473899
    • jQuery Build Tool
    http://projects.jga.me/jquery-builder

    View Slide

  42. Links
    • Postman for Chrome
    http://www.getpostman.com/
    • Detecting AJAX Events on the Server
    http://www.learningjquery.com/2010/03/detecting-ajax-events-on-the-server

    View Slide

  43. Thank You!
    @dougneiner

    View Slide