Weex黑科技——提升用户体验实践

简介: 在2017年1月12日 Weex Conf 2017上,来自阿里的寒泉结合Weex的背景、动画和手势的技术分析,从Weex存在的实际问题入手,提出了新的构想和新方案expression binding。

在2017年1月12日 Weex Conf 2017上,来自阿里的寒泉结合Weex的背景、动画和手势的技术分析,从Weex存在的实际问题入手,提出了新的构想和新方案expression binding。Weex总体来说性能较好,能够解决很多问题,具有协同多个业务在同一个大型APP上的能力,本文主要介绍怎么样通过Weex提升用户体验。

背景

2456fdc2985543158913259aea58687da53b372c

基于某个业务,产品经理和设计师想实现一个页面,该页面是卡片型的List,既能像List一样水平方向滑动,又能在垂直方向获取类似详情页的功能,这种需求在web时代比较难实现。但是有了Weex之后,这个设计变得相对容易了。

技术分析

70724901ce15b93cb0b2787957dedecde2170be0

我们首先需要把效果拆成我们所能够认识的特性。实际上,效果是非常复杂的,是同时几个动画在一起变。我们可以看到,在横滑过程中,最显眼的是卡片的变化,卡片随着手指的拖动产生了大小的变化,并且产生了位移,映射到CSS属性上即利用到了transform里面的scale和translate两个属性。背景是一张做了高斯模糊的图片,当切换卡片的时候有一个图片的变化,随着手指的拖动实际上是两张图片透明度的变化,一个增加一个减小,总和为100%,用到了CSS的opacity属性。界面上有一个细节,标题文字也发生了变化,位置和透明度都发生了变化,即用到了CSS中的opacity和translate属性。同理,向上推的动画是通过scale和translate实现的。

经过上述分析,我们可以得出一个结论:看似复杂的效果,我们都可以通过手势和动画两个特性来解决。

Weex动画

136fc7bf50a74922cfe5139eed06d178b6995fe5

动画的代码比较简单,Weex提供了一个API,有weex-module/animation这一特性,其调用与CSS的transition类似,API的名字也叫animation.transition。具体的写法是,首先需要style样式,从性能考虑,一次可以指定多个属性,上例中指定了color、transform、transformOrigin三个属性,duration为0ms,timingFunction为ease,delay为0ms,最后还有一个回调。

Weex手势

f88ba64ae7dadb21a197dfdba0ead9753848e0af

Weex支持4种手势:长按press,单机tap,拖拽pan,轻划swipe。比如拖拽效果,我们只要把两个Weex里的data绑定在元素的top和left上,监听它的onPanStart和onPanMove事件,根据屏幕上的位移改变对应的x和y的值。实际上只是把其计算的差量累加到原始值上面,这样就形成了拖拽的效果。

问题

9f815da75f9c9312720b675234099092316adefb

在实际的应用过程中,发现拖拽效果做demo的时候比较顺利,但实际业务上需要拖拽的东西相当复杂而且几个动画同时播放,上述的几种手势在ios上的性能可以接受,在某些安卓机型上会出现卡顿。下面进行分析,事件触发的原理首先从native侧接收到gesture事件,通过JS和native的bridge将其调给JS,JS找到相应的gesture handler执行JS代码,执行完之后更新到了虚拟DOM上,通过VDOM的compare算法到达real element上。上述过程会在每一次的手指移动的触发过程中执行一遍,频率非常高。

构想

9d404b94fa6faa1cea0066fc5fe53bfea86ab5f7

基于上述问题,提出了新的构想:在JS侧创建一个expression,把属性更新的规则(到底要更新哪个属性?每个属性怎么更新?)建立好,然后到native侧去监听gesture,并且更新到real element上,等到这个过程结束(手松开之后)再将其更新回VDOM Sync上。这与之前的做法是完全相反的过程。为了在一些环节上追求高性能、灵活性,有上述两种处理方法。为此,我们设计了新的方案。

新方案——expression binding

29154af8cccb4a86173539ec33c83b92e38ea636

上图是最初设计的一个API,在onPanGestureStart的时候,create一个binding,将元素、属性以及最终的表达式传递进去。具体实践的时候也遇到了瓶颈,比如表达式的解析。最终选定的技术方案平衡了开发成本和最终性能。

0f0304a4d2dc3445fceefda394c12a888526bb80

比如有一个表达式x+y*2,经过JS的Parser解析成标准表达式树,根据四则运算的优先级,y*2先算然后与x相加,从叶子节点往根节点一直解析执行就能算出最后的结果。在gesture start后,JS会将这棵树构造好变成Json传递给native,经过native侧的interpreter按照上述流程执行树,native通过gesture把x和y变量取出,传递给interpreter,表达式就会获得最终结果。通过上面的方式,极大地增强了在手势的情况下操作DOM的效率。
相关文章
|
移动开发 缓存 编解码
OTT端性能优化建设之Weex实践之路 | 《优酷OTT互联网大屏前端技术实践》第三章
追求极致的用户体验是个永恒的话题。无论在PC端、移动端,还是IOT端,大家都在尝试着各种技术方案,如提高秒开率,降低白屏时间等等。 在OTT端进行营销活动开发的我们,也面临这一挑战,尽管PC端和Mobile端都有成熟的技术方案,但是到了大屏端,由于终端的差异性,很多技术方案不能完全照搬照抄。 回顾优酷在OTT端的用户体验探索之路,经历了三个阶段:webview时期、自定义内核Blitz时期、weex阶段。
988 0
OTT端性能优化建设之Weex实践之路 | 《优酷OTT互联网大屏前端技术实践》第三章
|
移动开发 JavaScript 前端开发
weex中使用数据流工具Vuex实践
# 背景 weex刚开源不久,作为一名前端,当然是抑制不住自己的好奇心想要尝尝鲜。虽然weex的最大亮点在于对于电商类应用场景能够提供快速动态部署的功能,但是用js就能写跑在native端的页面更加吸引我。于是在空余时间就开始捣腾着weex,想做一个native app看看weex有什么“能耐”。 在开发过程中,在体会到weex周边工具带来的效率提升的同时,也发现了不少问题。除了wee
22262 0
|
移动开发 weex Android开发
手机淘宝 H5 和 Weex容器的构建实践
本文PPT来自阿里巴巴级前端开发专家徐凯(花名:鬼道)于10月16日在2016年杭州云栖大会上发表的《手机淘宝 H5 和 Weex容器的构建实践》。
6126 0
|
移动开发 前端开发 weex
Weex在千牛开放中的应用实践
在2017年1月12日 Weex Conf 2017上,阿里巴巴商家事业部无线千牛团队的无灵结合阿里巴巴无限商家端的实际业务分享了Weex在千牛开放中的应用实践,本文分享了面对业务的各种挑战,无线千牛团队是如何一步步转向Weex的,以及在实际过程中遇到挑战和所做的努力。
6163 0
|
移动开发 weex 双11
Weex动态化方案与双十一实践
在2017年1月12日 Weex Conf 2017上,来自手机淘宝移动平台Weex团队的凝砺结合淘宝实际业务分享了Weex动态化方案和双十一实践,本文先介绍了Weex的整体架构,接着重点分享了Weex在双十一会场上的实践,最后谈及了Weex的业务支撑,包括AliWeex等。
10191 0