https://github.com/unframework/vdom-live
Re-render virtual DOM when interesting things (page events) happen, without observables
https://github.com/unframework/vdom-live
Last synced: 7 months ago
JSON representation
Re-render virtual DOM when interesting things (page events) happen, without observables
- Host: GitHub
- URL: https://github.com/unframework/vdom-live
- Owner: unframework
- Created: 2015-04-01T04:09:55.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-12T19:11:30.000Z (about 10 years ago)
- Last Synced: 2025-03-28T14:04:57.892Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 21
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Virtual DOM Live
----------------
Render [virtual DOM](https://github.com/Matt-Esch/virtual-dom) as an element and then keep updating it as interesting things (page events) happen, without observables.
- [NPM package](https://www.npmjs.com/package/vdom-live)
- [Live demo on RequireBin!](http://requirebin.com/?gist=41d87350052e03ba6ebb)
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](https://github.com/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.
```js
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