深度揭秘阿里移动端高性能动态化方案Weex

简介: 2016年Qcon大会首日,阿里巴巴资深总监、淘宝移动平台、阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源。此消息一出,群情汹涌,在座的程序猿、攻城狮们纷纷拿起手机扫码,以期第一时间感受Weex的神奇之力。
2016年Qcon大会首日,阿里巴巴资深总监、淘宝移动平台、阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源。此消息一出,群情汹涌,在座的程序猿、攻城狮们纷纷拿起手机扫码,以期第一时间感受Weex的神奇之力。

在第二天的主题分享会上,阿里巴巴前端开发专家赵锦江和技术专家徐凯对Weex进行了深入的解析。以下为演讲速记整理后的成文。

阿里怎么看待移动开发?

目前的移动开发者面临的最大痛点就是面对极其复杂的环境,对此,庄卓然给出一个公式,移动开发的复杂度=应用数量×平台数量×要适配的各种各样的机型。

如何解决这个问题呢?在解决问题之前,首先要对移动开发的未来有着精准的研判。

阿里认为,移动开发的未来必定更加平衡,也就是说必须是性能与动态兼得,如此,才能够满足未来用户的需求。另外,移动开发在未来也必定是开放互联的状态,移动互联网将来肯定是基于更加大众化的技术体系,没有平台之间的隔阂,而且简单易用。

所以,阿里结合移动开发的现状并围绕其愿景推出了Weex解决方案。
c33c44b11b2a94b363ccc11f0e941ccbb2080b87
事实上,在去年的双11活动中,Weex就得到了实战的验证,且表现不俗。时至今日,Weex已经被阿里技术团队多次运用,并“创造”出各种丰富的场景,整体的表现非常优异。

把移动端所有界面拆分成各个page,然后中间设置有路由的控制逻辑,同时,将移动端各种各样的能力通过各种API提供给开发者。这是阿里对移动开发模型的理解。

Weex通过标准化的东西,包括HTML、CSS和JS这些前端非常快速易用好学的语法作为开发体验,提供给开发者。另外,Weex的语法设计尊重还Web的标准。

Weex的工作原理
21f4f044cbccbaf0a90a8ae91c5695c5f5a71249
Weex设计之初就考虑到在三端(iOS、安卓和H5)上能够得到展现。在最上面的DSL,阿里一般称之为Weex文件(.we),通过Transformer转换成js-bundle,再部署到服务器,这样服务端就完成了。在客户端,第一层是JS-Framework,最后到RenderRengine。
c7fbae8948f2059d9169c76084d543b93187ec62
输入是Virtual DOM输出是native或者H5 view,还原成内存中的树型数据结构,再创建view,把事件绑定在view上,把view基本属性设上去。Weex Render会分三个线程,不同的线程负责不同的事情,让JS线程优先保障流畅性。

Weex的性能、扩展性以及可用性究竟怎样呢?

性能方面,阿里对Weex做了多次压测。在加载时间、帧率、内存消耗、CPU占用(包括静默和峰值)等多个方面,Weex都表现得非常出色。
c9409efe1a075ef4dfc0165c60155b76184ad139
在谈及性能之时,帧率和加载时间几乎都会被提及,但是往往忽略了一个事实,那就是Native UI开发中通常没有JS资源在服务器端加载。Weex会把JS内置到客户端里,以免除下载的问题,从而更为有效地提升性能。

兼容性是Weex非常重视的问题,对此,阿里是这样来解决的。

首先是单测保证,包括JS和H5的单测,保证最基础的UT(Unit Test)本身所带来的含义。

其次是UI的自动化,分为两个部分,一是截图对比,将最终产生的结果和意料中的结果进行图形对比;二是Layout Results,包括Model以及其他的布局类的,通过基本的信息完成测试的过程。
efded05193434b7ebc22c56ddb4d25324b8870ef
在扩展性方面,Weex可以写很多页面,而且通过路由机制帮助开发者将页面进行串联。

Weex已开放内测,可用性方面正在逐步完善。包括Playground、调试工具、脚手架、AppHub、编辑器等多个方面,一些工作已经完成就绪,绝大部分工作将在5、6月份完成。

最后,是Weex的三种工作模式。

1.全页模式

目前支持单页使用或整个App使用Weex开发(还不完善,需要开发Router和生命周期管理),这是主推的模式,可以类比RN。

2.Native Component模式

把Weex当作一个iOS/Android组件来使用,类比ImageView。这类需求遍布手淘主链路,如首页、主搜结果、交易组件化等,这类Native页面主体已经很稳定,但是局部动态化需求旺盛导致频繁发版,解决这类问题也是Weex的重点。

3.H5 Component模式

在H5种使用Weex,类比WVC。一些较复杂或特殊的H5页面短期内无法完全转为Weex全页模式(或RN),比如互动类页面、一些复杂频道页等。这个痛点的解决办法是:在现有的H5页面上做微调,引入Native解决长列表内存暴增、滚动不流畅、动画/手势体验差等问题。

另外,WVC将会融入到Weex中,成为Weex的H5 Components模式。
67df03e3ec9ae5cc3ced45457f115e9158db52b1

欢迎扫码关注,更多技术分享。

ea14ec7fb062eab8a29333c7a100d227a258a14a

目录
相关文章
|
7月前
|
存储 网络协议 调度
淘宝移动端统一网络库的架构演进和弱网优化技术实践
本文将介绍淘宝 APP 统一网络库演进的过程,讲述如何围绕体验持续构建南北向从监测到加速一体化的终端网络架构,通过构建 NPM 弱网诊断感知能力,落地原生多通道技术/多协议择优调度手段,贴合厂商附能网络请求加速,实现去 SPDY 及规模化 IPv6/H3 协议簇的平滑过渡,为用户提供弱网更好、好网更优的 APP 加载浏览体验,支撑业务创造更多的可能性。
250 0
|
10月前
|
自然语言处理 达摩院 小程序
多端/跨端/融合的移动端/小程序之Chameleon
移动端/小程序作为一种轻量级应用程序,以其轻便易用、无需下载安装、即点即用等特点,深受广大用户的喜爱。
124 1
|
10月前
|
移动开发 开发框架 JavaScript
多端/跨端/融合的移动端/小程序之Weex
小程序是一种非常重要的移动端开发框架,因为它可以让开发者在不同的平台上进行开发,并且提供了跨平台的可移植性。
218 0
|
12月前
|
Web App开发 移动开发 小程序
支付宝新一代动态化技术架构与选型综述 | Cube 技术解读
支付宝新一代动态化技术架构与选型综述 | Cube 技术解读
286 0
|
移动开发 前端开发 数据可视化
开源|优酷动态模板研发体系为分发提效30%
动态模板技术方案将客户端研发链路实现了串联,通过完备的工具化支撑体系,让开发者可以高效完成组件由原始设计稿到可运行代码的最短通路,本文将对研发体系中涉及到的核心模块就行介绍,希望对技术社区及广大开发者有一定帮助。
开源|优酷动态模板研发体系为分发提效30%
|
JSON 移动开发 Rust
全自研客户端技术方案:优酷跨端动态模板引擎
全自研客户端技术方案:优酷跨端动态模板引擎
650 0
全自研客户端技术方案:优酷跨端动态模板引擎
|
移动开发 前端开发 数据可视化
已开源,就等你来!优酷动态模板研发体系为分发提效30%
已开源,就等你来!优酷动态模板研发体系为分发提效30%
263 0
已开源,就等你来!优酷动态模板研发体系为分发提效30%
|
XML API 开发工具
移动端信息无障碍技术方案全解:以手淘为例
目前中国有1700多万视障人士,他们渴望购物,也希望在任何情况下都能平等的获取他们想要的信息,手淘作为全国最大的购物 App,我们也希望通过技术让视障消费者能更好的享受移动互联带来的便利,这既是公益,也是义务。 本文将和大家分享手淘在使用 DinamicX 支持无障碍的技术方案,并给出了相关示例,希望对移动端开发者有所启发。
移动端信息无障碍技术方案全解:以手淘为例
|
Web App开发 移动开发 小程序
Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述
支付宝客户端的动态化技术经历三个阶段:现阶段也就是第三阶段是实体组件+部分光栅化的hybrid模式,Cube 就是该模式下的产物。
1016 0
Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述
|
JSON 缓存 移动开发