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

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

阿里怎么看待移动开发?

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

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

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

所以,阿里结合移动开发的现状并围绕其愿景推出了Weex解决方案。

事实上,在去年的双11活动中,Weex就得到了实战的验证,且表现不俗。时至今日,Weex已经被阿里技术团队多次运用,并“创造”出各种丰富的场景,整体的表现非常优异。

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

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

Weex的工作原理

 

Weex设计之初就考虑到在三端(iOS、安卓和H5)上能够得到展现。在最上面的DSL,阿里一般称之为Weex文件(.we),通过Transformer转换成js-bundle,再部署到服务器,这样服务端就完成了。在客户端,第一层是JS-Framework,最后到RenderRengine。

输入是Virtual DOM输出是native或者H5 view,还原成内存中的树型数据结构,再创建view,把事件绑定在view上,把view基本属性设上去。Weex Render会分三个线程,不同的线程负责不同的事情,让JS线程优先保障流畅性。

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

性能方面,阿里对Weex做了多次压测。在加载时间、帧率、内存消耗、CPU占用(包括静默和峰值)等多个方面,Weex都表现得非常出色。

在谈及性能之时,帧率和加载时间几乎都会被提及,但是往往忽略了一个事实,那就是Native UI开发中通常没有JS资源在服务器端加载。Weex会把JS内置到客户端里,以免除下载的问题,从而更为有效地提升性能。

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

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

其次是UI的自动化,分为两个部分,一是截图对比,将最终产生的结果和意料中的结果进行图形对比;二是Layout Results,包括Model以及其他的布局类的,通过基本的信息完成测试的过程。

在扩展性方面,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模式。

阿里百川(baichuan.taobao.com)是阿里巴巴集团的无线开放平台,通过“技术、商业及大数据”的开放,提供移动场景下的高内聚、开放式、行业领先的技术产品矩阵、成熟的商业组件和完善的服务体系,帮助移动开发者快速搭建APP、加速APP商业化进程,全方位赋能移动开发者及移动创业者。

深度揭秘阿里移动端高性能动态化方案Weex的更多相关文章

  1. Weex详解:灵活的移动端高性能动态化方案

    原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...

  2. 利用 Lua 实现 App 动态化方案

    因为动态化的东西我第一次看实现方案的源码,而且目前还是大三的学生,缺少很多实践经验说错的地方还请原谅,也希望能指出,被告知.想了很久还是决定写出来,求大神勿喷. 并且我的一个朋友bestswifter ...

  3. CG Kit探索移动端高性能渲染

    内容来源:华为开发者大会2021 HMS Core 6 Graphics技术论坛,主题演讲<CG Kit探索移动端高性能渲染> 演讲嘉宾:华为海思麒麟GPU团队工程师 大家好,我来自华为海 ...

  4. 【腾讯Bugly干货分享】OCS——史上最疯狂的iOS动态化方案

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/zctwM2Wf8c6_sxT_0yZvXg 导语 在 ...

  5. 杂项-分布式-EDAS:深度解析阿里云EDAS服务

    ylbtech-杂项-分布式-EDAS:深度解析阿里云EDAS服务 1.返回顶部 1. 深度解析阿里云EDAS服务 弹性伸缩 摘要: 第一种只适用于业务较少的情况,而在新业务不断增加的情况下,增加新应 ...

  6. 移动端性能监控方案Hertz

    移动端性能监控方案Hertz 吴凯 瑞利 富强 徐宏 ·2016-12-19 16:10 性能问题是造成App用户流失的罪魁祸首之一.App的性能问题包括崩溃.网络请求错误或超时.响应速度慢.列表滚动 ...

  7. 用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈

    用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈 深度学习已变得无处不在,不可或缺.这场革命的一部分是由可扩展的深度学习系统推动的,如滕索弗洛.MXNet.咖啡和皮托奇.大多数现有系统针对 ...

  8. 基于XMPP协议的手机多方多端即时通讯方案

    一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(I ...

  9. 【多端应用开发系列0.0.0——之总序】xy多端应用开发方案定制

    [目录] 0.0.0 [多端应用开发系列之总序]服务器Json数据处理——Json数据概述 0.0.0 [因] 正在学习多客户端应用开发,挖个坑,把所用到的技术方案,用最简单直白的语言描述出来,写成一 ...

随机推荐

  1. bzoj 1070 费用流

    //可以网络流,但是要怎么分配每辆车让谁维修以及维修顺序呢.可以考虑每辆车维修时间对总结果的贡献,把每个修车人拆成n个点共n*m个点, //n辆车连向这n*m个点,流量1,费用k*修车时间,其中k(1 ...

  2. 分布式监控系统开发【day37】:监控数据如何存储(七)

    一.如何存储 二.目录结构 三.代码调用逻辑关系 四.实现代码 1.data_optimization 1.存筛选出来符合条件的数据 def get_data_slice(self,lastest_d ...

  3. JSTL获取当日时间与数据时间比较

    <jsp:useBean id="now" class="java.util.Date" /> <fmt:formatDate value=& ...

  4. Windows API函数大全(精心总结)

    WindowsAPI函数大全(精心总结)    目录 1. API之网络函数... 1 2. API之消息函数... 1 3. API之文件处理函数... 2 4. API之打印函数... 5 5. ...

  5. 1.redis设计与实现--简单动态字符串

    1.redis没有使用c语言的字符串表示,而是使用更加适合自己的SDS(simple dynamic string),简单动态字符串,结构如下: 2.sys与c字符串的对比: 3.总结: redis采 ...

  6. 重构改善既有代码设计--重构手法13:Inline Class (将类内联化)

    某个类没有做太多事情.将这个类的所有特性搬移到另一个类中,然后移除原类. 动机:Inline Class (将类内联化)正好于Extract Class (提炼类)相反.如果一个类不再承担足够责任.不 ...

  7. C# 遍历枚举

    C#中,如何获取(遍历)枚举中所有的值: public enum Suits { Spades, Hearts, Clubs, Diamonds, NumSuits } private static ...

  8. Sqlmap注入技巧收集整理

    TIP1 当我们注射的时候,判断注入 http://site/script?id=10http://site/script?id=11-1 # 相当于 id=10http://site/script? ...

  9. py,pyc,pyw文件的区别和使用

    熟悉python编程的都知道,python三种最常见的py文件格式,.py,.pyc,.pyw,下面说一说它们各自的使用. py文件 python最常见的文件,是python项目的源码: 文件执行时l ...

  10. Tslib触摸屏官网【转】

    转自:https://github.com/kergoth/tslib C library for filtering touchscreen events tslib consists of the ...