为什么要研究这套方案，始于一次经理的提问，如何应对前端UI的快速迭代，当时没有太多想法，无非就是封装组件，前端工程化？后来在一次阅读前淘宝前端于江水的知乎文章提到Fusion Design，是阿里专门应对业务界面开发的一套中后台解决方案，似乎问题有了答案，之前有想过的自定义拖拽式开发前端，原来阿里已经开发出来，并内部应用了几年了。
Fusion Design是阿里2018年开源的中后台解决方案，已经在阿里内部打磨三年，50%前端应用使用此方案，可以说使用非常成熟稳定了。Fusion Design 主要就是 4 个组成部分：
- 组件库 @alifd/next
- Fusion 站点
- FusionCool Sketch 插件
- Iceworks 客户端
组件库
@alifd/next (后文中简称为 Fusion 组件) 是一套基于 React 的组件库, 我们内部称之为骨架 DPL(Design Pattern Library)。 Github 仓库地址: https://github.com/alibaba-fusion/next 文档见: https://fusion.design/component，
Fusion 组件 的基本特性：
- 组件丰富 50+个组件,覆盖绝大多数场景
- 体积小 next.min.js 702 KB next.min.css 337 KB
- 组件单测覆盖率近 90%
Fusion 组件的杀手锏,最强大的一个能力: 主题配置能力，可以通过 Fusion 站点可视化配置主题
Fusion 站点
Fusion Design 管理等能力的集散地。主要提供自有站点管理，主题配置等功能
FusionCool
是一个sketch插件，提供给设计师使用，设计组件和模板，提供基础组件、图标Icon、图表、模块、模板
IceWorks客户端
也就是飞冰客户端，飞冰是阿里开源的另一个项目，关于飞冰的介绍，可以参考 https://www.v2ex.com/t/435352
Fusion 组件库本身是不依赖任何脚手架, 完全可以通过 cdn 引入，或者整合到 create-react-app 。Fusion 组件库为了方便应用到前端项目,需要一个快速帮忙生成工程项目的脚手架。ICE 团队开源了 ICE 体系的一系列产品,Fusion Design 把 Iceworks 作为 Fusion 官方主推的开发工具。
相关问题
Fusion Design 和 Ant Design 有什么差异?
简单地回答就是 Ant Design 是一套组件库, Fusion Design 是一个组件库生成工厂。
Ant Design 是一款很优秀的组件库,在社区深受欢迎,影响力极大。代码质量优秀,Fusion 组件库在开发过程中也有所借鉴。Fusion Design 也在阿里内部沉淀打磨了三年, 覆盖大量的 BU 和业务场景。单从组件库的层面而言, Fusion 和 AntD 的体验差异不大。
参与过 SEE Conf 的同学都会为 AntD 优秀的设计理念所折服。可是一千个人眼里有一千个哈姆雷特,各个公司(BU/部门 /产品线)对于美的认知是由差异的,而且业务形态的不同也对设计风格有着不同的要求,所有各个公司(BU/部门 /产品线)对组件库默认的样式进行定制就常常成为刚需。当用户想要定制组件库的时候, AntD 就不是特别方便，需要前端工程师大量修改 LESS 变量,反复与设计师确定设计稿还原的准确性。AntD 定制主题 / Issue: support dark theme
Fusion 组件库由集团多个 BU 的设计师共同参与设计的，目标是帮助每个 BU 都能定制属于自己的 XXXX Design。所以 Fusion Design 会在 UI 的定制能力上比 Antd 设计得更为通用，以满足各业务线的定制能力。设计师通过 Fusion Design 的平台,能够可视化编辑 Fusion 组件库的样式，全程无需工程师参与。
阿里集团内, 天猫 MUI、淘宝 ICE Design、阿里云 Wind、盒马鲜生 Hippo、菜鸟 Walle 等 Design System 都是基于 Fusion Design 深度定制, 满足各个 BU 不同的业务需求。目前集团内服务 40+ BU、项沉淀主题 1500+ 套,服务 2000+ 项目。
Fusion Design 和飞冰 (ICE) 是什么关系？
ICE 是 Fusion 的好基友。 Fusion 解决的是前端与设计师的协同问题。 ICE 解决的是前端开发的效率问题。通过海量可复用物料，配套桌面工具极速构建前端应用，提升开发效率。 Fusion 与 ICE 的合作主要体现在以下几点:
- ICE 官方 react 物料使用
fusion 组件库作为默认组件库 - Fusion 推荐使用 ICE 的 GUI 客户端 Iceworks 作为首选开发工具
- ICE 官方 React 物料和 Fusion 官方物料是互通的(春节前完成)，双方共同丰富物料生态,推动区块 /模板物料的开发模式落地。
Vue 用户可以用 Fusion Design 么?
Fusion 组件库是基于 React 技术栈实现的。但是 Fusion Design 的组件配置能力和组件的技术栈是无关的。 只要一套组件库按照 Fusion Design 组件开发规范进行开发,就可以接入到 Fusion Design, 获取配置能力。
附上更多研究资料：
阿里中后台UI解决方案 - Fusion
阿里巴巴的 Fusion Design 是如何运作的？
Fusion Design官网
飞冰IceWorks使用、开发文档
加入QQ群663077768，一起学习交流前端开发
