antd mobile v5 它悄悄的来了

在 React 领域里,一直缺少一套靠谱、好用的移动端组件,蚂蚁的 antd mobile v2 年久失修,几乎无人维护,跟 antd 相差甚远,在设计上,也有很多也已经跟不再符合 Alipay Design[1]

激动人心的是,就在前两天,在 ant-design-mobile[2] 的 discussions 里面已经发布了 5.0(白杨)的 Roadmap[3]

在 8 月 26 号晚上也已经宣布 v5 已经进入 beta。

image-20210827081425771

5.0(白杨) Roadmap

5.0(白杨) 是我们最新在开发的下一代 antd-mobile 组件库,经过近 5 个月的开发,已经覆盖了 48 个组件,并已在许多项目中落地使用。

我们最近发布了 alpha 版本的 npm 包[4],也部署了新的文档站点[5]。坦白地讲,antd mobile 5.0 还并不够成熟,但我们希望能够尽早地推送给社区上的各位同学,也希望整个研发进程和规划尽可能地符合开源精神:透明、开放、合作。

所以,为了帮助大家更好地了解 5.0 版本,这里简单分享一下我们的思路和方向。

5.0 会带来什么

视觉规范

和 v3 v4 版本一致,v5 也将沿用最新版本的支付宝基础设计规范 Alipay Design[6]

手势和动画

v5 使用了 use-gesture[7] 作为手势库、react-spring[8] 作为动画库,具有更流畅细腻的手势交互和动画效果。

重新设计的 API

v5 所有的组件都是完全重写的,API 也是重新设计的,更现代化也更优雅。

拥抱 css 变量

css 变量提供了更加动态化的样式调整能力,也让组件的样式调整变得更加简洁优雅。在业务中对组件样式魔改是一件非常痛苦也非常难以维护的事情,我们希望通过 css 变量改变这一现状。

了解更多

如果你想了解如何使用,可以去这里[9]

如果你想点点试试各种组件,可以去这里[10]

此外,在这里[11]我们汇总了一些常见问题,希望能帮到你

发布计划

这些里程碑只是我们大致的计划,随着项目的不断推进,可能会有所调整

Alpha

我们在 7 月 12 日发布了第一个 alpha 版本,经过了一个多月的不断迭代,API 渐渐趋于稳定。

Beta

我们预计将在近期开始推送 beta 版本,相较于 alpha 版本,beta 版本 API 更加稳定也更加完善。

在这个阶段我们还会增加更多的新组件:

  • Swiper
  • ImageUpload
  • Sidebar
  • Calendar
  • Stepper
  • SegmentedControl
  • Skeleton
  • NumberKeyboard
  • SwipeAction
  • Navbar

补充组件库的整体能力:

  • 支持国际化
  • 暴露出更多的 css 变量
  • 逐步完善自动化测试
  • 增加英文文档
  • 支持无障碍

RC

我们预计将在 10 月开始推送 rc 版本,在这期间我们将几乎不会再引入新的 break change。

Release

我们预计在 11 月正式发布 5.0 版本。

最后

最后让我们期待 11 月,antd mobile v5 的正式发吧,另外如果你对 antd mobile v5 如果很有兴趣,欢迎去试用,然后参与 v5 的开发,欢迎提 PR。

悄悄的说一下我也是 v5 的贡献者,也是内部人员,后面会给大家带来更多的 antd mobile 的消息,欢迎关注、点赞。

参考资料

[1]

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]

文档站点: 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

欢迎 长按图片加 ssh 为好友 我会第一时间和你分享前端行业趋势,学习途径等等。2021 陪你一起度过!

本文分享自微信公众号 - 前端从进阶到入院(code_with_love)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部