Why do we need pure functions, immutable data and virtual DOM? These are
optimizations and to some extent simplifications, not core to idea.
var root = document.getElementById('ui');
var prevState = state, prevTree = [];
function render(state) {
// Virtual DOM is really just a tree of JavaScript objects or arrays
return [
['span', {id: 'count'}, state.items.length],
['ul', {}, state.items.map(function (item) {
return ['li', {}, item]
})]
]
}
function updateUI() {
var vTree = render(state);
var diff = vDiff(prevTree, vTree); //Just a diff on data structures,
haha :)
vApply(root, diff) // Apply series of patches to real DOM
prevState = deepcopy(state);
prevTree = vTree;
}