阿里重磅开源中后台 UI 解决方案 Fusion

 

2018 年 12 月 16 号，Fusion 在 OSC 深圳源创会年终盛典上正式开源， 这个在阿里内部跑了三年的产品，终于对外了。

可能一些业界的同窗已经在某些渠道据说过阿里的 Fusion Design

• 好比这篇 16 年就传得很火的《阿里最新神器－fusion design》

• 好比知乎上面 17 年讨论得很热烈的话题 《阿里巴巴的 Fusion Design 是如何运做的？》

• 也有可能来自 16 年 d2 论坛上周源同窗的对外分享

距离上次对外发声，Fusion 在阿里内部又走了两年，这两年内咱们技术领域又有了一些突破。此次重点介绍咱们的突破吧。不过介绍前仍是要说下 Fusion 是作什么的，毕竟仍是有不少同窗是第一次据说的！

1. Fusion 是作什么的

1.1 解决设计师和前端工做协同的问题

通常一个项目的上线流程基本都要经历，评审、设计、开发、测试 这几个阶段。

而各个阶段又能够再深刻进去的拆分，大体以下：

• 评审： 业务交互（产品功能交互），业务逻辑的评审；

• 设计：设计规范（设计师对整个产品在视觉规范上面的定义），视觉设计（绘制视觉稿），标注稿（产出标注搞给到前端）

• 开发：前端通常都会有一套组件库；可是组件库可能和本身业务线的品牌并非对应的（好比阿里橙、天空蓝，基本没类业务线都会有个本身的品牌），因此第一步须要在组件层面作 UI 的定制，而后是业务逻辑的开发。

• 测试：最多见的就是设计师和前端坐在一块儿两天专门作 UI 还原度 review；业务逻辑测试是比作流程很少说。

这里重点说下流程中的两个问题。

重复工做

这里面标黄了的部分表示多是各个业务线间的重复工做：

• 好比中后台 UI 的交互都是肯定的

• 好比设计规范均可以在一个集成的规范上面作扩展

• 好比标注能够经过插件统一解决，而视觉还原、还原度 review 能够交给设计师去关心

协同问题

协同遇到的问题，上面知乎连接里面周源的回答已经很是清楚了，我这里再大概总结下。

• 由于使用的工具不一样对概念的认知不一样

对阴影的理解不一样

• 设计师的理想和前端的现实问题之间的差异

一样 margin-top:12px 可是获得的间距不一致

• 每隔一段时间品牌就会升级一次，基础 UI 翻新，会有较大的工做量

• 设计师间约定的规范没有很好的落实，已经设计好的设计稿你们共享不便

• 已经开发好的组件没有造成很好的复用

1.2 Fusion 工做流

去除重复流程，只关注业务

• 设计师更加方便的作设计

• 而前端只需关注业务逻辑

经过抽象骨架 DPL -> 经过平台定制产出定制好 UI 的组件、模板 -> 流入设计师的工具里面直接拖拽使用 -> 前端直接使用定制好的组件（不需关注组件 UI）

• 设计师使用的同一套规范的组件，产出的设计稿都是同一套规范。（这里使用 sketch 插件名字叫 FusionCool)

• 前端不须要关注组件 UI 还原度。（还原度有问题 = 设计配置的问题）

1.3 不须要再作从 0~1 的事情

• 设计端使用 sketch 插件（FusionCool）在 sketch 既能设计页面，又能沉淀已经设计完成的模板

• 开发端使用 开发工具 （Iceworks）在项目中既能使用现成的模块，又能沉淀已经开发完成的模块

那将来在 Fusion 模块模板达到极度丰富后，使用能够方便的找到各个领域的模块模板来使用，不须要从 0 开始搭建。

2. Fusion 能力点

一个平台，两个端

一个平台：fusion.design

两个工具：

• 开发者工具 Iceworks

• 设计师工具 FusionCool

2.1 一个平台

https://fusion.design 能够定制本身的 Design System（如下简称 DS）

建立本身的 Design System

每一个人或者团队均可以经过 https://fusion.design/sites/new 能够建立本身的站点

站点提供三种能力：文档编辑、主题管理、物料托管。

文档编辑

存储设计师文档和开发文档。

主题配置管理

集成了能够管理、定制、发布组件的主题的能力（下文会简称为配置平台）。

物料托管

可使用开发好的区块、模板。

区块 - 代码片断

模板 - 脚手架

2.2 两个工具端

设计师工具 - FusionCool

主题发布完成后就到了 Sketch 的插件端 FusionCool，设计师能够在 FusionCool 里面搜索 iconfont 全部素材、使用配置好的组件、使用站点的模块模板。

开发者工具 - Iceworks

Iceworks 是淘宝飞冰团队开发的面向前端开发者的 GUI 工具，开发者无须关注环境的问题，而且有海量物料可用。目前已经和 Fusion 的物料体系打通，能够轻松使用 Fusion 站点的物料。

每一个站点有本身的物料源

可直接在 Iceworks 配置物料源地址

项目开发

3. Fusion 的技术实现

Next 组件

Fusion Next 是基于 React 实现的一套 PC 端的组件库，这套组件库已经在阿里内部服务了三年。

github 地址： https://github.com/alibaba-fusion/next

此次开源出来的版本是最近一年基于以前两年的使用经验、问题反馈进行从新整理和优化过。具有如下特性。

易用性

对比上一个版本 80 + 功能，进行 300+ 优化，组件总体代码体积却减少 30%

• next.min.js 910KB -> 702KB

• next.min.css 428KB -> 337KB

一共 50+ 组件，打包下来却只有 700 多 K，这个目前在业界比较少组件有能力作到这点。组件之间依赖关系清晰，复用度高也是体积小的缘由。

稳定性

组件单测覆盖率近 90%，提供服务以来没有产生过起线上事故。

能力加强

国际化、RTL、无障碍能力全面支持。
另外针对中后台表单大数据量场景作了大量性能优化，好比普通 table 随着数据不断增加 render 会愈来愈慢，大体以下：

Next 引入了 virtual-list ，目前用在了 table 和 select 这两个使用频率较高的组件。由于在大数据量 (测试过 1w 节点）下只渲染须要展现的节点（好比 20 个），因此能够将渲染时长永远的控制在 0.3s 以内。

FusionCool

代码到视觉稿的无损还原

突破 html2svg 的弊端，作到无损还原

早在一年前咱们是把设计师在主题配置平台（直接在 web 页面配置组件的主题）的组件直接经过 html2svg 技术直接把组件直接转换为 svg 文件，从而让设计师能够直接在 sketch 里面使用。可是这种方案存在的弊端就是还原度不够（大概 95% 还原度）。

html2svg 的还原度问题

主要缘由是 html 采用盒模型 和 svg 的转换并非一一对应的，因此这里永远有修不完的 bug。虽然 95% 是好的，可是对于设计端来讲是彻底不能忍受的。

因此 Fusion 项目小组通过近半年的努力终于突破了还原度的问题，流程图以下：

从配置平台导出的再也不是 html，而是 DesignToken （设计变量），FusionCool 底层使用 Airbnb 提供的 react-sketch 能力写成的一份 Next 组件，直接经过 DesignToken 覆盖默认变量，最终在 Sketch 端实时渲染。

组件的类型、大小、内容均可以直接在面板配置

图表配置能够直接唤起配置面板

sketch 端的任何点击均可以经过 Event 的方式在 FusionCool 产生配置面板。

4. Fusion 将来

• 咱们会在这半年内让 Fusion 的物料仓库可以极度丰富，能够覆盖到各行业领域。让设计师和开发者都不须要再作 0-1 的事情。

• 咱们指望可以突破视觉稿转代码的技术难题，让视觉稿到可用代码成为可能。

相关连接

• Fusion 站点： https://fusion.design/

• next github 仓库： https://github.com/alibaba-fusion/next