阿里中後臺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；業務邏輯測試是必作流程很少說。

這裏重點說下流程中的兩個問題。

問題1：重複工做

這裏面標黃了的部分表示多是各個業務線間的重複工做

• 好比中後臺 UI 的交互都是肯定的；
• 好比設計規範均可以在一個基礎的規範上面作繼承和擴展；
• 好比標註能夠經過插件統一進行規範，而視覺還原、還原度 review 這部分設計師最關心的部分，可是作完了設計稿只是第一步，仍是要找前端對真實的頁面再去調整一遍。

問題2：協同問題

協同遇到的問題，上面知乎連接裏面周源的回答已經很是清楚了，我這裏再大概總結下。

• 由於使用的工具不一樣對概念的認知不一樣

對陰影的理解不一樣

• 設計師的理想和前端的現實問題之間的差異

一樣 margin-top:12px 可是獲得的間距不一致

• 每隔一段時間品牌就會升級一次，基礎 UI 翻新，帶來了較大的工做量
• 設計師間約定的規範沒有很好的落實，已經設計好的設計稿你們共享不便
• 已經開發好的組件、模塊在團隊內沒有造成很好的共享、複用。

Fusion 的工做流

去除重複流程，只關注業務

• 設計師更加方便的作設計
• 而前端只需關注業務邏輯

經過抽象骨架 DPL -> 經過平臺定製產出定製好UI的組件、模板 -> 流入設計師的工具裏面直接拖拽使用 -> 前端直接使用定製好的組件（不需關注組件UI）

• 設計師使用的同一套規範的組件，產出的設計稿都是同一套規範。（這裏使用sketch插件名字叫FusionCool)
• 前端不須要關注組件 UI 還原度。（還原度有問題 = 設計配置的問題）

1.2 不須要再作從0~1的事情

• 設計端使用 sketch 插件（FusionCool）在 sketch 既能設計頁面，又能沉澱已經設計完成的模板
• 開發端使用 開發工具 （Iceworks）在項目中既能使用現成的模塊，又能沉澱已經開發完成的模塊

那將來在Fusion 模塊模板達到極度豐富後，使用能夠方便的找到各個領域的模塊模板來使用，不須要從0開始搭建

2. Fusion 能力點

一個平臺，兩個端

一個平臺：fusion.design

兩個工具：1. 開發者工具 Iceworks 2. 設計師工具 FusionCool

2.1 一個平臺

https://fusion.design 能夠定製本身的 Design System（如下簡稱DS）

建立本身的 Design System

每一個人或者團隊均可以經過 https://fusion.design/sites/new 能夠建立本身的站點

建立站點

站點提供三種能力：文檔編輯、主題管理、物料託管

文檔編輯

存儲設計師文檔和開發文檔

設計/開發文檔

主題配置管理

集成了能夠管理、定製、發佈組件的主題的能力（下文會簡稱爲配置平臺）

物料託管

可使用開發好的區塊、模板

區塊-代碼片斷

模板-腳手架

2.2 兩個工具端

2.2.1 設計師工具 - FusionCool

主題發佈完成後就到了 Sketch 的插件端 FusionCool，設計師能夠在 FusionCool 裏面搜索 iconfont 全部素材、使用配置好的組件、使用站點的模塊模板。

2.2.2 開發者工具 - 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 站點： fusion.design/
• next github 倉庫： github.com/alibaba-fus…