开源表单方案Formily的核心设计思路

1. 第十六届 D 2 前端技术论坛 Formily核心设计思路白玄

2. 自我介绍业务侧横向团队花名姓名白玄王智力来自阿里数字供应链事业部 SELF-INTRODUCTION

3. 什么是Formily 具体设计思路目录使用数据未来规划

4. 什么是Formily? 是一款面向中后台复杂场景的数据+协议驱动的表单框架它也是阿里巴巴集团统一表单解决方案域名 https://formilyjs.org

5. 高性能核心特点相当完备 FEATURE 生态完备协议驱动

6. 单一职责设计原则优雅命名简单直观一致 DESIGN PHILOSOPHY

7. 核心架构

8. 设计思路

9. 高性能思路设计思路问题普通React用法，想要实现数据收集和同步，需要强依赖虚拟DOM的整树重绘才能达到目的。目标不管字段数量多少，高频输入，永远都是O(1)复杂度

10. 方案一 —— ReactFinalForm/Antd4.0方案抽象FormState/FieldState，内部使用pub/sub模式进行通讯，脏检查控制联动时的渲染重绘时间复杂度输入时：Ant Design O(1)/ReactFinalForm O(1) 联动时：Ant Design O(1 or n)/ReactFinalForm O(1 or n) 优点简单，易上手问题 • 脏检查成本高 • 外部联动无法做到O(1)

11. 方案二 —— UForm/Formily1.x方案抽象FormState/FieldState，内部使用pub/sub模式通讯，抽象主动更新模型时间复杂度输入时：O(1) 联动时：O(1) 优点高性能问题

12. 方案三 —— ReactHookForm方案基于DOM机制收集数据，绕过React受控更新机制，保证高频输入无卡顿时间复杂度输入时：O(1) 联动时：O(n) 优点问题

13. 方案四 —— Formily2.0方案依托Reactive响应式解决方案，构建整个响应式表单领域模型时间复杂度输入时：O(1) 联动时：O(1) 优点 • 不再需要大量脏检查成本，一切都是基于数据变化精确渲染 • 既支持主动更新模型，也支持被动响应模型，在多对一被动联动场景，代码量大大减少 • 外部数据与表单内部字段联动时，只需要定义 ApplicationReactiveData即可，代码编写成本很低问题

14. 高频输入性能时间复杂度 O(1) 复杂度 2000个字段，针对单个字段的高频输入，完全无卡顿

15. 外部共享联动

16. 协议驱动思路设计思路问题目标如何更高效的开发表单？ • 定义一套通用协议，简单高效的描述表单UI/逻辑 • 对低代码搭建是友好的

17. 方案一纯UITree协议方案，类似于JSON版的JSX 优点 • 足够简单，componentName/props/children完全可以把整个UI 结构给描述清楚 • 对搭建非常友好问题只能描述视图结构，无法描述状态模型

18. 方案二标准JSON Schema方案，参考ReactJSONSchemaForm 优点以数据描述视角来驱动UI渲染，基于这样的数据描述，我们可以将很多状态处理逻辑固化到渲染引擎或者组件内部。从而使得我们的协议层变得非常干净问题无法解决UI容器包裹问题，对搭建不够友好

19. 方案三 Formily2.0方案，针对JSONSchema的扩展协议核心思路 • 扩展Void类型描述数据无关布局容器或控件 • 扩展 x-* 属性描述UI控件与控件属性优点 • 完全表达UI，无需第二套协议，学习成本很低 • 可以将临时状态封装在渲染引擎或者组件内部 • 对搭建更加友好，因为它已经可以把UI层级给表达出来了

20. 扩展组件思路设计思路问题如何开发协议驱动的自定义组件目标 • 足够简单 • 符合标准组件开发最佳实践

21. 基础扩展方案属性约定，比如 value/onChange 组件属性约定，保证所有输入型组件可以快速接入优点符合统一 React 属性命名规范标准，对于第三方组件接入成本很低缺点 value/onChange/disabled/readOnly

22. 白盒进阶扩展方案标准Hooks方案，借助ReactContext，就近寻找渲染引擎内部状态模型优点完全隔离了渲染引擎与组件自身属性，做到了类型更友好，写法更自然的通信模式缺点

23. 黑盒进阶扩展方案连接器扩展优点 • 无需重新封装组件，只需要关注属性与字段模型的映射 • 映射转换逻辑方便复用缺点

24. 高级场景化扩展方案渲染权限转移模板化方案优点可以封装出大量模板组件，模板组件内部可以将布局，交互，布局，逻辑全部固化，在实际使用过程中提效很高，比如ArrayTable/ArrayCard这种自增组件缺点

25. 总结 Formily的扩展能力，是建立在标准组件开发最佳实践基础之上的，它是没有任何黑魔法的

26. 使用数据

27. 阿里系叮咚买菜菜鸟盒马使用数据高德天猫超市 58同城非阿里系美团点评钉钉淘系技术部蚂蚁集团数字供应链事业部字节跳动阿里云 Lazada 阿里拍卖淘特天猫国际腾讯本地生活快手客户体验业务平台拼多多网易云音乐

28. 社区运营数据总star数总关闭issue数 chrome插件安装量 6.5k 700+ 1.6k 总fork数总贡献人数文档独立用户访问量 762 131 12k/月总PR数总下载量 900+ 152k

29. 未来规划 PLAN 规划 SHORTAGE 还有哪些不足？ • 进一步优化性能 • 构建更多的扩展生态 React18 • 思考如何借助Formily一次性解决CRUD页面 • 不兼容IE，无法解决，也不想解决 • 整体体积较大，压缩前 130k左右，压缩后80k左右，包含桥接组件库 • 学习成本还是比较高，打算逐步完善视频教程

30. Formily的价值到底在哪里？在 1套底层适配多个框架高性能的加持下 1份Schema 适配多端 1个生态全业务场景覆盖 (Pro/Low/No Code)

31. 个人微信 Formily技术交流钉钉群

32. 数字供应链团队数字供应链校招交流群

33. Thanks