主流移動端元件庫的對比和分析

隨著前端的發展，元件庫也是層出不窮，一個完善的元件庫能極大提高開發效率，讓開發者只需要專注於業務邏輯，而不需要考慮基礎元件複用性、擴充套件性、穩定性的問題。面對眾多的元件庫，該如何進行選擇呢？本篇將從多個角度對現在流行的移動端元件庫進行對比與分析，希望對大家有所幫助。

背景

NutUI3.x 釋出以來，無論是集團內部還是外部開發者，使用者越來越多，京東集團內累計應用的專案數超過 200+。NutUI 也逐步增加了主題定製、國際化等能力。NutUI 在不斷新增元件、擴充套件能力的同時，也注意到了「元件粒度」的完善度，元件庫就好比一座大樓，元件則是其地基，重要性就不言而喻了。所以在 2022 年初我們完成了主流元件庫的差異性對比，向優秀元件庫學習，找出不足，快速補齊每一個元件粒度的能力。

從主流元件庫中精挑細選了 6 款進行對比與分析：

NutUI - 京東研發的移動端 UI 元件庫，支援 Vue3、Taro 多端適配，面向電商業務場景
Vant - 有贊研發的移動端 UI 元件庫，支援 Vue3、微信小程式、支付寶小程式
TDesign Mobile - 騰訊研發的移動端元件庫，適合在 Vue3 技術棧專案中使用
Ant Design Mobile - 螞蟻金服研發的移動端元件庫，支援 React
Mand Mobile - 滴滴研發的面向金融場景的 UI 元件庫，支援 Vue3
Varlet - Vue3 開發的 Material 風格移動端元件庫，由社群的小夥伴開發和維護

初步瞭解

先簡單從技術棧、開源時間、元件數量、Npm 下載量、GitHub Star 數幾個方面對上述元件庫有一個初步掌握：

（注：Npm 下載量統計的截止時間為：2022年6月20日）

從上面的表格不難發現，React 技術棧的移動端元件庫相對較少，Vue 技術棧元件庫相對較多。

NutUI 元件庫雖然在元件數量上是第一位的，但是在 Npm 下載量、GitHub Star 上相較一流元件庫還有一定距離。這也督促我們在後一階段更要強調元件質量、開發體驗和口碑，前一階段主要以完成功能滿足集團業務開發為目的。

元件對比

為了讓 NutUI 更加的健壯，將 NutUI 中的每個元件與其他元件庫的元件相對應，從元件的使用文件、功能點、API 等角度一一分析，找出不足，及時完善?。

使用文件

NutUI
從元件「介紹」、「引入方式」、「程式碼演示」、「 API 」、「常見問題」幾方面對元件進行描述。其中，在元件的程式碼演示中，每一個示例都加入了 Codesandbox、自主研發的 Codehouse 線上程式碼除錯，方便使用者更直觀、快捷的瞭解元件。
Vant
從「介紹」、「引入方式」、「程式碼演示」、「 API 」、「主題定製（CSS 變數配置）」、「常見問題」幾個方面對元件進行描述，與其他元件庫相比，展示內容是最全面的。 Vant 暫時沒有提供元件的線上程式碼除錯功能，使用者只能放到專案中體驗。
Ant Design Mobile
從「介紹」、「示例」、「 API 」、「 FAQ 」四個方面對元件進行描述。其中，在 Ant Design Mobile 的每個示例中包含了多個 Demo 演示，在使用時，使用者需要進行篩序，沒有一個示例一個程式碼演示更直觀。
TDesign Mobile
從「介紹」、「示例」、「 API 」三方面對元件進行描述。其中，每一個示例都加入了 Stackblitz 線上程式碼除錯。與其他元件庫不同的是，在每個元件的使用文件中加入了快速進入此元件 Issue 的入口，對於使用者還是非常友好的。
Mand Mobile
從「介紹」、「示例」、「 API 」三方面對元件進行描述。Mand Mobile 的文件描述很簡單，在 Demo 示例中也很難看到一行字。
Varlet
從「介紹」、「示例」、「 API 」三方面對元件進行描述。其中，每一個示例都加入了 Varlet 自研的 Varlet UI Playground 線上程式碼除錯。與其他元件庫不同的是，Varlet 的每個示例都加入了摺疊功能。

元件文件描述是使用者瞭解元件的重要途徑之一，以上元件庫都有各自的優點、也有各自的不足。

對比下來，NutUI 在對每個示例的說明方面還是不足的，這個問題會在後續的發版中慢慢改善。

除此之外，元件暴露的 API 可能就決定了該元件是否滿足當前的業務場景，接下來看一下每個元件庫暴露 API 的情況。

API

我們們先來看一組資料：每個元件庫中所有元件暴露 API 的數量

從上面的資料可以看出，暴露元件的 API 最多的是 Vant，雖然 NutUI 的元件數量比 Vant 高，但是每個元件的平均 API 數卻沒有 Vant 的高。可見 NutUI 在元件暴露的 API 數量上是有不足的，依次對比每個元件，查詢所欠缺的 API 勢在必行。

當然，也不能盲目的新增 API，相同的元件，但是設計思路不同，有些 API 也就沒有新增的必要，需要三思而後行的。

通用能力

僅僅是關注每個元件是不夠的，還要放大格局，關注元件庫的通用能力，儘可能滿足開發者訴求。

NutUI

近一年，NutUI 不斷擴充元件功能，Vscode 外掛智慧提示外掛、自主研發的線上編輯器 CodeHouse、主題定製以及線上主題定製、國際化均已支援。

NutUI Vscode 智慧提示外掛
為開發者提供的福利，實現智慧引出 API 和自動補全，提升開發者體驗。
線上主題定製
允許使用者在開發階段切換不同主題風格的皮膚，也允許開發者對指定的元件直接進行樣式修改，以滿足不同設計風格的移動端業務場景。

Vant

Vant 對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端元件庫之一。Vant 同樣具備主題定製、線上主題預覽工具、國際化等能力。

線上主題預覽工具
vant-theme 是一個 vant 元件庫線上主題預覽工具，通過提供的樣式變數進行修改，及時反饋修改後的樣式。

Ant Design Mobile

Ant Design Mobile 5.0 版本是一次徹底的重做，它帶來了全新的設計體驗和 100% 重寫的元件程式碼實現，更換了全新的 logo，進入新的篇章。Ant Design Mobile 具備主題定製、國際化的能力。同時，它也具有線上編輯的能力，只是比較隱蔽而已(線上體驗)。

TDesign Mobile

TDesign Mobile Vue 釋出時間不長，所以國際化、主題定製等能力暫不支援，相信在不久的將來，這些能力都會加入。雖然 TDesign Mobile Vue 沒有自主研發的線上編輯器，但已經成功接入到了 Stackblitz 線上編輯器中。

Mand Mobile

Mand Mobile 預設提供了一套基於滴滴的金融業務設計規範的 UI 主題，同時也是支援主題定製功能的，主題定製功能的設計思路與 Vant 是一致的。

Varlet

Varlet 提供了針對 webstorm 和 vscode 的元件高亮能力，同時還為 vscode 單獨提供了一個輔助外掛。Varlet 還自主研發了 Varlet UI Playground 線上除錯工具。使用者可以用過 StyleProvider 元件或改變 CSS 變數來完成主題定製。

不難看出，線上除錯工具、國際化、主題定製、Vscode 外掛等能力，已經成為一個元件庫不可或缺的能力。

特性

下面在來看看每個元件的內部實現邏輯。

Icon 圖示

Icon 作為 UI 構成中重要的元素，一定程度上影響 UI 介面整體呈現出的風格。對於元件庫來說，放入大量的圖片會嚴重影響包體積，如何處理大量的圖示，便成了元件庫設計的一大難題。從上面的圖表可以看出，6 款元件庫實現方式分為 2 種：

IconFont 圖示庫
NutUI、Vant、Varlet 元件庫都是基於 IconFont 圖示庫實現的，最終作為一種字型進行渲染，通過 CSS 可直接控制圖示的大小（使用 font-size）、顏色、陰影、旋轉等，使用簡單方便。
NutUI、Vant 使用是有不同的，在 IconFont 生成自定義的 Icon 檔案後，NutUI 是將下載的檔案放到了與 NutUI 元件開發同一個倉庫中，而 Vant 則是將下載的檔案放到了一個新的倉庫中，生成了 @vant/icons 包。
Vant 的處理方式方便使用者可以單獨使用、Vant 的衍生產品也可以複用，但對於元件開發者而言，現有 Icon 一旦不滿足，新增新的 Icon，就需要重新發版，進行版本管理，從這個角度看， NutUI 的處理方式會更加便捷。
兩者處理方式各有利弊，可根據元件庫的框架與規劃進行選擇，揚長避短。
SVG 渲染
Ant Design Mobile 與 TDesign Mobile 元件庫中的圖示則是單獨的 NPM 包，想要使用需要單獨安裝。最終以 SVG 的形式進行渲染。而 Mand Mobile 則直接使用 svg-sprite-loader 進行 SVG 圖示渲染。
SVG 同樣可以使用 CSS 進行控制，更讚的是還可以控制 SVG 特有的屬性，比如描邊。不僅如此，SVG 是真實的向量圖，可以保證在任何情況下都不失真。但是相容性方面，就不及 Icon Font 的渲染形式，Icon Font 就算是在 IE6 下也正常渲染。

打包/構建工具

6 款元件庫分別使用 Vite、Rollup、Gulp 進行打包，其中，Vite 是使用最多的。 Vite 作為新一代的前端構建工具，在生產中同樣是利用 Rollup 作為打包工具，TDesign Mobile、Mand Mobile 則直接使用 Rollup 進行打包，可見 Rollup 很重要。

CSS 變數

CSS 變數即自定義屬性，它包含的值可以在整個文件中重複使用，由自定義屬性標記設定值（比如： --main-color: black;），由 var() 函式來獲取值（比如： color: var(--main-color);）。通常的最佳實踐是定義在根偽類 :root 下

:root {
  --main-bg-color: white;
}

Vant、Ant Design Mobile、TDesign Mobile、Varlet 就是通過豐富的 CSS 變數來組織樣式，通過覆蓋這些 CSS 變數，可以實現定製主題等效果。

生態建設

其實，元件庫的開發者，同時也是元件庫的產品經理，都希望元件庫可以覆蓋更多的業務場景、支援更多的技術棧、具備更多的能力，所以每個元件庫都在不斷地探索元件庫的可能性，讓其不斷地繁衍出更多的產品。

NutUI

NutUI 團隊經過不斷地努力，現已經有 6 款針對不同場景的衍生產品。

NutUI - 京東風格的移動端 Vue 元件庫
NutUI-React - 京東風格的 React 移動端元件庫
NutUI-JDT - 京東科技風格的移動端元件庫
NutUI-JDL - 京東物流風格的移動端元件庫
NutUI-Bingo - 助力營銷活動和小遊戲場景
NutUI-Cat - 一款移動端大促場景的業務元件庫

同時，為了給開發者提供更高效便捷的開發方式，NutUI 和 Taro 二者結合，不僅可以讓開發者一處程式碼，多端執行，暢快自如地開發小程式。更可以在開發過程中，使用到更美觀、更便捷、元件更豐富的元件庫。我將 NutUI 和 Taro 更完美地接合到一起，Taro 官方將 NutUI 作為 Vue 技術棧的推薦元件庫。現在開發者將可以使用 NutUI 無縫開發 H5 和多端小程式。NutUI 提供了 70+ 元件涵蓋了日常業務開發使用的大部分元件。