WeexConf 2018干货系列|Weex + Ui
本文是2018年 Weex Conf 中议题《Weex + Ui》的内容文档整理,主要给大家介绍飞猪 Weex 技术体系从无到有的过程,包括 Weex Ui 组件库的开发和发展,重点分享在 Weex Ui 层建设的一些经验。
文章较长,首先放上 Weex Ui 的开源地址,欢迎大家提PR,同时也可以通过 Star 来表示你的喜欢。(https://github.com/alibaba/weex-ui)
Why Weex ?
Weex vs H5
我们为什么选择Weex作为我们首要的跨端开发技术呢?
写过H5的同学肯定会被它的简单高效、发布即更新、一条URL可适配多端等这些快所吸引,但写过 Native 的同学肯定也会被 Native 的富交互、性能体验、可调用原生能力、可管理内存等特性给我们的业务带来更好的体验。
快和体验想同时兼得
飞猪前几年也一直在这个方向上面探索。
包括最开始的 Hybrid 开发,通过 Bridge 提供部分 Native 能⼒来提升 H5 体验,譬如我们在H5里面可以直接获取App的定位信息、使用相机、播放视频、导航跳转等能力,业界也有Cordova、Ionic、Meteor这些成熟的方案。
还有利用离线包体系通过提前将资源⽂件下载,访问时路由拦截加载本地资源,让我们的H5页面可以达到秒出、动态更新、弱网可用效果,内部有手淘Zcache、飞猪信鸽、支付宝九州这些成熟的系统。
我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。
等到了16年左右,跨平台开发技术逐渐火起来后,一种全新的开发思路吸引这我们,也即用JS来写Native,⽤ Web 的开发体验构建⾼性能、可扩展的 Native 应⽤,同时真正获取上述所说的快和体验。
业务对比分析
那么为什么会选择 Weex 呢?其实和飞猪业务特点很有关系,同时又可以很好解决这些痛点。
飞猪业务迭代速度快,也需要快速上线;同时很多时候景点和海外弱网使用,同时要体验良好;
其中最重要的一点是多容器接入,适配飞猪、手淘、天猫、支付宝,也即我们一次重要业务的开发需要一个iOS、一个Android同学来开发两端,同时由一个H5同学来开发兼容手淘、支付宝、UC的 Web 版本,也即一次业务发布涉及到多端同时开发、上线。
Weex 其实很好的解决了上述的一些问题,包括在飞猪、手淘、天猫 Weex环境下完全 Native体验,同时Bundle 资源大小较 H5 小很多,加上富交互体验、长列表性能好非常适合商品列表页面和双十一场景,最重要的是真正让我们从3个人的开发减少到了1个人,其他2个人可以去做更多有意义的事情。