333
技術社區[雲棲]
Ant Design Mobile 2.0 beta 發布
antd-mobile@1.0 發布已半年多, 曆經 26 個版本迭代，解決並關閉了幾百個 issue, 在阿裏巴巴十八周歲生日這天，我們也很高興的宣布：
更輕量，更易用，性能更好 的 antd-mobile@2.0 正式開始 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-loadr。 - 修改了 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 風格，支持用戶通過
platformapi 切換為 android 設計風格。 - 所有文檔完成國際化翻譯，see en-US。
完整變更請看 chaneglog
What’s Next?
- 持續在 preact 適配和體積瘦身，依賴精簡上下功夫。
- 著手對所有組件的動畫性能和渲染性能做優化。
- 協助 koi 和 業務升級。
相關信息
- beta 官網：https://beta.mobile.ant.design
- 升級指南: https://beta.mobile.ant.design/docs/react/upgrade-notes-cn
- 更新日誌： https://beta.mobile.ant.design/changelog-cn
- issue: https://new-issue.ant.design/?repo=antd-mobile
- github: https://github.com/ant-design/ant-design-mobile
感謝所有 contributor 和反饋問題的用戶們，任何疑問和反饋請聯係我們：
EOF.
最後更新：2017-09-18 21:33:53