These are chat archives for jdubray/sam

16th
Feb 2017
Jean-Jacques Dubray
@jdubray
Feb 16 2017 00:31
Yes, as I mentioned before, Angular2 is a surprisingly good fit for SAM (via RxJS pub/sub, maybe there are better ways to wire the pattern too). I would have thought with templates and what not that it would be terrible, but quite the opposite.
"Some people think that using action creators adds boilerplate to the project. On the contrary, you’re about to see how I use them to greatly reduce the boilerplate in my reducers."
Rodrigo Carranza
@DrecDroid
Feb 16 2017 01:20
Something I working on: http://i.imgur.com/eiKkk0a.gifv
Rodrigo Carranza
@DrecDroid
Feb 16 2017 01:30
Somehow I have to throttle the actions :S
Jean-Jacques Dubray
@jdubray
Feb 16 2017 06:11
you mean debounce?
looks really cool
Rodrigo Carranza
@DrecDroid
Feb 16 2017 06:51
throttling the dragging action to fire actions every 40ms, It was smoother before but I will add some filter effects and backgrounds, and rendering couldn't happen so often.
Jean-Jacques Dubray
@jdubray
Feb 16 2017 08:17

Could this kind of approach help?
If we go back to the debounce example, in SAM it would look like this:

actions.setRange = (data) => {
    let _data = data || {} ;
    _data.__action = 'changeValue';
    _data.lastTime = new Date().getTime();

    model.present(_data) ; // update the time in the model for debounce
    setTimeout(function() {
        _data.__action = 'updateValue';
        model.present(_data);
    },200) ;
    return false ;
} ;

In the model:

 if (data.__action === 'changeRange') { 
            model.data.value = data.value ;
            model.data.lastTime = data.lastTime;
            render = false ;
        } else {
            if (data.lastTime >= model.data.lastTime) {
                ... do what ever you want ... including getting ready to trigger a fetch action
            } else {
                render = false ;
            }
        }
Rodrigo Carranza
@DrecDroid
Feb 16 2017 13:50
Thanks for the example. I've implemented directly in the view because It handle other things in It. My throttle function looks like this:
let throttlers : { [id: string] : Throttler } = {};

function throttle( callback : () => void, limit : number, id : string, immediate = true){

  if(throttlers[id] != null){
    throttlers[id].call(callback)
  }
  else{
    throttlers[id] = new Throttler(limit)
    if(immediate){
      callback()
    }
  }  
}

class Throttler {
  canCall = true
  constructor(public limit : number){}

  call(callback : () => void){
    if(this.canCall){
      callback()
      this.canCall = false
      setTimeout(()=>{ this.canCall = true }, this.limit)
    }
  }
}

export default throttle
Jean-Jacques Dubray
@jdubray
Feb 16 2017 13:56
yes, that works too, that's probably a better way than having the model involved. I guess it depends on whether the view or the model control the throttling.
Jean-Jacques Dubray
@jdubray
Feb 16 2017 17:11
An article on SAM with Inferno using node.js on Raspberry Pi: http://dius.com.au/2017/01/24/a-journey-to-implementing-the-sam-model/