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
閱讀更多 InfoQ 的文章
