# Roof

Roof 是一个简单的前端应用框架，它能帮助你把页面上的数据和逻辑有效地管理起来。下图是它标准的调用过程。

```
用户输入 -> 组件 -> 触发事件 -> 操作数据 -> 重新渲染
```

面我们来简单写一段代码把它跑起来。环境推荐使用 antd :

```
npm install antd-bin -g
mkdir roof-demo && roof-demo
antd init
npm install
npm install roof --save
antd servers
```

antd 会自动帮我们把组件挂载到页面上，我们只需要关注组件就好了。
下面我们来创建一个 Roof 应用:


修改 `/src/component/App.jsx`为:

```
import React from 'react';
import Roof from 'roof';
import _ from 'roof/addon/react/container';
import User from './User';

const App = Roof.createRootContainer({
  data: {
    user: require('../data/user')
  },
  events: {
    user: require('../event/user')
  },
  render(){
    return <div>
      <div>Hello :</div>
      <User />
    </div>
  }
})


export default App;

```

这样一个基本的 Roof 应用就已经创建好了。

然后来定义应用数据 user `/data/user.js`，Roof 使用了一种大家熟悉的面向对象的概念来定义数据:

```
import Roof from 'roof';

const User = Roof.Node.createClass({
  getFullName(){
    return this.get('name') + ' ' + this.get('family')
  }
})

export default function UserFactory(){
  return new User({
    name:'Jane',
    family : 'Smith',
    age : 17
  })
}
```

用图更好理解：

```
基类 -> 用户类 -> 用户实例
```

这样一个完整数据就定义好了，接下里定义事件和事件的监听器。事件本质是字符串。事件的监听器则是对象，它的 `fn` 属性必须定义一个函数作为触发事件时执行的函数。在 Roof 的事件定义文件中，我们可以直接使用函数来代替监听器对象，Roof 会帮我们转化。

`/src/event/user.js` :

```

export default function manuplateUser(data) {

  return {
    'user.addAge': function () {
      const user = data.get('user')
      const age = user.get('age')
      user.set('age', age + 1)
    }
  }
}

```

最后，我们来定义一个组件显示数据，同时能够触发事件让数据改变, `/src/component/User.jsx` :

```
import React from 'react';
import Roof from 'roof';

const User = Roof.createContainer({
  cursors : {
    user : 'user'
  },
  addAge(){
    this.bus.fire('user.addAge')
  },
  render(){
    return <div>
      <div>{this.props.user.getFullName()}</div>
      <a onClick={this.addAge}>add age</a>
    </div>
  }
})


export default User;
```

完成！