作者：京東零售 於明明
前言
時光飛逝，流年似水，讓我們倒帶 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 年農曆春節前發佈，敬請賜候~