、做者:呐萨复制代码
易用的跨组件体系的表单渲染引擎 - 经过 JSON Schema 快速生成自定义表单配置界面 - github.com/alibaba/for…html
FormRender(下面一概简称 FR)起源于 2017 年飞猪互动平台的模板表单生成方案,经历 2 年在飞猪内部以及集团兄弟 BU 各个场景的落地和打磨,于 2019.09.30 月开源,当前 star 1.1k, fork 110, npm 月下载量 2k。前端
FR 目前覆盖了飞猪内部玩法平台、互动平台、搭建、投放、批量智能生产、众多频道管理等小二平台、并在开源期间支持了集团内阿里云团队,淘宝社区团队,淘宝新零售团队,阿里人工智能实验室,安全智能部下 10+个 BU,20+个场景的搭建、配置后台和投放系统。本文旨在简述:react
期待让大伙更了解他,以及有对应表单配置场景可使用上他,有建议和优化点欢迎一块儿交流讨论。git
后台系统中表单配置场景层出不穷,这些高重复度但也不尽相同的需求,占用了前端开发同窗大量的时间。如何产出一个简洁、提效、灵活和高扩展的表单解决方案一直是困扰小伙伴们的一个问题。github
表单场景具备如下几个特色:npm
这些特性致使了表单自然适合走配置类方案。基于上述构想,FR 的设计方案分为以下 3 层:编程
协议层定义协议(schema)配置,展现层控制协议的渲染,工具层提供上下游的进一步支持。在此之上,FR 遵循以下的 api 设计:json
基于JSON schema的协议规范。JSON schema
做为 JSON 数据校验表述的国际标准,主要用于表单数据的服务端校验。已经接入JSON Schema
标准的团队能够几乎无缝接入 FRapi
极简的组件 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 编辑器,生成一个表单的流程很是简单,有兴趣的同窗能够按下面示例在线尝试一下,体会它的强大性:
如上图,一个简易的表单开发只须要要 5 分钟就完成啦。
这半年的工做集中在 3 块:
核心功能的补齐
展现&开发体验优化
上下游建设
form-render-snippets:辅助使用者快速和正确地在 vscode 中书写 schema(商店搜索“formrender”)
可视化 schema 编辑器 做为上下游建设的核心,目前支持
form-render-widgets:将会做为具备必定普适性的自定义组件的沉淀中心,这块做为开源的一个入口欢迎各位同窗 PR。
form-render 的使用者也遍布了阿里巴巴集团的搭建、配置后台和投放系统,包括有
从各个 bu 的小伙伴也获得了一些确实解决问题的反馈:
“动态表单这块从 3 月份上线到如今已经支撑了 100 多个资源位,上千个计划页面" “主要是 FormRender 设计合理,接入方便” “动态表单灵活支撑各类动态配置,这个太灵活了,这块确实解决不少咱们的业务痛点”
与设计师合做、更加美化的表单展现、更多可用的自定义组件
支持 step、modal、tabs 等复杂且不少用户诉求的展现模式
简化开发和参与流程,以自定义组件为口子鼓励更多的开源参与者,维护好开源社区
FR 2.0 正在开发中,目前进度 80%(schema 编辑器的内核用的是 FR 2.0 的简化版)。不只更小更快性能有巨大提高,还支持动态校验、服务端校验传入、全属性联动配置等一直的老大难问题
schema 编辑器接入涉及到 schema 配置业务系统(目前已经在和内部静态数据平台接入),改变现有手动配置的情况。最终造成将来用户接入 schema 编辑器 + FR 的最佳实践。
列表、card、chart 等更多场景的协议生成探索(x-render),以及低代码搭建的最终实现
form-render 和formily的关系是什么?
相信有很多集团内的同窗想问这个问题。form-render 是 2 年多前,贴合飞猪运营平台场景,沉淀出的一套表单解决方案,和 formily 算是相对独立,各自有各自的场景。最近咱们也和 formily 团队在包括协议和编辑器上进行共建。将来有望提供方便的转换函数,实现两侧协议的互通。schema 编辑器与集团合做,打算实现统一的 schema 生产工具。
钉钉群:
阿里巴巴飞猪部门正在招聘前端,目前咱们在 Serverless 、微前端运营工做台、端渲染、互动营销、招选投搭、智能化、体验技术、数据度量有很多建设,欢迎有能力同窗进来落地技术产生业务价值,想带人同窗过来直接带一个方向也是能够的,欢迎关注飞猪前端团队公众号直接聊天联系便可!
本文使用 mdnice 排版