Virtual DOM Live

Render virtual DOM as an element and then keep updating it as interesting things (page events) happen.

Live demo on RequireBin!

• bye-bye application state change tracking, observables, digest loops, watches
  • or something
• great for
  • quick prototyping
  • not worrying about premature optimization
  • writing awesome-sauce codes

Uses requestAnimationFrame to queue and debounce re-renders. Cleans up event listeners when root element is removed from the document tree.

Relying on the Angular Zone.js library to detect incoming page and network events. Anything that runs inside the vdomLive wrapper will get incoming asynchronous events and timeouts picked up and triggering a redraw on the next animation frame.

var vdomLive = require('vdom-live');

vdomLive(function (renderLive) {
    var liveDOM = renderLive(function (h) {
        return h('span', new Date().toString());
    });

    document.body.appendChild(liveDOM);
});

// ... and then let the user click something/receive AJAX/etc

Todo

• keep investigating other ways to detect interesting events