Announcing antd-mobile 5.0 #4803
awmleer
announced in
Announcements
Replies: 8 comments
-
|
还能说什么呢？卡子哥牛逼就完了！ |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
这几天在看5.x的源码，比原来2.x那时舒服多了。减少了很多rc组件的使用，复杂度减少了不少。用了很多react的hook，也用了自家的ahook，简洁明了。不像以前，绕来绕去 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
2020 年 9 月 18 日，antd-mobile 发布了 2.3.4 版本，也是 v2 的最后一个版本，时隔近一年半，我们终于发布了全新的 5.0（白杨）版本。
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 轴、手势边界的橡皮筋效果。
当然，我们还在它的基础上，对很多组件做了更多额外的细节处理，包括可拖拽元素的点击处理、手势结束时的惯性补偿、滚动锁定等等。
floating-panel.MP4
动画，不仅流畅，更要自然
我们使用了 react-spring 作为动画库（当然也保留了一些传统的 CSS 动画），它让我们的组件拥有了媲美原生系统的流畅动画，更重要的是，我们相信基于弹簧和物理计算的动画，是真正自然的。
picker.MP4
CSS 变量，让样式定制有了更多可能
从 5.0 版本开始，我们将全面拥抱 CSS 变量，你可以通过 antd-mobile 中每个组件暴露出来的 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、动画、手势、路由和导航等方向上做一些底层技术的探索。
On September 18, 2020, antd-mobile released the last version of v2, v2.3.4. After nearly a year and a half, we finally released the new 5.0 version (Poplar).
The development of version 5.0 has been started in early 2021. On July 21, 2021, we released the first alpha version and also pushed the source code to GitHub. In the following six months, we received a lot of issues and pull requests. Also, we released 21 alpha versions, 32 beta versions, and 28 rc versions.
Version 5.0 is a complete rework that brings a brand new design with 100% rewritten code. If you can't wait to try it, you can just head to the documentation site. In the following, we will bring a more detailed introduction.
🏔 Brand new design
Ant Design Mobile is a component library constructed by the Alipay design team based on the many business practices of Ant Group and the feedback of hundreds of millions of users. It can help designers easily transform the ideas in their minds into natural and easy-to-use designs, giving users a natural experience.
The redesigned logo
The "Ant" family already has many excellent products such as Ant Design and AntV. And today here comes Ant Design Mobile. The shape of the new logo comes from the deformation of the initial letter "M" in "Mobile". And we continue to use the basic geometric figures of the Ant Design series of logos, hoping to achieve higher brand recognition.
Pursue the ultimate perfect component design
The 77 components come from the practice of Ant's many business lines: Alipay, MY Bank, Ant Chain, etc. They cover the scenarios of navigation, guidance, data display, data input, and feedback, with rich functions and powerful scalability. In the visual design of components, we follow the latest visual standard of Alipay Design.
🌊 All code, 100% rewritten
It has to admit that the legacy 2.x version is hard to maintain. With the rapid development of front-end technology in recent years, the technology stack of 2.x has become too old, and the API design is not reasonable enough. So we completely re-implemented the 5.0 version, and therefore it is possible to adopt the industry's most cutting-edge technical solutions, abandon historical debts, and "explore the experience limit of mobile web":
Fully "TypeScript"ed
No surprises, it's already 2022.
The API of all components in v5 has been redesigned and has a very good TypeScript definition. Not sure about that? Why not have a try.
Gestures: Details, and smaller details
We use use-gesture, which handles a lot of details, like locking the x(y)-axis, rubber banding.
Of course, based on it, we have done more additional details on many components, including click processing of draggable elements, inertia compensation at the end of gestures, scroll lock, and more.
floating-panel.MP4
Animation: Smooth, and natural
We use react-spring as the animation library, which allows our components to have smooth animations comparable to native UI. More importantly, we believe animation based on spring physics is natural.
picker.MP4
CSS variables: More possibilities for style customization
Starting from version 5.0, we will fully embrace CSS variables. You can customize styles through CSS variables exposed by each component in antd-mobile, or implement a complete theme. They provide a more reliable and convenient way to customize styles.
In addition, the dynamic and contextual features of CSS variables will unlock more possibilities for us, such as dark mode, runtime theme color adjustment, and local theme adjustment in marketing scenarios. These features will become easy to implement in the future.
Performance
The v5 version has been adapted to the tree shaking feature of the current mainstream packaging tools. Without any configuration, the components can automatically get imported on-demand (and even CSS files). In addition, thanks to the new features of React, we can implement more performance optimizations for our components with less effort. In the future, we will continue to work on optimizing package size and runtime performance.
More components, richer features
The v5 version currently has 77 components, covering most of the basic components. Compared with v2, the number of components and the richness of functions are greatly improved.
🚉 Should I upgrade to version 5.0 now?
v5 has been widely used in productions of Ant, Ali, and CaiNiao, and has been tested with complex usage scenarios. For new projects, it is undoubtedly the best choice to use 5.0 directly and continue to upgrade with the following releases.
For projects that are still using antd-mobile v2, we provided a complete migration guide. You can even import v2 and v5 components into the same project to complete the upgrade gradually.
📡 5.0 is just the beginning, more are on the way
In addition to the visual effects optimizations and continuous improvement of component capabilities you can think of, we plan to do these things in subsequent versions of 5.x:
Enhance style customizing ability
CSS variables have been applied in some of the components. However, the overall support is not good currently, and some important global theme variables are still missing. So in the first half of 2022, we will continue to improve CSS variables.
In the second half of the year, we will make more attempts towards this, including more theme packs, dark mode, large print, and maybe even providing a set of online theme configuration tools.
Tests
It is difficult to ensure the quality of components only by manual verification, so it is expected that in 2022, we will invest a lot of energy in this area and make automated testing extremely complete. It is expected that the line coverage will reach 80% by the middle of the year and 95% by the end of the year. This is a huge project, but we believe that the reliability of the component library cannot be compromised, and we welcome community developers to join us.
Add more components
Currently, v5 contains quite a lot of components, but we may add a few more. There won't be too many, but we'll make sure they are all useful.
Publish design kits
We expect to release design kits for Sketch in April.
Accessibility
We expect to make some improvements to the accessibility of some commonly-used components in the second half of 2022.
Exploration of the underlying technology
We have always been excited to explore new technologies, and are very willing to use them in antd-mobile on the premise of ensuring quality. In 2022, we may explore some underlying technologies in the direction of CSS in JS, animation, gestures, routing, and navigation.
Beta Was this translation helpful? Give feedback.
All reactions