Ant Design v.s. Blueprint－適用於後台系統的 UI Library EP1：介紹與選用考量

UI Lib 百百種，選擇困難又發作

基於瀏覽器的功能日漸強大與各種函式庫的支援，以網頁建立公司各種後台管理系統已經是非常常見的事。相較於前台是給大眾（消費者）使用，需要在介面設計上雕琢與美化，後台系統較著重於大量資料的呈現以及互動性的操作。如何清楚的呈現、操作或更進一步的拼裝元件，方便使用者完成工作，都是設計後台時的重點考量。

本篇主要針對 Ant Design(AntD) & Blueprint(BP) 這兩款 Data Intensive 的 Library 幾個常用元件在資料的顯示與操作、API 使用經驗及一些優缺點（地雷區） 做一些分享。由於筆者本身使用 Typescript(ts) 開發，所以同時也會記錄一些使用 ts 的便利性以及遇到的問題。

在開始之前先列出兩個框架共同的特性

1. 以 React 攥寫，元件皆是以 React Component 的形式使用
2. Types 方面，兩個 Library 都自帶 type 的定義檔，不需要再額外安裝
3. 互動性元件都有做雙向綁定，也同時會限制你只能選擇可控（傳入 value & onChange）或非可控（只傳 defaultValue）模式使用

好的，共同美好的部分敘述完畢，以下開始進行兩邊的比較

Ant Design

Ant Design (Antd)

由中國螞蟻金服維護，有完整的中文文件，在 GitHub 上回應 issue 的速度也非常快（半天以內就會被標記 & assign），比較不用擔心開發上遇到問題被卡住，也有蠻多前人已解決的 issue 可以在開發上參考。以下從基礎建置與使用經驗上條列出一些優缺，讓想選用 AntD 的開發者做事前考量

Pros

1. 提供完整的 Layout & Grid System，再配合 AntD 的訂製主題與設計原則，可以在不需要寫什麼 css code 的情況下就打造出簡潔好用的後台 UI。同時許多元件也都內建 RWD 版面，不需要自己重新規劃排版
2. 自訂樣式部分，AntD 使用 less 開發，但如果是 sass 派開發者（像是筆者）依然可以透過 webpack loader 轉譯自訂樣式。但如果要調整像是主題色等等的全域變數時，還是需要建立一個 less 檔來覆蓋預設資料，若使用 webpack 來打包，代表你同時需要 less-loader & sass-loader
3. 承上述，雖然在自訂樣式的管理上會比較麻煩，但相較於 Blueprint，AntD 提供一些視覺化的套件，使開發者更容易設計出供消費者使用的前台頁面。若有同時開發前後台需求的開發者可以優先考慮 AntD
4. 若有需要資料視覺化呈現或更複雜的 UI 操作，螞蟻金服同時也提供 Ant Design Pro，提供各種進階的元件，如圖表、折線圖到複雜的表單、流程圖等等，讓你可以打造非常炫炮的後台
5. 官方範例程式非常完整，大部分的應用都可以透過參考並修改範例程式來達成。官方也有提供 CodePen，讓你直接更改參數並即時看到結果，不用再等專案一直 build build build build build build
6. 元件功能非常多元，如後台較常使用的 Table 元件具有巢狀 Table 的性質，以及透過 HOC 包裝後的 Form 元件擁有非常實用的 validator 等等。AntD 實屬功能性非常高的 Library

Cons

1. 由於元件都設計的很完整，又複雜的元件 element stack 也會隨之增長。如果想針對某個小地方做樣式處理但 api 又沒有支援目標元素，就只能打開 devtools 找到想要的 element 並用 class 進行覆寫
2. 有依賴於外部套件的元件可能會有支援的 api 差異以及 types 對不上的狀況。筆者是使用 Carousel 時遇到與依賴套件 react-slick 的支援差異
3. 值得一提的是在版本 3.8.4 版更新後，安裝 AntD 的會同時帶有 antd/icon package。只要使用到 Icon 元件，在 building 時 webpack 就會將整個 icon module 打包進你的專案。由於 AntD icon 全部以 svg 組成（大約 500 kb），bundle 後專案大小就會

Huuuuuuuuuuuuuuuge project

相關議題討論可以追蹤 issue#12011，或是參考這篇文章來針對必須使用到的 icon 自行打包。官方也聲明此問題會在v4 版本解決，但屆時必定是一個 breaking change，要使用的開發者可以納入考量

Blueprint

Blueprint (BP)

美國大數據公司 Palantir 所設計的 UI Library，此公司同時為程式碼檢測工具 TSLint 的開發公司。本身專注於大數據的研究，一不小心設計出一套 Data Intensive 的框架好像也是合情合理的。雖然使用的人數不比 AntD 多，但 github issue 回覆也算迅速，不怕使用到一半找不到援助。以下同樣列出優缺點供開發者參考

Pros

1. 除了 TypeScript 完整支援外，BP 大量地使用泛型傳遞給元件，在與元件互動以及使用 callback 時都能很明確的知道目前所傳遞的資料型態
2. 與其他 Library 不同，BP 的 Table 風格近似於 Excel 的 Sheet，並且可以實作出一些簡單的 Excel Sheet 操作
3. 將 Library 切分成各種 package（@blueprint/core, @blueprint/table, … etc），讓開發者可以依照自己的需求挑選 package，同時控制自己專案的 bundle size
4. 同時提供 scss & less 的樣式表，開發者可以選用自己習慣的 css 擴充語言做開發
5. 官方文件針對元件的每一個屬性（props）都提供非常詳盡的敘述與說明，同時也把該屬性所繼承的介面（interface）同時列出，大大大大大的提升使用 ts 的開發者在設計自訂介面時的便利性

用 TypeScript 為基底設計就是讚啦

Cons

1. 相較於 Antd，BP 功能上較趨向於一般 UI Library。除了功能較強、跟 Excel 一個樣的 Table 元件以外，複雜的應用（包括 Form）通常都需要自己組裝元件，才會符合最後的使用情境
2. 由於是設計給桌面應用為主，BP 沒有提供預設的 Grid System，排版需要靠自己調整與維護；也沒有提供 RWD 布局，如果有需要只好自己親手打造啦~（不過可能也很少人會想用手機操作後台吧...）
3. 雖然可以忽略 ts 並直接使用 BP 做開發，但筆者在開發過程其實常常開啟定義檔去了解元件的架構與使用方式。所以建議挑選 BP 的開發者還是具有一些基礎的 ts 知識，會更加發揮 BP 的價值

總結

Blueprint 做為比較新的函式庫，看起來比較像是簡化一些的 Ant Design，但提升了自行設計元件的自由度，讓有需要自行針對需求拼裝元件的開發者有很好的發揮空間，且同時具備別於其他 Library、功能強大的 Table；而 Antd 具有優於 Blueprint 的元件數量、強健的功能以及佈局方法，讓前後台 UI 可以一手包辦。

如果上述的參考還無法讓你選擇哪個函式庫，建議可以直接動手玩玩各個元件，感受開發上的差異，畢竟有些地雷只有踩過才會爆炸阿（笑）

這篇條列的項目可能不太詳盡，歡迎有深度使用過（或被炸過千百次）的開發者們分享關於這兩套 Library 的使用經驗，供還沒入坑的人做更完善的評估。預計接下來會介紹兩套 Library 相同的常用元件，讓開發者能更近距離的體會使用 api 以及 coding 上的感受與差異。

文後更新

在臉書前端社團的分享有許多人的討論，所以決定在這邊彙整一些網友的經驗與建議

1. AntD 同時還有依賴外部函式庫的問題，相較於 BP 多上很多，且部分依賴是很少人在維護的
2. AntD 元件功能強大，但相對的佔有空間就很多
3. 曾有意外的聖誕節彩蛋發生，有興趣的人可以自行 google。但既是開源必有風險，使用開源函式庫都得多多注意
4. 如果想讓自己更恐慌、選擇困難更加劇烈的話，歡迎參考這個網站挑選最適合你的函式庫（怕.jpg）