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