deku's Introduction

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.

Example

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!'
});

Getting Started

Download

Browserify/Node:

npm install deku

Duo:

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

Bower:

bower install deku

Or download and use them manually:

dist/deku.js

Browser Support

JSX Support

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 <a class="button" onClick={this.onClick}>{props.text}</a>;
  }
});

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

Developing

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.