Tutorials and examples

Vanilla Warden

Streaming events

eventSource.on('eventType', function(eventData){
  if(valied(eventData)){
    rootObject.result = processData(eventData);		
  }
});
eventSource
  .stream('eventType')
  .filter(valid)
  .map(processData)
  .bindTo(rootObject, 'result');

Event processing

var cachedTime;
button.addEventListener('click', function(e){
  var self = this;
  clearTimeout(timer);
  timer = setTimeout(function(){
    send(self.value);
  }, 500)
});
Warden(button)
  .stream('click')
  .debounce(500)
  .map('@value')
  .listen(send);

Event composing

var cachedTime, cachedFrom;
function log(data){
  var messate = 'Data from socket ' + 
    data.socket_name + 
    ' was recived first';

  console.log(message);
}

function callback(e){
  if(!cachedFrom){
    cachedFrom = e.socket_name;
    cachedTime = e.timeStamp;
  }else{
    if(cachedFrom != e.socket_name){
      if(cachedTime > e.timeStamp){
          log(e)
      }else{
        cachedTime = e.timeStamp
      }
    }else{
      cached_time = e.timeStamp;
    }
  }
}

socket.on('a', callback);
socket.on('b', callback);
var sStream = socket.stream('a'),
    bStream = socket.stream('b');
    
aStream.resolve(bStream, function(a, b){
  return a.timeStamp > b.timeStamp ? a : b;
}).listen(log);

Reactive Calculations

var a = 10;
var b = 20;
var c = a + b;
console.log(c); 

// -> 30;

a = 20;
console.log(c);

// -> 30
// To update you need:
c = a + b;
console.log(c)
// -> 40
var a = Warden(10);
var b = Warden(20);
var c = Warden.Formula([a,b], function(x,y){
  return x + y;
});

console.log(c.value); 
// -> 30

a.value = 20;
console.log(c.value); 
// -> 40  
// It updates itself

Values in time

var a = 0;
var b = 0;
function bigger(x, y){
	return x > y ? x : y;
}

var c = bigger(a, b);

a = 20;
b = 10;
// c = 0;
c = bigger(a, b);
// c = 20
b = 30;
c = bigger(a, b)
// c = 30
// need to update c every time
var a = Warden(0);
var b = Warden(0);
var c = a.combine(b, bigger).watch();

a.value = 20;
// c.value  = 20

b.value = 30;
// c.value = 30;

a.value = 40;
// c.value = 40;