前言
時光飛逝，流年似水，讓我們倒帶 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 年農曆春節前釋出，敬請賜候~