欢迎来到低码家!
logo

你的低代码专家

专注低代码平台、技术资讯评测

formily

[阿里]Formily

MIT License
技术详情
Formily是阿里开源的前端表单开发框架,也是一种表单类低代码平台的可视化框架。Formily主要帮助解决前端中后台表单的多字段场景下性能差,关联逻辑复杂,数据和状态管理难等问题。

fomily1.png

表单性能

Formily借鉴了Mobx的MVVM思想,依靠依赖追踪和Reactive响应式模型解决了表单值全量渲染的问题,从而提升了表单输入时的性能问题。此方案最终抽象为 @formily/reactive 库方便开发人员使用。

表单联动

Formily经过阿里内部多年的实践经验抽象出了表单领域模型,并且设计了一套独有的路径系统来优雅实现各表单之间的联动关系。此方案最终抽象为 @formily/path 库供开发人员使用。

表单配置化

表单页面由数据和UI两部分组成,因此表单低代码开发的前提是通过UI描述协议和数据描述协议来实现表单数据和UI的配置化。阿里Formily使用业界常用的json-schema作为表单的数据协议,并在此基础上通过x-*方式来添加UI及其他协议,比如字段间的联动使用x-reactions属性来扩展。

分层框架

fomily2.png

Formily的架构分为内核层、UI桥接层、拓展组件库以及表单配置器。

内核层与UI无关,其主要实现上述的几项特性,并且方便接入各个UI框架。

UI桥接层用于将核心层接入前端框架,方便开发人员开发,目前Family支持React、Vue框架,其NPM包分别为@formily/react和@formily/vue。

拓展组件库基于UI层进一步抽象,实现框架的开箱即用。

表单配置器则用于实现表单的配置化开发,当然也能用于表单编辑器的实现。Formily能与阿里开源低代码引擎Designable天然集成,从而快速实现表单的低代码开发。

整体而言,Formily比较适合复杂中后台开发,支持React和Vue框架,能够跟流行的中后台框架如antd、element搭配使用。如果你正在开发公司或者自己的表单设计器,那么以Formily开发框架为基础也是个不错的选择。