Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    1
    Debug is on a distinguished road

      1  

    Default Promises and Deferreds/Futures in Ext JS?

    Promises and Deferreds/Futures in Ext JS?


    Hi All,

    I've utilized Promises/Futures in Boost for C++ and have tried out the equivalent, Promises/Deferreds, in the Dojo Toolkit. I've looked around for something similar in Ext JS but haven't found something yet. I'm still new to Ext JS though so I could have missed it. Any pointers?

    Thanks,
    Bill

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi bill,

    i am not familiar with dojo, but it looks like callbacks to me.

    take a look at:
    http://docs.sencha.com/ext-js/4-0/#/api/Ext.Function

    there is a createSequence for example.

    generally, ext is extremely event-driven (observer pattern) and it is prefered to listen to common events and then do your logic instead of creating chains manually.

    http://docs.sencha.com/ext-js/4-0/#/...til.Observable
    is included in every component and you can listen to render for example.
    you can also fire custom events to listen to.


    best regards
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2011
    Location
    Saarbr├╝cken, Germany
    Posts
    11
    Vote Rating
    0
    s.busch is on a distinguished road

      0  

    Default


    @tobiu Callbacks are not the same.

    Deferreds/promises (aka. Futures) and accompanying tools help managing asynchronous logic, for example when you are waiting for two or more different stores are loaded (in the FuturesJS library this would be a Join with two or more Futures)

    Another example: you want to fire some requests in a fixed sequence which must not overlap (ok, you can accomplish this with nested callbacks, but a large sequence results in a deeply nested logic). Using things like Sequence (FuturesJS library) hide this complexity and help making code with a simpler structure. Ext JS createSequence() to my knowledge doesn't work asynchronously.

    We think Ext JS should provide support for this out-of-the box. It helps a lot for some complex tasks and it's hard to apply this to Ext JS by ourselves by adding external libraries and the integration is suboptimal.

    Libraries:

    Sebastian

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    All those pages seem quite opaque in what actually happens.

    Can you post some possible example of what you would like to happen?

  5. #5
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    73
    Vote Rating
    1
    AlxH is on a distinguished road

      0  

    Default


    I think its about how to sync multiple async-operations .
    For example you've got a form with textfields and two grids in it. So you would first load the form and the two gridstores. When all three load-operations are complete you would like to do something - enable the submit button for example.
    What is the best practice to accomplish this kind of task?

    I guess this is a quite common problem in real-world applications...

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    227
    Vote Rating
    1
    alphadogg is on a distinguished road

      0  

    Default


    Why would Sencha have to provide this? I agree that it'd be interesting if it were rolled in, but quite frankly, they need to fix the current shop before opening a new one...

  7. #7
    Ext Premium Member Jan (HL)'s Avatar
    Join Date
    Aug 2010
    Location
    Germany
    Posts
    111
    Vote Rating
    9
    Jan (HL) will become famous soon enough

      2  

    Default


    Quote Originally Posted by Animal View Post
    All those pages seem quite opaque in what actually happens.

    Can you post some possible example of what you would like to happen?
    PHP Code:
    // Proposal
    var gridStoredetailsStoretreegridform;
    tree.on('click', function(treerecord){
      var 
    promise gridStore.load({id record.get('id')});
      
    promise.success(detailsStore.load).success(form.update).failure(form.showError);
    });

    // instead of something like this.
    tree.on('click', function(treerecord){
      
    gridStore.load({
        
    id record.get('id'), 
        
    callback : function(rosuccess){
          if (
    success) {
            
    detailsStore.load({
              
    callback:function(rosuccess){
                if (
    success) {
                  
    form.update(record);
                } else {
                  
    form.showError();
                }
              }
            });
          } else {
            
    form.showError();
          }
        }
      });
    }); 
    It's not just callbacks. It is a different way of dispatching events. The real problem I see is the challenge of Sencha to provide an api which *is* deferable. Without chaining support (like jQuery) it is useless.

    Again, an example of jQuery promise implementation:
    PHP Code:
    var ajaxPromise = $.ajax('myurl').done(function(response){
      
    console.info("the response: " response);
    }).
    fail(function(){
      
    console.warn(arguments);
    });
    // oops, I need additional callbacks?
    ajaxPromise.done(function(){
      
    console.info('done!!');
    }).
    always(function(){
      
    console.log("whatever happend, I'm here");
    }); 
    Mod: Sencha frameworks have chaining support, just override the methods you want chainable.

  8. #8
    Sencha User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    1
    jefftrull is on a distinguished road

      0  

    Default jQuery has this

    jQuery has this


    One of the main uses for this feature is to save coders from callback spaghetti hell. Instead of deeply nested success/failure callback code you describe a series of operations as objects and then compose them. The jQuery implementation is pretty nice and is covered in detail here: http://net.tutsplus.com/tutorials/javascript-ajax/wrangle-async-tasks-with-jquery-promises/

    E
    xtJS is nearly always ahead of the curve in terms of good design practices, so I'm surprised not to see something like this in there yet.

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    It looks like there is an implementation of Promises in ST2.3.1.
    You can find it in touch\src\promise.js

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    21
    Vote Rating
    5
    Navaar is on a distinguished road

      0  

    Default


    DeftJS is quite nice for this. Also their ViewController implementation is quite nice. Their promises make things quite a bit less nested when dealing with asnychronous code.

    www.deftjs.org