formily

什么是Formily?

Formily是一款面向中后台复杂场景的数据+协议驱动的表单框架，它也是阿里巴巴集团的统一表单解决方案。借助Formily可以完成复杂的表单页面需求，同时Formily提供的表单设计器可以快速搭建表单。

Formily官网：formilyjs.org

• 高性能： Formily在字段数量无限多和高频输入场景下，可以保证O（1）时间复杂度；

• 框架无关：Formily已经完美兼容React、Reactive、Vue框架；小程序目前不支持

• 生态完备：对 ant Design element ui库都支持

• 协议驱动：协助Formily让后端通过JSON动态驱动表单渲染以实现表单可搭建可配置；

• 相当完备： Formily可以支持各种复杂的表单页面需求。

设计原则

• 单一职责

• 优雅命名 ： 遵循简单、直观、一致的标准。

核心架构

Formily核心架构分为四层，自下而上分别是：

• 内核和协议层：

  内核是表单相关UI无关的领域模型系统；

  协议层是基于JSON Schema扩展的表单协议；

• UI桥接层：基于Formily内核与各种UI框架（如React、Vue）桥接胶水层；

• 组件扩展层：建立在UI桥接层与UI组件库的桥接胶水层；

• 应用层：借助Formily可以构建纯源码、低代码、无代码等应用解决方案；

设计思路

1、高性能思路

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

方案一、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)；