2022 倒帶 - NutUI

作者：京東零售 于明明

前言

時光飛逝，流年似水，讓我們倒帶 2022，回首這跌宕起伏一年走過的 “升級之路”， NutUI 表現如何？ 成績單等著您打分！

2022 是 NutUI 在技術長廊中探索和成長的第四個年頭，悄然度過了自己的“孩提“時光，NutUI 也從單一 Vue 技術堆疊的組件庫逐漸成長為適配多端的多技術堆疊的組件庫，升級設計規范「京東APP視覺」「京東科技視覺」，適配 Taro 框架支持小程式開發，拓展 React 技術堆疊，打造 NutUI 業務組件生態等，

2022 是不平凡的一年，新冠末年前端技術也急劇變革，低代碼的風起（Retool），D2C 和 AI（codefun & ChatGPT） 的涌動，對各行各業的開發者帶來了很大的沖擊，然而 NutUI 初心未變，做好 UI 組件，服務于原始的代碼開發者，同時亦為低代碼平臺提供支撐，就在這一畝三分地里精耕細作，

2022，我們相繼完成了 React 技術堆疊的發布、多端小程式的適配、對組件功能進行比較并補齊、增加單測、豐富主題定制、完備國際化功能、推出 IDE 插件，在線代碼除錯等功能，目的只有一個：「打造一款好用的移動端組件庫，為開發提效，為業務賦能，為開源貢獻一份力量」

React 技術堆疊擴充

這一年，我們完成了 React 技術堆疊的擴充，

NutUI 自發布以來都是以 Vue 技術堆疊為底座進行迭代和升級，隨著集團內部及社區對 React 版本的呼聲越來越高，2021 年 6 月我們啟動了 NutUI-React 規劃并隨即進入開發，

2022 年 1 月，發布 NutUI-React 1.0版本，基于 React 17 和 更快的構建工具 Vite，全面使用 TypeScript， 組件規模 60+，下半年我們持續加碼，修復問題 160+，升級到 React18，組件規模最終達到 70+，對齊了 Vue，NutUI-React 的設計與 Vue 版保持一致，諸如專案架構，小到組件的 props、events 都保持產品的統一性，

NutUI-React 基本保持每周一個版本的迭代頻率，快速解決開發者的訴求和問題，累計發布 26 大小版本，截止目前在集團內部 15+ 專案中得到應用，其中不乏一些戰略級專案如京東萬商，

多端小程式適配

這一年，我們完成了 Vue 和 React 兩大技術堆疊對小程式應用的支持，

一直以來 NutUI 都只是移動端的 H5 組件，我們通過集團內兄弟產品 Taro 對 NutUI 每一個組件進行深度適配，從 4 月份 NutUI-Vue 到 12月份 NutUI-React 均完成了所有組件的適配，NutUI 完成從單一的 H5 組件進化到小程式組件，為廣大小程式開發者帶來便利和提效，

• 2021年6月，NutUI-Vue 完成多端小程式的適配并發布「NutUI 3.1 正式發布：開啟多端開發之路」，
• 2022年11月，NutUI-Vue 發布京東小程式「NutUI 京東小程式發布了」，
• 2022年12月，NutUI-React 完成多端小程式的適配并發布「京東 React 組件庫支持小程式開發了」，

組件級樣式修改

這一年，我們完成了比傳統主題定制更細粒度的組件級別定制，

區別于傳統組件庫的主題定制，我們用「組件級樣式修改」字樣來表達，為實作「組件級樣式修改」，我們做了大量重構作業，抽取多達 500+ 樣式變數，只為實作組件樣式完全定制化，最終實作不同業務場景不同的 UI（千場景千變UI），

NutUI 還提供 在線主題定制功能，可根據需求場景配置主題色，實時預覽 UI 效果，主題定制配置層分為全域基本變數、組件基本變數，如組件庫全域主題顏色、字體等樣式；組件層的配置更細節，可設定如圓角、邊框尺寸等，想快速了解，請點擊：一分鐘上手主題定制

主題皮膚建設

這一年，在支持業務開發的同時我們聯合兄弟部門開發了 2 套主題：零售B商城主題、零售企業業務主題，截止目前累計有 4 套官方主題供開發者選用，

B 商城主題

京東零售 B 商城旨在打造全中國最大的綜合性的 B2B 交易平臺，構建健康的 B 業務生態，目標是成為中國最大的商家交易服務平臺，B 商城整體還是京東紅風格，但在細節方面有很大不同，重新輸出了設計 UI 稿，
我們在第二季度按 B 商城 UI 實作了B 商城版主題，為開發者提供更多樣式選擇，

企業業務主題

第三季度，京東企業業務逐漸梳理并輸出了視覺規范，我們遵循企業業務視覺規范開發出了企業業務主題，服務于京東慧采、京東錦禮、京東企業購等產品，本套主題根據業務產品和設計師的需求共同修改制定，共涉及 17 個組件，優化或新增 scss 變數近 100 處，實作對企業業務的定制化開發，

京東科技主題

最后，還有去年上線的京東科技主題（藍色）NutUI-JDT，您可以根據專案訴求選擇這三套不同的 UI 風格開發專案，

組件國際化能力

這一年，我們完成了組件國際化能力建設，翻譯完成 4 套語言包，

2022年第一季度接到內部京東國際研發團隊的訴求（滿足泰國站、印尼站移動端需求），在 2022 年 5 月我們完成了組件國際化能力建設，國際化支持多語言設定，支持繁體中文、英語、印尼語、泰語五種語言包，默認使用中文，直接引入 locale 和語言包就可以，如有其他語種可參考目前的語言包來快速配置，

視瞥澩：NutUI 3.0組件庫通用能力提升

組件功能差異性分析和補齊

這一年，我們分析業界主流和知名移動端組件庫，對比了每一個組件功能，補齊 NutUI 缺失功能，

”三人行，必有我師焉“，2022Q1開始我們從組件的使用檔案、功能點、API維度 對比了業界主流組件庫 Vant、Antd mobile、TDesign，并在接下來的 9 個月時間內新增或改造組件 100+ props、優化組件檔案 70+ 處、新增 Demo 20+，使得 NutUI 功能更加完善和檔案更好用，

這里也有一篇視頻分享：NutUI 組件能力分析和夯實

新增暗黑模式

這一年，我們全面提升用戶體驗保護視力，新增 暗黑模式（深色模式），

移動端用戶主要使用的是安卓和蘋果系統，手機系統的顯示亮度可選擇深色或淺色、即根據周邊環境或時間來調整 UI 的深淺色，讓用戶的眼睛更舒服，也保護了視力，為提升用戶體驗感，NutUI 增加暗黑模式，根據手機的亮度模式自動適配，使用 ConfigProvider 配置一鍵自由切換，

組件質量提升

這一年，進一步夯實組件質量，除正常每月的代碼 Review 外，我們為所有組件新增單元測驗，

NutUI 現擁有 70+ 組件，組件庫的豐富度完全可以覆寫絕大多數業務場景，正所謂”慢工出細活“，增加單元測驗功能，打磨組件的質量，單元測驗的撰寫覆寫多數應用場景，使其測驗覆寫率盡可能達到 80% 以上，每個單元測驗都可自動執行，每個用例都獨立且相互隔離，斷言和快照等關鍵功能校驗通過，單元測驗有效排除 TS 型別、DOM 等錯誤或不規范問題，進一步檢測和排查到組件邏輯問題、影片效果例外等，

開發體驗

這一年，為了提升開發者體驗我們在官網新增了在線除錯功能，在主流 IDE 開發了 NutUI 插件，

預覽除錯

并不是所有的同學對 NutUI 都了如指掌，如何讓大家快速感知到組件的功能和屬性？一般是閱讀組件相關檔案，組件的檔案就要完整和清晰，示例全面，經過社區的反饋和團隊開發打磨，NutUI 的組件檔案和示例也在循序漸進，

為提升開發和閱讀體驗，所有組件 demo 中增加在線預覽除錯功能 codesandbox、codeHouse，可直觀的感受組件的各種屬性和方法，

預覽，主要面向產品、測驗、運營同學，通過修改組件的 props 看到實時效果；除錯，主要面向研發同學，復現問題、測驗互動及功能，

IDE 插件

”工欲善其事，必先利其器“，vscode 和 webStorm 依然成為開發神器，以 IDE 為基礎，年中我們發布了一款開發輔助插件，它提供組件高亮能力，代碼自動補全，快速查看檔案，props、event 說明，

vscode 可到插件市場搜索 nutui-vscode-extension 安裝，結合 Vetur 工具使用更佳；webStorm 內只要專案內有 NutUI 就可直接體驗；插件簡化了切換瀏覽器、編輯器等的操作，讓開發得心應手，

開源識訓

這一年，在開源之路上我們堅定前行，與眾多社區開發者共享創作成果，識訓滿滿，心存感恩，

至 2022 年末，NutUI 開源類產品累計 star 6500+，NPM 下載量全年激增 6.8w，社區使用人數超過 3600+ 人，團隊成員也積極參加社區技術論壇，分享建設經驗，

NutUI 團隊成員受邀參加早早聊分享會、k+全球軟體研發行業創新峰會、K+Talk 等技識訓議，分享 NutUI 的成長歷程與技術升級，2022 年成功入選“科創中國”開源創新榜，同時作為開源專案參加 2022 開放原子開源大會，

感恩努力的您

NutUI 的成長離不開廣大社區開發者的 反饋和共建，目前 contributor 達到 150+ ，微信服務群有 4 個，內部咚咚群 3 個，2022 年開發者 commit 代碼 3496 條記錄，在社區開發者的共同努力下累計關閉了 3053 個 issue，

感謝您的每一次 PR!

2023 展望

2022 風勁潮涌，對于每個個體都是不平凡的一年，展望新的一年，NutUI 將繼續奮楫揚帆，將務實進行到底，圍繞研發提效和業務賦能不斷夯實質量，體驗創新，

我們即將迎來 NutUI 4.0 的到來，為了帶來更好的產品體驗，新版本升級了架構并有一些破壞性改動，我們抽離出單獨的 icon 圖示庫方便開發者使用自己的 icon 庫替換、使用 pnpm 包管理、升級到 vite3 構建速度快 2-3 倍、組件統一 BEM 規范、使用最新的 CSS 動態主題特性、對組件瘦身體積減少 100kb、采用函式式組件等、新增 Tour 引導組件，Pullrefresh 組件，官網拆分 H5，小程式應用的使用檔案，提供新的代碼風格指南等，

所有一切只為打造一款好用的移動端組件庫，2023 年農歷春節前發布，敬請賜候~

標籤：其他

上一篇：巧用視覺障眼法，還原 3D 文字特效

下一篇：SweetAlert讓訊息彈出視窗更加具有個性化！