antd mobile v5 它悄悄的來(lái)了
在 React 領(lǐng)域里,一直缺少一套靠譜、好用的移動(dòng)端組件,螞蟻的 antd mobile v2 年久失修,幾乎無(wú)人維護(hù),跟 antd 相差甚遠(yuǎn),在設(shè)計(jì)上,也有很多也已經(jīng)跟不再符合 Alipay Design[1]。
激動(dòng)人心的是,就在前兩天,在 ant-design-mobile[2] 的 discussions 里面已經(jīng)發(fā)布了 5.0(白楊)的 Roadmap[3]。
在 8 月 26 號(hào)晚上也已經(jīng)宣布 v5 已經(jīng)進(jìn)入 beta。
5.0(白楊) Roadmap
5.0(白楊) 是我們最新在開(kāi)發(fā)的下一代 antd-mobile 組件庫(kù),經(jīng)過(guò)近 5 個(gè)月的開(kāi)發(fā),已經(jīng)覆蓋了 48 個(gè)組件,并已在許多項(xiàng)目中落地使用。
我們最近發(fā)布了 alpha 版本的 npm 包[4],也部署了新的文檔站點(diǎn)[5]。坦白地講,antd mobile 5.0 還并不夠成熟,但我們希望能夠盡早地推送給社區(qū)上的各位同學(xué),也希望整個(gè)研發(fā)進(jìn)程和規(guī)劃盡可能地符合開(kāi)源精神:透明、開(kāi)放、合作。
所以,為了幫助大家更好地了解 5.0 版本,這里簡(jiǎn)單分享一下我們的思路和方向。
5.0 會(huì)帶來(lái)什么
視覺(jué)規(guī)范
和 v3 v4 版本一致,v5 也將沿用最新版本的支付寶基礎(chǔ)設(shè)計(jì)規(guī)范 Alipay Design[6]。
手勢(shì)和動(dòng)畫(huà)
v5 使用了 use-gesture[7] 作為手勢(shì)庫(kù)、react-spring[8] 作為動(dòng)畫(huà)庫(kù),具有更流暢細(xì)膩的手勢(shì)交互和動(dòng)畫(huà)效果。
重新設(shè)計(jì)的 API
v5 所有的組件都是完全重寫(xiě)的,API 也是重新設(shè)計(jì)的,更現(xiàn)代化也更優(yōu)雅。
擁抱 css 變量
css 變量提供了更加動(dòng)態(tài)化的樣式調(diào)整能力,也讓組件的樣式調(diào)整變得更加簡(jiǎn)潔優(yōu)雅。在業(yè)務(wù)中對(duì)組件樣式魔改是一件非常痛苦也非常難以維護(hù)的事情,我們希望通過(guò) css 變量改變這一現(xiàn)狀。
了解更多
如果你想了解如何使用,可以去這里[9]
如果你想點(diǎn)點(diǎn)試試各種組件,可以去這里[10]
此外,在這里[11]我們匯總了一些常見(jiàn)問(wèn)題,希望能幫到你
發(fā)布計(jì)劃
“這些里程碑只是我們大致的計(jì)劃,隨著項(xiàng)目的不斷推進(jìn),可能會(huì)有所調(diào)整
”
Alpha
我們?cè)?7 月 12 日發(fā)布了第一個(gè) alpha 版本,經(jīng)過(guò)了一個(gè)多月的不斷迭代,API 漸漸趨于穩(wěn)定。
Beta
我們預(yù)計(jì)將在近期開(kāi)始推送 beta 版本,相較于 alpha 版本,beta 版本 API 更加穩(wěn)定也更加完善。
在這個(gè)階段我們還會(huì)增加更多的新組件:
Swiper ImageUpload Sidebar Calendar Stepper SegmentedControl Skeleton NumberKeyboard SwipeAction Navbar
補(bǔ)充組件庫(kù)的整體能力:
支持國(guó)際化 暴露出更多的 css 變量 逐步完善自動(dòng)化測(cè)試 增加英文文檔 支持無(wú)障礙
RC
我們預(yù)計(jì)將在 10 月開(kāi)始推送 rc 版本,在這期間我們將幾乎不會(huì)再引入新的 break change。
Release
我們預(yù)計(jì)在 11 月正式發(fā)布 5.0 版本。
最后
最后讓我們期待 11 月,antd mobile v5 的正式發(fā)吧,另外如果你對(duì) antd mobile v5 如果很有興趣,歡迎去試用,然后參與 v5 的開(kāi)發(fā),歡迎提 PR。
“悄悄的說(shuō)一下我也是 v5 的貢獻(xiàn)者,也是內(nèi)部人員,后面會(huì)給大家?guī)?lái)更多的 antd mobile 的消息,歡迎關(guān)注、點(diǎn)贊。
”
參考資料
Alipay Design: https://design.alipay.com/
[2]ant-design-mobile: https://github.com/ant-design/ant-design-mobile
[3]5.0(白楊)的 Roadmap: https://github.com/ant-design/ant-design-mobile/discussions/3924
[4]npm 包: https://www.npmjs.com/package/antd-mobile
[5]文檔站點(diǎn): https://next.mobile.ant.design/
[6]Alipay Design: https://design.alipay.com/
[7]use-gesture: https://github.com/pmndrs/use-gesture
[8]react-spring: https://github.com/pmndrs/react-spring
[9]去這里: https://next.mobile.ant.design/guide/quick-start
[10]去這里: https://next.mobile.ant.design/components/button
[11]在這里: https://next.mobile.ant.design/guide/faq

