前言

 

从古老的桌面软件领域的 WPF、JavaFX，到移动端与时俱进的 SwiftUI、JetPack Compose，再到 Salesforce、OutSystems、Mendix 等一众 hpaPaaS （High-productivity Application platform as a service），一直以来许多产品都在尝试通过可视化搭建的手段来降低 GUI 应用的研发门槛，提高生产效率。而云凤蝶则是一个新的挑战者。

 

本文将以概览性的视角来介绍云凤蝶在 低代码+可视化搭建 这条路上遇到的问题与解决方案，包括：

 

中后台 Web 应用搭建有哪些关键要素？

 

可视化编辑器如何对齐 Pro Code 下视图 DSL 的表达能力？

 

交互逻辑与状态如何进行组织与聚合？

 

如何基于可视化底盘去探索 10 倍效能提升？

 

一、云凤蝶产品介绍

 

云凤蝶产品介绍

 

二、可视化搭建的关键要素

 

如上图左侧所示是一个简单网页，一个 Tabs 内嵌了一个 Form 表单，在普通用户的视角里看到的世界可能是扁平的，但是在开发者的视角基本都可以看出来右侧的一颗 组件树。

 

一个组件化的搭建平台其实本质就是一条组件组装流水线，其核心目的就是如何多快好省地帮助用户制作出这颗树。

 

那么让我们将视角聚焦到 “组件” 这个东西上， 在当前大多数前端框架体系下，组件是一个满足f: props => view 协议的函数，它的入参一般是一些简单的抽象好的配置，返回值则是使用某种视图描述语法（HTML、Virtual DOM）来描述的一块视图，而其计算过程可以使用任意框架或语言来实现。

 

如此看来，组件还牵扯到函数和运算过程，好复杂 ...

 

而实际上我们可以先尝试做一个职责切分，因为现如今在蚂蚁前端的 Pro Code 研发体系下，Basement 负责研发流程，Gitlab 负责代码管理， tnpm 负责管理模块，Bigfish 负责组件开发规范。所有这些都已经非常成熟，我们应该把专业的事情交给专业的人来做，尽量站在这些成熟的体系之上，也就是：

 

“让上帝的归上帝，凯撒的归凯撒”

 

因此最终云凤蝶决定将 Pro Code 世界下的组件作为原材料去消费，自身专心去做一条高效且全能的组装流水线。一条组装流水线其最小功能闭环至少需要有：

 

组件的导入与二次拼装能力

 

组件的入参属性定制能力

 

组件的逻辑编排与联动能力

 

细化来看，每一个其实都是相当复杂的课题：

 

组件的导入与二次拼装能力

 

如何实现中心化的组件注册与加载体系

 

如何实现编辑与预览时实时更新

 

如何控制组件之间的加载顺序

 

多组件的公共依赖如何去重

 

如何处理组件的不兼容升级

 

组件的入参属性定制能力

 

属性面板如何表达 antd 的所有 props 类型

 

如何支撑对属性的扩展能力

 

对值的类型的扩展能力

 

JS 基本类型

 

业务类型：Moment、Regexp、URL、Function、Email、Image...

 

对值的来源的扩展能力

 

静态值

 

数据绑定（单向，双向，一次性）

 

异步动态数据源（HTTP/TR）

 

第三方图片素材库...

 

组件的逻辑编排与联动能力

 

组件之间组合：如何解决不同屏幕尺寸下的多组件位置关系变化问题

 

组件之间联动：如何支持外置共享状态的管理与消费

 

这其中每一个点可能都需要一篇文章的笔墨才能介绍清楚，因此本文只会是一篇目录性质的纲要介绍，后续我们会陆续发表对更多实现细节的分享文章，敬请期待。

 

三、组件导入与制作

 

上一小节已经阐释了云凤蝶需要有消费 npm 世界的组件能力。如下图所示，云凤蝶既支持从代码导入也支持拖拽二次拼装。

 

通过上述一套流程，我们可以实现快速导入一个 npm 上已存的代码组件到云凤蝶平台上使用，并且基于构建出的依赖 Manifest 信息和 SystemJS Loader 可以实现对一些公共依赖的去重，加载顺序的控制等等。

 

更为重要的是，这里面出现了一份 “云凤蝶组件定义”，这是一份非常重要的白皮书，它是我们在摸爬滚打接入 antd 所有组件之后，最终总结出来的对一个组件所有编辑时与运行时公共行为的上层建模与抽象，它指导了云凤蝶如何去理解一个组件的诸多表现。