点击围观!腾讯 TAPD 助力金融行业研发提效、敏捷转型最佳实践! 了解详情
写点什么

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

  • 2018-12-25
  • 本文字数:2752 字

    阅读完需:约 9 分钟

阿里重磅开源中后台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 的事情。

  • 我们期望能够突破视觉稿转代码的技术难题,让视觉稿到可用代码成为可能。

相关链接


更多内容,可关注前端之巅(ID:frontshow)



2018-12-25 08:5619177

评论 6 条评论

发布
用户头像
目前有没有用的?现在准备重新构建企业级大型后台管理软件,用它合适吗?
2018-12-31 16:36
回复
用户头像
这个项目和antd是什么关系?
2018-12-26 10:57
回复
Antd以服务于蚂蚁的产品为大前提;Fusion目标服务于整个集团,帮助每个BU都能定制属于自己的XX Design,起初的DPL也是由集团各BU设计师共同参与设计的。因此Fusion在UI的定制能力更加通用,组件必须对DOM结构、变量做极致的优化,以满足各业务线的定制能力。
2018-12-29 16:51
回复
用户头像
值得试试看
2018-12-25 11:41
回复
用户头像
牛逼了
2018-12-25 10:19
回复
没有更多了
发现更多内容

转行大数据培训学习应该注意什么?

小谷哥

前端编程培训学习好就业吗

小谷哥

什么是对象存储?3000字给你整明明白白!

wljslmz

OSS 对象存储 OBS 存储技术 8月月更

一文读懂Web3 结算协议 Zebec Protocol 的商业模式与发展前景

西柚子

压缩上传的图片并返回图片路径

源字节1号

软件开发

新零售进阶|从“人-货-场”到“北极星指标”

Kyligence

新零售业态 对齐指标 管理目标

【LeetCode】层数最深叶子节点的和Java题解

Albert

LeetCode 8月月更

解放双手!根据代码自动生成时序图,这款IDEA插件真香

程序知音

Java 程序员 后端

StarRocks 成都见!企业如何打造极速统一的数据分析新范式,助力业务全方位升级

StarRocks

数据库

浏览器、负载均衡 、进程内部层...那些你需要掌握的多级缓存

华为云开发者联盟

缓存 前端 浏览器

云原生(十九) | Kubernetes篇之Kubernetes(k8s)网络

Lansonli

云原生 k8s 8月月更

学习大数据编程有前途吗

小谷哥

有零有食携手阿里云&瓴羊共建企业数字化解决方案

瓴羊企业智能服务

一加是oppo旗下的品牌吗?

Geek_8a195c

React Native框架与小程序混编的方案

Geek_99967b

小程序

一文揭开https原理的真实面貌(简明扼要,附代码说明)

ike潮

https TLS HTTPS协议加密 SSL/TLS 协议

HashMap为什么线程不安全?

Java面试那些事儿

Java jdk java程序员 java面试 hash map

数据构造那些事儿

转转技术团队

测试左移 测试数据构造 测试提效

阿里重磅开源中后台UI解决方案Fusion_前端_潕量_InfoQ精选文章