incremental-dom

An in-place DOM diffing library

Virtual DOM
google/incremental-domgoogle.github.io/incremental-dom/incremental-dom

README

CircleCI

Incremental DOM


Overview


Incremental DOM is a library for building up DOM trees and updating them in-place when data changes. It differs from the established virtual DOM approach in that no intermediate tree is created (the existing tree is mutated in-place). This approach significantly reduces memory allocation and GC thrashing for incremental updates to the DOM tree therefore increasing performance significantly in some cases.

Incremental DOM is primarily intended as a compilation target for templating languages. It could be used to implement a higher level API for human consumption. The API was carefully designed to minimize heap allocations and where unavoidable ensure that as many objects as possible can be de-allocated by incremental GC. One unique feature of its API is that it separates opening and closing of tags so that it is suitable as a compilation target for templating languages that allow (temporarily) unbalanced HTML in templates (e.g. tags that are opened and closed in separate templates) and arbitrary logic for creating HTML attributes.
Think of it as ASM.dom.

Supported Browsers


Incremental DOM supports IE9 and above.

Usage


HTML is expressed in Incremental DOM using the elementOpen, elementClose, elementVoid and text methods. Consider the following example:

  1. ``` js
  2. var IncrementalDOM = require('incremental-dom'),
  3.     elementOpen = IncrementalDOM.elementOpen,
  4.     elementClose = IncrementalDOM.elementClose,
  5.     elementVoid = IncrementalDOM.elementVoid,
  6.     text = IncrementalDOM.text;

  8. function render(data) {
  9.   elementVoid('input', '', [ 'type', 'text' ]);
  10.   elementOpen('div', '', null);
  11.     if (data.someCondition) {
  12.       text(data.text);
  13.     }
  14.   elementClose('div');
  15. }
  16. ```

To render or update an existing DOM node, the patch function is used:


  1. ``` js
  2. var patch = require('incremental-dom').patch;

  4. var data = {
  5.   text: 'Hello World!',
  6.   someCondition: true
  7. };

  9. patch(myElement, function() {
  10.   render(data);
  11. });

  13. data.text = 'Hello World!';

  15. patch(myElement, function() {
  16.   render(data);
  17. });
  18. ```

Templating Languages and Libraries


Check out  what others having been doing with Incremental DOM.

Docs


- Introducing Incremental Dom
- Docs and demos

Getting Incremental DOM


Via CDN


https://ajax.googleapis.com/ajax/libs/incrementaldom/0.5.1/incremental-dom.js
https://ajax.googleapis.com/ajax/libs/incrementaldom/0.5.1/incremental-dom-min.js

Using npm


  1. ```sh
  2. npm install incremental-dom
  3. ```

Development


To install the required development packages, run the following command:

  1. ```sh
  2. npm i
  3. ```

Running tests


To run once:

  1. ```sh
  2. ./node_modules/.bin/bazelisk test ...
  3. ```

To run on change:

  1. ```sh
  2. ./node_modules/.bin/ibazel run //test:unit_tests
  3. ```

Building


To build once:

  1. ```sh
  2. ./node_modules/.bin/bazelisk build ...
  3. ```

To build on change:

  1. ```sh
  2. ./node_modules/.bin/ibazel build ...
  3. ```