Skip to content

Re-render virtual DOM when interesting things (page events) happen, without observables

Notifications You must be signed in to change notification settings

unframework/vdom-live

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Re-render virtual DOM when interesting things (page events) happen, without observables

Resources

Stars

Watchers

Forks

Packages

No packages published