Basic idea

Warp9 is based on very simple idea: lets take reactive model (observable viewmodel) and map it to observable DOM, then when model is changed the dom would be updated automatically. If the map is a simple js function, the we get familiar way for composition (function composition) and modularization/distribution (requirejs) out of the box.

Warp9 is consists of warp9.core and warp9.ui. warp9.core is a set of reactive primitives and a reactivity engine, it doesn't depend on anything and can be used as a basic for a reactive solutions. warp9.ui is a ui library which is created to be composable, it depends on browser's DOM and warp9.core, but hasn't any external dependencies.

Example of mapping of reactive model to reactive DOM with Warp9 - app itself (its source):

// creates a reactive model (in this case it is just a list)
var model = new warp9.List();
// maps it to DOM
var dom = TRANSFORM(model);
// render the reactive DOM to screen
warp9.render(placeholder, dom);

// when we change the model and have a screen updated
model.add("React.js");
model.add("Warp9");

// here is the map itself
function TRANSFORM(model) {
    var hasItems = model.count().when(function(count) { return count>0 }, true);
    return hasItems.when(true, ["div",
        ["div", "Reactive libraries:"],
        ["div", {"css/margin-left": "10px"},
            model.lift(function(item){
                return ["div", item]
            })]
    ]);
}