introduce deku

deku 是 segment.com 公司刚刚发布的开源前端框架，语法和工作原理都和 react 极为相像。但是也有很不多不同点，比如更轻量级，但是只支持现代浏览器， 取消了class的概念。

Components

在 React 中每一个component都是一个class，你可以这样

class Button extends React.Component {
  render() {
    let {type} = this.props
    return <button type={type}>Hey, i a button!!</button>
  }
}
Button.propTypes = {
	type: React.PropTypes.string
}

在 deku 没有class的概念，相当于每个文件是一个component，在deku中你创建一个component像这样
Button.js

let propTypes = {
  type: {
    type: 'string'
  }
}
render(component) {
  let {props} = component
  let {type} = props
  return <button type={type}>Hey, i am also a button!!</button>
}
export default {propTypes, render}

从上面的对比中可以看到，deku的component中把component本身作为了render函数的参数，所以在component中不在需要this。

Application & Data

React 中如果你需要 render 一个application你只需要React.render(<Button />, document.body); 既可。
但是在deku中你需要

import {tree,render,renderString, element} from 'deku'
let app = tree(<List items={items}/>)
render(app, document.body)

deku 中tree是用来管理所有的component和数据交换，所以就是说你用像react一样在引入另外一个库flux。
你可以直接在tree上添加你需要数据

/*app.js*/
let items = []
let app = tree(<List items={items}/>)
app.set('removeTodo', function(v) {
  items = items.filter(i => {
    return i != v
  })
  app.mount(
    <List items={items} />
  )
})

异步获取数据

app.set('updae', function (item, updates) {
  api.list.update(item, updates)
})

deku的体积只有~10k，但是遗憾的是指支持现代浏览器

我写了个简单的todo list demo，在github上。
了解更多可以去deku 的官方仓库 https://github.com/segmentio/deku