Re-render virtual DOM when interesting things (page events) happen, without observables
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
index.js
package.json

README.md

Virtual DOM Live

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

Motivation:

  • 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