Ant Design Mobile 5.0 來了
2020 年 9 月 18 日，antd-mobile 發布了 2.3.4 版本，也是 v2 的最后一個版本，時隔近一年半，我們終於發布了全新的 5.0（白楊）版本。
從 5.0 版本開始，我們計划為每一個大版本增加一個代號標記，而“白楊”則是 5.x 的版本代號。
5.0 版本的開發從 2021 年初啟動，在 2021 年 7 月 21 日，我們發布了第一個 alpha 版本，同時將代碼推送到了 GitHub 上，此后的半年內，我們收到了非常多的 issue 反饋和代碼貢獻，也陸續發布了 21 個 alpha 版本、32 個 beta 版本、28 個 rc 版本。
5.0 版本是一次徹底的重做，它帶來了全新的設計體驗和 100% 重寫的組件代碼實現。如果你已經迫不及待的想嘗試和體驗一下，那么可以直接訪問我們的官網或GitHub。在下文中，我們將帶來更加詳細的介紹。
全新的設計體驗
Ant Design Mobile 是由支付寶設計團隊基於螞蟻集團的眾多業務實踐，億萬用戶的驗證反饋，抽象構建出的移動端資產庫。希望可以幫助設計師們腦海中的 idea 輕松轉變為自然好用的設計，給用戶更真實自然的體驗。
新 logo 新寓意新篇章
相信大家已經很熟悉 Ant Design 的品牌，Ant 家族已經有了 Ant Design、AntV 等眾多優秀的產品，今天新成員Ant Design Mobile 也將和大家見面。新成員 Ant Design Mobile 的 logo 概念來源於移動端英文“Mobile”中首字母“M”的變形，同時，我們沿用了 Ant Design 系列 logo 的基礎幾何圖形，希望達到更高的品牌認知度。
追求極致完美的組件設計
組件的設計源於螞蟻眾多移動端業務的實踐，包含但不限於支付寶基礎、網商銀行、區塊鏈等各類業務。從中我們抽象提煉了 77 個基礎通用的組件，這些組件包含導航、引導提示、信息展示、信息輸入、反饋五大類型，擁有豐富的功能、強大的拓展性，完全可以覆蓋絕大多數的移動端場景。在組件的視覺設計上，我們沿用了 Alipay Design 最新的視覺風格，延續“暖科技”的視覺基調。
全部代碼，100% 重寫
不得不承認的是，2.x 舊版本的項目已經非常難以維護了，而且隨着近幾年前端技術的快速發展，2.x 的技術棧已經顯得過於老舊了，API 設計也顯得不夠合理。所以此次 5.0 版本是完全重新實現的，也因此得以采用業界最前沿的技術方案，拋棄掉歷史債，去“探索移動端 Web 的體驗極限”：
每一行組件的代碼，都是 TypeScript
沒什么出乎意料的，畢竟都已經 2022 年了。
v5 中所有組件的 API 都是經過重新設計的，並且有着非常完善的 TypeScript 定義。至於好不好用，試一試就知道了。
手勢，細節和更細的細節
我們使用了 use-gesture，它提供了非常多優秀的細節處理，例如鎖定 x 軸或 y 軸、手勢邊界的橡皮筋效果。 當然，我們還在它的基礎上，對很多組件做了更多額外的細節處理，包括可拖拽元素的點擊處理、手勢結束時的慣性補償、滾動鎖定等等。
動畫，不僅流暢，更要自然
我們使用了 react-spring 作為動畫庫（當然也保留了一些傳統的 CSS 動畫），它讓我們的組件擁有了媲美原生系統的流暢動畫，更重要的是，我們相信基於彈簧和物理計算的動畫，是真正自然的。
CSS 變量，讓樣式定制有了更多可能
從 5.0 版本開始，我們將全面擁抱 CSS 變量，你可以通過 antd-mobile 中每個組件暴露出來的 CSS 變量來自定義樣式，或者是實現一套完整的主題包。相較於存在已久的“樣式魔改”，CSS 變量提供了一種更加可靠且便捷的樣式定制途徑。
在目前階段，對於 CSS 變量的支持還處於比較初期的階段，未來我們會在后續的小版本發布中不斷完善。
此外，CSS 變量的動態性和上下文特性將為我們解鎖更多的可能，暗黑模式、運行時的主題色調整、營銷場景下的局部主題調整，這些現在看起來復雜的特性，在未來都會變得輕而易舉。
性能
v5 版本適配了目前主流打包工具的 tree shaking 特性，你無需做任何配置，即可自動按需引入（甚至 css 文件都無需手動引入），從而擁有最優的包體積大小。此外，得益於最新的 React 特性，我們可以為組件更方便地實現更多性能上的優化。在未來，我們還會繼續努力優化包體積和運行時性能。
更豐富的組件，更強大的功能
v5 版本目前已有 77 個組件，涵蓋了絕大多數的基礎組件，不論是組件的數量，還是功能的豐富性，都相較於 v2 有着大幅的提升。
我應該現在升級 5.0 版本嗎？
5.0 版本已經在螞蟻、阿里、菜鳥的諸多線上項目中落地使用，經過了非常復雜全面的使用場景的考驗。我們相信對於新項目，現在直接使用 5.0 版本，並持續地跟進我們后續的升級，是毋庸置疑的最優選擇。 而對於之前還在使用 antd-mobile v2 的項目，我們也提供了完備的遷移指南，你甚至可以根據實際情況，在項目中同時引入 v2 和 v5 的組件，從而漸進式地完成升級。
5.0 只是開始，更多的，還在路上
除了你能想到的視覺效果優化和組件能力的不斷完善，我們還計划在 5.x 的后續版本中做這些事情：
當然，下面只是我們大致的計划，隨着項目的不斷推進，可能會有所調整
完善風格化能力
CSS 變量的設計思路在部分組件中已經經過驗證了，但是目前整體的支持還是不夠完備的，而且還缺少了一些比較重要的全局主題變量，預計在 2022 年上半年，我們會不斷完善 CSS 變量，讓 antd-mobile 擁有完備的風格化能力。 而在下半年，我們將在此基礎上做更多的嘗試，包括更多的主題包、暗黑模式、大字版，甚至可能會提供一套在線的主題配置工具。
自動化測試
僅靠手工驗證是很難保證組件質量的，所以預計 2022 年我們會在這方面投入很多的精力，把自動化測試做到非常完備，預計年中將達到代碼行覆蓋率 80%，年底達到 95%。這是一項浩大的工程，但我們相信組件庫的可靠性是不容妥協的，也歡迎社區同學加入我們一起來完善自動化測試。
補充一些組件
現在 5.0 版本的組件其實已經很豐富了，不過我們沒准還會再增加幾個，不會太多，但相信它們都會很好用。
發布 Design Kits
我們預計在 4 月發布 Sketch 的 Design Kits。
無障礙
我們預計會在 2022 下半年對常用組件的無障礙能力做一些完善。
底層技術探索
我們一直都熱衷於探索前沿技術，也非常願意在保證質量的前提下，在 antd-mobile 中使用更新、更強的技術方案。在 2022 年，我們或許會在 CSS in JS、動畫、手勢、路由和導航等方向上做一些底層技術的探索。
如果你想嘗試 antd-mobile 5.0，瀏覽完整的組件列表和指引文檔，那么可以訪問我們的文檔站點。
如果你想翻閱源代碼或者提交 issue，那么可以前往我們的 GitHub 倉庫。
如果你想參與我們的社區討論，那么歡迎加入 antd-mobile 的釘釘群和 Discord 群組。
此外，我們還同時發布了 antd-mini，它是一套支付寶小程序組件庫，和 antd-mobile 采用同樣的設計規范。
本文來自
https://zhuanlan.zhihu.com/p/470189883