【不容错过】FormRender 表单渲染的开源发展

、作者：呐萨复制代码

易用的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面 - github.com/alibaba/for…

FormRender（下面一律简称 FR）起源于 2017 年飞猪互动平台的模板表单生成方案，经历 2 年在飞猪内部以及集团兄弟 BU 各个场景的落地和打磨，于 2019.09.30 月开源，当前 star 1.1k, fork 110, npm 月下载量 2k。

FR 目前覆盖了飞猪内部玩法平台、互动平台、搭建、投放、批量智能生产、众多频道管理等小二平台、并在开源期间支持了集团内阿里云团队，淘宝社区团队，淘宝新零售团队，阿里人工智能实验室，安全智能部下 10+个 BU，20+个场景的搭建、配置后台和投放系统。本文旨在简述：

什么是 form-render，它解决了哪些问题
开源的半年我们做了些什么以及 form-render 未来的规划和发展

期待让大伙更了解他，以及有对应表单配置场景可以使用上他，有建议和优化点欢迎一起交流讨论。

由来 & 构想

后台系统中表单配置场景层出不穷，这些高重复度但也不尽相同的需求，占用了前端开发同学大量的时间。如何产出一个简洁、提效、灵活和高扩展的表单解决方案一直是困扰小伙伴们的一个问题。

表单场景具有以下几个特点：

手写有一定的复杂度，且复杂度在 form 内部（校验、联动、状态）
与外界系统相对独立、解耦，接点明确（表单信息）
有大量的重复性

这些特性导致了表单天然适合走配置类方案。基于上述构想，FR 的设计方案分为如下 3 层：

协议层定义协议（schema）配置，展示层控制协议的渲染，工具层提供上下游的进一步支持。在此之上，FR 遵循如下的 api 设计：

基于JSON schema的协议规范。JSON schema 作为 JSON 数据校验表述的国际标准，主要用于表单数据的服务端校验。已经接入JSON Schema标准的团队可以几乎无缝接入 FR
极简的组件 api: FormRender 使用上类似一个单独的可控的 input：
```
// 可控的input
<input value={value} onChange={onChange} />
// form-render, 只多了schema，用于描述 Form 长什么样
<FormRender formData={value} onChange={onChange} schema={schema} />
复制代码
```
这样的设计下，FR 只负责管理和改动表单数据/时时校验，而将具体如何使用表单数据和校验信息乃至提交的方式全权交给了使用者自由书写。

支持复杂联动: schema 的大部分属性都支持函数表达式，实现了灵活但强大的联动效果。更多示例见在线 demo - 复杂联动

"showMore": {
  "title": "显示更多",
  "type": "boolean"
},
"input1": {
  "title": "输入框1",
  "type": "string",
  "ui:hidden": "{{rootValue.showMore === false}}" // 当showMore值为false时，隐藏
}
复制代码

4.支持个性化扩展：当出现现有表单元素无法满足需求的场景，FR 使用自定义组件的方式，让用户自由扩展 FR 的组件库。

// 写自定义组件
const MyInput = ({ value, onChange }) => {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
};
// 传入自定义组件
<FormRender {...props} widgets={{ myInput: MyInput }} />;
复制代码

协议上只需指明"ui:widget": "MyInput"，即可使用对应的组件来渲染：

someText: {
  title: "问候",
  type: "string",
  "ui:widget": "myInput"
}
复制代码

一句话总结，基于 JSON schema 的协议确保了 FR 的规范性，可控组件的模型确保了外层 api 的简洁和解耦，联动&自定义组件的 api 确保了对大量复杂的场景的很好支持。

下面就谈谈小伙伴们最关心的实际使用体感吧。

使用体验 & 流程

通过使用 schema 编辑器，生成一个表单的流程非常简单，有兴趣的同学可以按下面示例在线尝试一下，体会它的强大性：

使用在线 schema 编辑器搭建表单，导出 schema
将 schema 作为props传入<FormRender {...schema} />组件（在线demo中替换 schema.json 文件内容即可）

如上图，一个简易的表单开发只需要要 5 分钟就完成啦。

生态圈介绍

github.com/form-render

proptypes-to-json-schema：是一个方便地将 react 的 props 转换成 schema 的 npm 包

form-render-snippets：辅助使用者快速和正确地在 vscode 中书写 schema（商店搜索“formrender”）
可视化 schema 编辑器 作为上下游建设的核心，目前支持
- 导入导出。现有 schema 的快速调整
- 表单块存储功能。定制化需求的快速搭建
- 布局的自由可视化定制
- 最后，此编辑器也是 FR 的 schema 很好的在线文档
form-render-widgets：将会作为具有一定普适性的自定义组件的沉淀中心，这块作为开源的一个入口欢迎各位同学 PR。

场景落地

form-render 的使用者也遍及了阿里巴巴集团的搭建、配置后台和投放系统，包括有

飞猪团队的玩法优惠平台、互动平台、搭建、投放、静态数据平台、智能页面生产、频道管理、模块生产平台等，飞猪侧小二平台已经统一使用 form-render 作为表单开发方案。支持了 2w+玩法活动配置，1w+的页匠页面搭建。
阿里云团队的开放平台、ROS 编排平台
淘宝社区团队的淘宝洋淘/躺平/闲鱼鱼塘，船坞投放后台，社区运营工作台
淘宝技术部的智能运营、互动与搭建、行业与工作台、智能场景等团队下的资源投放平台图灵、魔石平台模块可视化，新零售团队的政务搭投、拍卖频道配置平台、全链路故障诊断系统、LF 可视化编程平台等
阿里商旅团队的数字化运营平台，商家小二平台等
阿里人工智能实验室的精灵页面搭建平台
安全智能部中台的表单配置，Bsearch 后台管理
亚博科技营销平台表单配置等

从各个 bu 的小伙伴也得到了一些确实解决问题的反馈：

“动态表单这块从 3 月份上线到现在已经支撑了 100 多个资源位，上千个计划页面" “主要是 FormRender 设计合理，接入方便” “动态表单灵活支撑各种动态配置，这个太灵活了，这块确实解决很多我们的业务痛点”

之后规划

与设计师合作、更加美化的表单展示、更多可用的自定义组件
支持 step、modal、tabs 等复杂且很多用户诉求的展示模式
简化开发和参与流程，以自定义组件为口子鼓励更多的开源参与者，维护好开源社区
FR 2.0 正在开发中，目前进度 80%（schema 编辑器的内核用的是 FR 2.0 的简化版）。不仅更小更快性能有巨大提升，还支持动态校验、服务端校验传入、全属性联动配置等一直的老大难问题
schema 编辑器接入涉及到 schema 配置业务系统（目前已经在和内部静态数据平台接入），改变现有手动配置的状况。最终形成未来用户接入 schema 编辑器 + FR 的最佳实践。
列表、card、chart 等更多场景的协议生成探索（x-render），以及低代码搭建的最终实现

Q & A

form-render 和formily的关系是什么？

相信有不少集团内的同学想问这个问题。form-render 是 2 年多前，贴合飞猪运营平台场景，沉淀出的一套表单解决方案，和 formily 算是相对独立，各自有各自的场景。最近我们也和 formily 团队在包括协议和编辑器上进行共建。未来有望提供方便的转换函数，实现两侧协议的互通。schema 编辑器与集团合作，打算实现统一的 schema 生产工具。

一些资源链接

github：github.com/alibaba/for…
官网：alibaba.github.io/form-render…
在线 demo：alibaba.github.io/form-render…
codeSandbox：codesandbox.io/s/form-rend…
生态圈：github.com/form-render
在线 schema 编辑器：form-render.github.io/schema-gene…

钉钉群：

Last but not lease

阿里巴巴飞猪部门正在招聘前端，目前我们在 Serverless 、微前端运营工作台、端渲染、互动营销、招选投搭、智能化、体验技术、数据度量有不少建设，欢迎有能力同学进来落地技术产生业务价值，想带人同学过来直接带一个方向也是可以的，欢迎关注飞猪前端团队公众号直接聊天联系即可！

本文使用 mdnice 排版