# TangoBoot | 使用 Tango 构建你的低代码生产力工具
TangoBoot 是一个服务于 Tango 低代码应用开发体系的前端应用框架，提供了标准的数据请求，状态管理，路由方案，并提供了通用的运行时工具函数，让开发者通过简单的配置即可生成单页应用。

跳到主要内容
🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！

# TangoBoot

TangoBoot 是一个服务于 Tango 低代码应用开发体系的前端应用框架，提供了标准的数据请求，状态管理，路由方案，并提供了通用的运行时工具函数，让开发者通过简单的配置即可生成单页应用。

## 应用架构​

TangoBoot 的应用架构使用的是 View-Model-Service 三层模型，其中模型层定义了 Observable States，视图层观察 Model 的变化而进行自动更新，服务层用来创建一组服务函数，供视图层和模型层消费。图如下图所示:

## 核心 API​

- `runApp` 创建应用入口
- `definePage` 定义 Reactive 视图
- `defineStore` 定义可观察的状态模型
- `defineServices` 定义服务函数

### 创建应用入口​

其中`index.js` 为应用的入口文件，一个基本的实现为

    import { runApp } from '@music163/tango-boot';
    import routes from './routes';
    import services from './services';
    import home from './stores/home';
    import counter from './stores/counter';
    // 全局样式
    import './global.less';

    const { mount, unmount, bootstrap } = runApp({
      boot: {
        mountElement: document.querySelector('#root'),
        qiankun: false,
      },

      stores: {
        home,
        counter,
      },

      services,

      router: {
        type: 'browser',
        config: routes,
      },
    });

    export { mount, unmount, bootstrap };

### 创建视图模型​

通过 defineStore 来进行视图模型的定义非常简单，只需简单的声明状态和动作即可

    import { defineStore } from '@music163/tango-boot';

    const counter = defineStore({
      num: 0,

      get() {},

      decrement: function () {
        counter.num--;
      },

      increment: () => counter.num++,
    });

    export default counter;

### 创建 Reactive 视图​

视图层如果要监听状态的变化，只需要 `definePage` 对视图组件进行一层包裹即可。

    import React from 'react';
    import tango, { definePage } from '@music163/tango-boot';

    class App extends React.Component {
      increment = () => {
        tango.stores.counter.increment();
      };

      render() {
        return (
          <div>
            <h1>Counter: {tango.stores.counter.num}</h1>
            <button type="primary" onClick={this.increment}>
              +1
            </button>
          </div>
        );
      }
    }

    export default definePage(App);

### 创建数据服务函数​

`defineServices` 提供了低成本声明异步服务函数的能力。

    import { defineServices } from '@music163/tango-boot';

    export default defineServices({
      list: {
        url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
        formatter: (res) => {
          const { data, message } = res;
          return {
            code: 200,
            list: data,
            total: data.length,
            message,
          };
        },
      },
      add: {
        url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
        method: 'post',
      },
      update: {
        url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
        method: 'post',
      },
      delete: {
        url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users?id=1',
      },
    });