【bigo】amis在人工智能训练平台落地实践

[yeyeye0525]

前言

首先介绍一下什么是amis？
https://baidu.gitee.io/amis/
amis 是由百度开源的一个低代码前端框架，基于React，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

amis 的解决方案是基于 JSON 来配置，它的独特好处是：

• 不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
• 不受前端技术更新的影响：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
• 提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；
• 内置 100+ 种 UI 组件：包括其它 UI 框架都不会提供的富文本编辑器、条件组合等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 自定义组件 来扩充；
• 容器支持无限级嵌套：可以通过组合来满足各种布局需求；
• 经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 5 年多的时间里创建了 3.8 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。

当然amis不是银弹，大型复杂的前端系统，或者追求个性化的2c页面是无法灵活支持的。

训练平台需求分析

主要以CURD功能为主，涉及任务创建、任务列表、任务详情、动态表单渲染、表单联动、数据集上传、复制等场景。
故amis完全能够覆盖业务实现，参考示例：https://baidu.gitee.io/amis/examples/crud/table?page=1。


训练平台截图

技术实现

1.项目初始化

npm install @bigo/fed-cli -g
fed-cli create cv-flow-admin # 选择amis-tpl模板

2.目录结构介绍

├── components        业务组件
├── mocker            接口mock
│   ├── common
│   ├── dataSet
│   ├── jobs
│   ├── models
│   ├── pipeline
│   └── task
├── routes            页面json配置
│   └── admin
│       ├── dataSet
│       └── taskManage
│           ├── jobList
│           └── taskList
├── scss               公共样式
├── stores             全局store
├── types              ts类型文件
└── utils              公共方法

3.新增页面

只需要在routes/admin目录下，新增一份json配置就行。
譬如新增任务：routes/admin/taskManage/jobList/create.ts

4.接口处理

amis约定了接口响应标准

{
  "status": 0, 
  "msg": "", 
  "data": { 
    "text": "World!" 
    ...其他字段
  } 
}

但是我们目前还缺少统一的聚合层进行格式封装，故与业务api对接时，可以对全局的fetcher，或者单个接口的requestAdaptor、adaptor方法进行编码适配

5.表单嵌套

用于将多个表单项组合到一起，实现深层结构的数据编辑。
比如想提交 user.name 这样的数据结构，有两种方法：一种是将表单项的 name 设置为user.name，另一种就是使用 combo。
https://baidu.gitee.io/amis/zh-CN/docs/components/form/combo

6.动态表单

通过Service功能容器，向业务api获取表单配置数据，然后进行数据清洗，渲染表单。
https://baidu.gitee.io/amis/zh-CN/docs/components/form/service#动态渲染表单项

7.上下文数据获取

直接通过模板变量，譬如${text}这种方式获取
https://baidu.gitee.io/amis/zh-CN/docs/concepts/datascope-and-datachain

8.组件通讯

https://baidu.gitee.io/amis/zh-CN/docs/concepts/linkage

9.上下文数据清洗

在第7、8点里面，只实现了数据的传递及消费，但是有些业务场景下需要对上一个组件产生的数据进行修改后才能适配下一个组件的入参，目前amis没有提供这种事件能力。
当前的解决方案是利用单个接口的requestAdaptor、adaptor方法，假装发起http请求，对特定url字段进行接口拦截，然后进行数据清洗，传递给下一个组件。
具体示例：
在运行任务列表，接口返回的params字段是一个json对象，点击查看详情时，需要把params数据渲染为动态表单，故通过service发起一个请求，然后对上下文中的params数据进行清洗，返回给详情组件。

研发体验

• 减少了复杂的表单开发流程，基于示例json可以快速配置页面；
• 无需掌握react全家桶，极大降低了技术门槛;
• 快速需求变更，快速调整json配置，效率高;
• 赋能服务端，简单需求迭代可以直接修改上线;
• 需要花一周时间了解amis属性、组件使用规范.

总的来说，amis是一个非常优秀的低代码解决方案，适用于中小型后台系统。
研发效率至少提升30%。