deku

Create view components using a virtual DOM

Deku

A simple library for creating UI components using virtual DOM.

  • It's small at roughly 8kb.
  • Supports npm, duo, and bower.
  • Easily add plugins to any component.
  • It only supports IE10+ and better browsers.
  • Server-side rendering.
  • Easily test components.
  • Handles all event delegation for you without virtual events.
  • Batched and optimized updates using requestAnimationFrame.
var {component,dom} = require('deku');
 
var Button = component({
  onClick() {
    this.setState({ clicked: true });
  },
  render(props, state) {
    return dom('button', { onClick: this.onClick }, [props.text]);
  }
});
 
var scene = Button.render(document.body, {
  text: 'Click Me!'
});

Browserify/Node:

npm install deku

Duo:

var deku = require('segmentio/deku');

Bower:

bower install deku

Or download and use them manually:

There are a number of libraries around now that can transpile JSX into JS that aren't tied to React. The easiest way to use JSX with Deku is to use Babel (formerly known as 6to5).

Babel comes with a JSX transformer that can be used by adding a comment to the top of your file:

/** @jsx dom */
var {component,dom} = require('deku');
 
var Button = component({
  render(props, state) {
    return <class="button" onClick={this.onClick}>{props.text}</a>;
  }
});

You can also use jsx-transform if you're looking for something simple.

Deku is built using Browserify and Make. You can build the project by running make in the directory.

To run the tests you can call make test to run tests in Phantom or make test-browser to run the tests in a browser. See the Makefile for the rest of the tasks.

  • Anthony Short — anthony@segment.com
  • Lance Pollard — lance@segment.com