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