Saibo

Fork me on GitHub

A simple library for reactive programming in the browser or Node.js

Get Saibo on Github - NPM

Saibo lets you make a network of cells (like a key-value store).

Cells can either hold a value, or a formula that derives their value from other cells.

Cells can trigger event listeners when their values change.

Formulas can use values from other cells, with their values updating and triggering event handler when cells they depend on change.

Cells can have a timer function to set their value at a regular interval.

Setup

var cells = new Saibo();

Formula

Enter numeric values

× = 
cells.on('width', function(x){
  document.getElementById('width').value = x;
});

cells.on('height', function(x){
  document.getElementById('height').value = x;
});

cells.on('area', function(x){
  document.getElementById('area').innerHTML = x;
});

cells.add('area')
  .formula(function(width, height){
    return Number(width) * Number(height);
  }, ['width','height']);

cells.set('width', 10);
cells.set('height', 20);

Timer

var cro = new Cro('cro');

cells.on('time', function(x){
  document.getElementById('time').innerHTML = Math.floor(x);
});

cells.on('time', function(x){
  cro.set(Math.cos(x) * Math.sin(x/2));
});

cells.set('time', 0)
  .timer(250, function(){
    return Number(this.val()) + 0.25;
  });