2018 年 12 月 16 号，Fusion 在 OSC 深圳源创会年终盛典上正式开源， 这个在阿里内部跑了三年的产品，终于对外了。
可能一些业界的同学已经在某些渠道听说过阿里的 Fusion Design
比如这篇 16 年就传得很火的《阿里最新神器－fusion design》比如知乎上面 17 年谈论得很热烈的话题 《阿里巴巴的 Fusion Design 是如何运作的？》也有可能来自 16 年 d2 论坛上周源同学的对外分享间隔上次对外发声，Fusion 在阿里内部又走了两年，这两年内我们技能领域又有了一些打破。这次重点先容我们的打破吧。不过先容前还是要说下 Fusion 是做什么的，毕竟还是有很多同学是第一次听说的！
一样平常一个项目的上线流程基本都要经历，评审、设计、开拓、测试 这几个阶段。
而各个阶段又可以再深入进去的拆分，大致如下：
评审： 业务交互（产品功能交互），业务逻辑的评审；设计：设计规范（设计师对全体产品在视觉规范上面的定义），视觉设计（绘制视觉稿），标注稿（产出标注搞给到前端）开拓：前端一样平常都会有一套组件库；但是组件库可能和自己业务线的品牌并不是对应的（比如阿里橙、天空蓝，基本没类业务线都会有个自己的品牌），以是第一步须要在组件层面做 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设计师工具 FusionCool2.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 -> 702KBnext.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
