前端能力中台化之路—Fusion Design 成长史(中)

3.Fusion Design 成长历程

Fusion Next & 样式配置平台
为了解决多业务多样式的问题,我们自己独立维护了一套组件库 Fusion Next。然后为这套组件库打造了一个配置平台。二者结合就是一个组件库工厂,可以生产出各种样式的组件库。

效果如图所示:

实现Fusion Next & 样式配置平台的核心技术点有三个。

• 变量抽取

• 规则实现

• 动态渲染

接下来一一讲述。

变量抽取

变量抽取就是决定一个组件哪些量是可以配置,那些量不可以配置,可以配置的量抽离出来。这部分是Fusion Design开发过程中投入人力最大的一个点。

变量抽取的新核心理论是原子设计理论。

原子设计理论认为页面应该是可以组合和分解的。按照原子设计理论, Fusion Design团队汇总了业界组件库包含的各种组件,然后再把复杂组件(原子设计中的组件)拆分成简单组件(原子设计中的元件)的组合,进而拆分成为基础变量(原子设计中的元素)。

一个简单的Button就可以拆分成茫茫多的变量。而正是这么多的变量财能够满足业务方多变的视觉样式要求。最终50+组件梳理出3500+可配置量。

规则实现
上文中梳理出的3500+变量及其组件的配置规则。得益于前端领域成熟的 CSS预处理语言,这些变量和规则可以容易的落地为SASS/LESS变量。虽然这是一个很重要的技术点,但是难度并不大。这里不细说了,具体见Fusion Next Github

动态渲染
刚刚如果看了视频的同学可以看到,当组件的配置项的值被修改了以后,页面上组件状态也是跟着动态变化。其核心的一点就是服务端SASS编译。

1. 当用户修改了某个变量,被修改的配置项会数据会被发送到服务端。

2. 在服务端编译成为可用的 CSS,再返回到浏览器。

3. 浏览器收到CSS数据之后,找到承载样式的style标签。

4. 把其中的内容替换为刚获取的CSS。

就达到了动态渲染的效果。但是这个方案是 3 年前确定方案。随着浏览器原生能力的增强。CSS Variable 特性已经具有的较好的兼容性。CSS Variable 配合 一个存在许久API calc() 可以达到一样的效果。而且省去通信时间和服务器编译时间。这个方案是配置平台未来的演进方向。

主题包
配置平台的数据日常是沉淀在数据库中,为了方便前端工程师在开发中使用。用户完成配置以后, 配置平台会发布一个主题包,他是一个合法的npm包。包内既有元数据的沉淀: SASS/LESS/Javascript,方便SASS/LESS/CSS in JS 体系使用;也提供生产可用的CSS文件。

工作流
在完成配置平台之后,前端工程师也设计师协作的工作流程如下图所示。设计师在配置平台修改组件样式,产出主题包。前端工程师依照主题包和设计稿进行前端工程开发。