Deferreds

Transcript

1. Embracing Async with
   Deferreds & promises
   Sebastian Porto
   @sebasporto
   

   View Slide

2. Let’s do greeting card
   

   View Slide

3. "OJNBUJPO
   "OJNBUJPO
   .VTJD
   .VTJD
   /FYU
   

   View Slide

4. Load animation!
   Load music!
   Show!
   Select !
   animation!
   &!
   music!
   Knowing everything at the start
   

   View Slide

5. var assetsToLoad=2;
   loader.on(‘load’, function(){
   assetsToLoad --;
   if(assetsToLoad===0) show();
   });
   loader.load(anim);
   loader.load(music);
   We can count
   

   View Slide

6. Use a lib (e.g. Async)
   async.parallel([
   loadAnim,
   loadMusic,
   ], show);
   Check Async by the way
   

   View Slide

7. Async is nice and clean but…
   

   View Slide

8. "OJNBUJPO
   "OJNBUJPO
   .VTJD
   .VTJD
   

   View Slide

9. Load animation!
   Load music!
   Show!
   Select !
   animation!
   Select !
   music!
   Wait?!
   Incomplete information
   

   View Slide

10. Load animation!
    Load music!
    Show!
    Select !
    animation!
    Incomplete information
    Select !
    music!
    

    View Slide

11. function onVideoLoaded(){
    checkIfAllLoaded();
    }
    function checkIfAllLoaded(){
    if(videoLoaded && musicLoaded && … )
    show();
    }
    We can count again or"
    use conditionals
    

    View Slide

12. Becomes hard to maintain very
    quickly
    

    View Slide

13. Deferreds to the rescue
    var def = $.Deferred();
    def.done(function(val){
    //… do something
    });
    //… later
    def.resolve(val);
    

    View Slide

14. jQuery Deferreds"
    Underscore deferreds"
    PromisedIO"
    … many others"
    
    

    View Slide

15. They can be aggregated
    var def1 = $.Deferred();
    var def2 = $.Deferred();
    $.when(def1, def2).done(function(one, two){
    //… do something with one and two;
    });
    //… later
    def1.resolve(val);
    //… even later
    def2.resolve(val);
    

    View Slide

16. Load animation!
    Load music!
    Show!
    Select !
    animation!
    Select !
    music!
    To do this
    

    View Slide

17. var animDef = $.Deferred();
    var musicDef = $.Deferred();
    $.when(animDef, musicDef).done(function(){
    show();
    });
    //when the music is loaded
    musicDef.resolve();
    //when the animation is loaded
    animDef.resolve();
    

    View Slide

18. Load animation!
    Load
    music!
    Show!
    Select !
    animation!
    Select !
    music!
    Already resolved?
    

    View Slide

19. var animDef = $.Deferred();
    var musicDef = $.Deferred();
    //…later
    musicDef.resolve();
    //…even later
    $.when(animDef, musicDef).done(function(){
    show();
    });
    //No problem, still triggers, you cannot do
    that with event listeners!
    

    View Slide

20. Fail and reject
    var def = $.Deferred();
    def
    .done(function(result){
    //do something
    })
    .fail(function(){
    //fallback
    });
    //…later, something bad happened
    def.reject();
    

    View Slide

21. Promises
    

    View Slide

22. Promises
    Loader
    function load(){
    def = $.Deferred();
    return def.promise();
    }
    //..later
    function onLoad(){
    def.resolve();
    }
    Caller
    promise = loader.load();
    promise.done(function(){
    ..something
    });
    //Cannot resolve here:
    //promise.resolve() not
    possible
    

    View Slide

23. Combine them to create bigger promises
    var promise1 = $.when(animDef, musDef);
    var promise2 = $.when(msgDef, bgDef);
    $.when(promise1, promise2).done(function(){
    //… do something with anim, music message and
    background
    });
    

    View Slide

24. A!
    C!
    Result!
    B!
    F!
    D!
    E!
    G!
    H!
    

    View Slide

25. View Slide