Ant-design-mobile: Ant Design Mobile 2.0 beta

[paranoidjk]

• English Version.
• 中文版请往下滑。

---

It’s been over half a year since [email protected] release, through 26 version upgrade and hundreds of issue tracker. We are happy to announce that the first [email protected] beta is now available for public testing. V2 is lightweight, more easy to use, 100% Preact compatible. 🎉

What’s better ?

1. out of the box 😊

antd-mobile@1 rely on several webpack configuration and mandates users to use viewport scale and rem staff, which caused a lot of complaints. The good news is that v2 no more have this requirement, see below example:

// install deps
npm install antd-mobile@next

// import component and style 
import { Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

// here you go
ReactDOM.render(<Button loading>Start</Button>, mountNode);

What did we do ？

• We write a hairline mixin to draw 1px border，which is inspired of framework7, but we optimize it to both compatible with viewport scale and not scale usage.
• We write a simple inline script to do svg sprite，so no need of svg-sprite-loader.
• We modified react/react-native filename extension，no need of webpack.resolve.
• Add a theme variable @hd to make switch from viewport scale and not scale easier.

Does v2 still allow users write stylesheet like the way they does in v1 ? Or does v2 support a smooth upgrade?

The answer is Yes. antd-mobile v2 philosophy is progressive enhancement. More detail see upgrade notes

2. lightweight⚡️

| version | antd-mobile.min.js size | components size / percent | node_modules size / percent |
| :--- | :--- | :--- | :--- |
| 1.6.5 | 568.4k | 142k / 24.9% | 426k / 74.9% |
| 2.0.0-alpha.13 | 467.4k | 136k / 29.0% | 331k / 70.8% |

v2 have 47+ components，the umd bundle size reduced by 101Kb, which means 17.8% decrease！ 🎉

More detail can be found at antd-mobile bundle-size analysis

Wow, do you guys removed lots of feature?

No. We just refactored most of our fundamenta module. Such as removed moment.js，replaced hamemr.js with rc-gesture etc.

3. 100% compatible with Preact 🌈

Since antd-mobile is an uikit for mobile, we care about bundle size and performance a lot. From this point of view, Preact seems a good choice.

After sufficient test and necessary refactor, we now already shipped our official demo site to preact totally！

What’s New ?

• Add Calendar ，DatePickerView .
• Rewrite TabBar, Tabs with more flexible Api，such as support sticky header etc.
• Refactor Grid，support both square mode and auto height mode。
• Make Popup as a sub mode of Modal, resolve the issue that Popup content can not rerender by props change once after mounted.
• No longer auto switch style according to useragent，but use ios design as default. Support platform api to switch to android.
• Finish all english doc，see en-US。

More detail info please see chaneglog

What’s Next?

• Continue to test with preact and reduce bundle size.
• Start to optimize animation performance and user experience.
• Improve the upgrade document, sample or codemod staff.

---

Relative Information

• beta site：http://beta.mobile.ant.design
• upgarde note: http://beta.mobile.ant.design/docs/react/upgrade-notes
• changelog： http://beta.mobile.ant.design/changelog
• issue: http://new-issue.ant.design/?repo=antd-mobile
• github: https://github.com/ant-design/ant-design-mobile

Thanks for all contributor and bug reporter.

EOF.

---

[email protected] 发布已半年多, 历经 26 个版本迭代，解决并关闭了几百个 issue, 在阿里巴巴十八周岁生日这天，我们也很高兴的宣布：

更轻量，更易用，性能更好 的 [email protected] 正式开始 beta 阶段。

What’s better ?

1. 零配置，开箱即用 😊

antd-mobile@1 的用户可能深有体会，v1 出于移动业务的需求集成了高清方案，svg sprite 等高级特性，但强依赖构建配置的方式急剧提升了上手和使用复杂度。好消息是，经过整体重构，v2 已无需任何配置，效果如下：

// install deps
npm install antd-mobile@next

// import component and style 
import { Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

// here you go
ReactDOM.render(<Button loading>Start</Button>, mountNode);

做了什么黑魔法呢 ？

• 内置了 hairline mixin 实现 1px 线，可兼容 viewport 缩放与不缩放。
• 简化并 inline 了 svg sprite 逻辑，无需 svg-sprite-loader。
• 修改了 react-native 组件引用， 无需 webpack.resolve 配置。
• 新增单位变量 @hd,以适用于不同适配方案。

那 v2 是否支持业务自行添加缩放高清方案？1.x 的项目又是否能平滑迁移？

答案是 Yes. 得益于 antd-mobile v2 渐进增强的哲学和实现方式。1.x 项目升级成本相当小，详见 升级指南

2. 体积显著减小，更轻量 ⚡️

| 版本 | antd-mobile.min.js 体积 | components 体积 / 占比 | node_modules 体积 / 占比 |
| :--- | :--- | :--- | :--- |
| 1.6.5 | 568.4k | 142k / 24.9% | 426k / 74.9% |
| 2.0.0-alpha.13 | 467.4k | 136k / 29.0% | 331k / 70.8% |

v2 共 47+ 组件，umd bundle 体积比 1.x 小了 101Kb, 即总体积下降了 17.8% 🎉

更多详情请查看 antd-mobile bundle-size 分析

呵呵，你们是不是精简了功能？

No. 所有的体积减少都来自于对底层依赖的全面重构和精简，包括但不限于重构去除了 moment.js 依赖，用自产的轻量级手势库 rc-gesture 完全替换了 hamemr.js。

3. 性能更好，C 端业务更友好 🌈

在 React 被应用到移动端之后，体积和性能一直是一个存在讨论的点，因此当社区出现 preact 这类体积更小，性能更佳的替代者，很多 C 端业务迫切想切换过来，so:

antd-mobile 作为基础 UI 组件库已经支持无缝迁移到 preact。

经过严密的测试，antd-mobile 自身已经根据 preact 进行了酌情的重构和兼容，至此我们的 官方 demo 已经全部运行在 preact 之上 ！

What’s New ?

• 新增了 Calendar ，DatePickerView 组件
• 重写了 TabBar, Tabs , 更灵活功能更强大的 Api，如支持 sticky header 等。
• Grid 重构，支持高度自适应和固定正方形两种布局模式。
• Popup 组件废弃并收拢作为 Modal 的一种子模式，解决了 v1 困扰已久的 Popup 内容无法更新的问题。
• antd-mobile 不再针对设备平台自动切换样式，默认采用 ios 风格，支持用户通过 platform api 切换为 android 设计风格。
• 所有文档完成国际化翻译，see en-US。

完整变更请看 chaneglog

What’s Next?

• 持续在 preact 适配和体积瘦身，依赖精简上下功夫。
• 着手对所有组件的动画性能和渲染性能做优化。
• 协助业务升級，完善升级文档，示例，工具。

---

相关信息

• beta 官网：http://beta.mobile.ant.design
• 升级指南: http://beta.mobile.ant.design/docs/react/upgrade-notes-cn
• 更新日志： http://beta.mobile.ant.design/changelog-cn
• issue: http://new-issue.ant.design/?repo=antd-mobile
• github: https://github.com/ant-design/ant-design-mobile

感谢所有 contributor 和反馈问题的用户们，任何疑问和反馈请联系我们：

EOF.

[shengxinjing]

全部运行咋preact上？ 还兼容react吗？

[paranoidjk]

@shengxinjing 永远都会支持 react, 我们只是会额外同时提供对 preact 的官方支持以及兼容性测试。

[weishijun14]

awesome~!!

[afc163]

English Version?

[paranoidjk]

@afc163 I will translate this to english tonight.

[shengxinjing]

tabbar和tab支持react-router的路由跳转吗？

[Carrotzpc]

简化并 inline 了 svg sprite 逻辑，无需 svg-sprite-loadr。

svg-sprite-loadr -> svg-sprite-loader

[zhang740]

@Carrotzpc thx.

[yt7649757]

官网上组件代码，，嵌入到文档模式，，和基本的有什么区别啊？ 还有怎么没有react-native的代码，，全是react版本的

[yt7649757]

Menu/NavBar 组件暂无 React Native 版本, 那抽屉是不是也不能用了啊，貌似抽屉用到了NavBar

[paranoidjk]

@yt7649757

嵌入到文档模式，，和基本的有什么区别啊？

区别在于是把页面内容 dom 推开，还是覆盖在之上，请查看 demo。

还有怎么没有react-native的代码，，全是react版本的

antd-mobile 官网暂未展示 react-native 代码，你可以查看 expo

Menu/NavBar 组件暂无 React Native 版本, 那抽屉是不是也不能用了啊

查看 api 文档注明的支持平台即可。

[yt7649757]

奉太郎，，，官网上的react版本代码，，有的组件上使用div,className，这些在react-native上会报错，，我吧这些div改为VIew，文字用Text包裹，，样式用style ，，反正有些组件这样一改后可以用，，有的会报错，，，，不知道是能否这样弄？还有模态框感觉有点卡，

[paranoidjk]

@yt7649757

请不要在这里贴代码和回复。这里是发布日志。

已经解释了，官网暂时只展示了 web 代码，react native 的 demo 源码目录在 component/foo/demo/foo.native.tsx eg: https://github.com/ant-design/ant-design-mobile/blob/master/components/button/demo/basic.native.tsx

如果还有问题请新开 issue。

[ssssssssssss]

React Native版本在Expo上的是三个月前的版本吧？有更新么？期待。

[silentcloud]

@ssssssssssss 这个待 2.0 正式版的时候更新，目前处于 beta 阶段，有的地方可能还会更改，避免重复劳动

[hfuuss]

大赞

[ssssssssssss]

@silentcloud 了解了，ETA还是九月底么？

[silentcloud]

@ssssssssssss 嗯

[czy0729]

@silentcloud 请问2.0有构建工具吗，因为想做服务器渲染，自定义css想单独编译一份好处理

[paranoidjk]

Close since [email protected] is officially released https://github.com/ant-design/ant-design-mobile/issues/1965 🎉

[MrGoodBye]

Awesome !