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

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模式。

时间: 2024-10-31 20:01:54

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

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

在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责人庄卓然(花名南天)宣布阿里移动端跨平台开发框架Weex开始内测,并将于6月份开源.在QCon的第二天,阿里技术专家徐凯(花名鬼道)和阿里前端开发专家赵锦江(花名勾股)向参会者做了<Weex--灵活的移动端高性能动态化方案>的演讲,对这一技术方案进行了详细的剖析. 以下为演讲内容的整理: 昨天南天宣布Weex启动开源内测,截至到今天中午,我们统计申请内测用户突破1400人,大家的热烈程度远远超过我们的设想

专访阿里巴巴魏虎:揭秘阿里双11背后的全站个性化&amp;商铺千人千面

12月6日-7日,由阿里巴巴集团.阿里巴巴技术发展部.阿里云联合主办,以"2016双11技术创新"为主题的阿里巴巴技术论坛(Alibaba Technology Forum,ATF)将在线举办.(https://yq.aliyun.com/promotion/139)12月7日晚20:00,来自阿里巴巴的资深技术专家魏虎将在在线论坛上发表<数据赋能商家背后的AI技术>的演讲. 系列文章陆续发布: 专访阿里巴巴徐盈辉:深度学习和强化学习技术首次在双11中的大规模应用 专访阿里

游戏安全资讯精选 2017年第十九期:WebLogic Server WLS组件漏洞入侵挖矿事件分析,苹果手游代充灰色产业深度揭秘,《绝地求生》99%外挂都来自国内

[游戏行业安全动态]苹果手游代充灰色产业深度揭秘 概要:苹果手游代充最早可以追溯到2012年前后,到现在已经经历了多次发展,从最开始的外币汇率差,退款,36漏洞,再到现在黑卡,盗刷信用卡,甚至出现了专门的库存系统.库存系统保存的就是苹果的消费凭据,充值商家等到有客户时候,可以随时使用,可谓完美绕过苹果风控,使黑卡和盗刷可以大规模实现,让供货和销售分开,降低了行业进入的门槛,更加细分了产业链,放大了黑卡和盗刷的影响.库存系统还能绕过大多数游戏的外币检测,甚至充值游戏里已经下架的面值,比如之前某款游

Weex动态化方案与双十一实践

在2017年1月12日 Weex Conf 2017上,来自手机淘宝移动平台Weex团队的凝砺结合淘宝实际业务分享了Weex动态化方案和双十一实践,本文先介绍了Weex的整体架构,接着重点分享了Weex在双十一会场上的实践,最后谈及了Weex的业务支撑,包括AliWeex等. 以下为精彩内容整理:   初始Weex Weex是一套高性能跨平台移动开发框架,最大的优势是解决了频繁发版和和多端研发两大移动开发痛点.一套代码完美适配IOS.Android.HTML5和Web等多端,极大的提升开发效率同

对无线电商动态化方案的思考(三)

之前两篇我们分别谈到了对无线电商动态化的理解,以及我们自己的技术方案:Weex,都比较宏观和抽象,今天我们分享一些其中的技术细节 data-binding 首先要介绍一下我们是怎么做到数据绑定的,首先,我们对上层撰写的代码遵循了传统的 mustache 书写习惯.即: <template> <text style="color: {{mainColor}}">{{title}}</text> </template> <script&

对无线电商动态化方案的思考(二)

上一篇谈到了我对无线电商动态化的理解,并简单提到了我们自己提出的技术方案:Weex,今天就来详细介绍一下 Weex 一句话介绍 Weex 是一款轻量级的移动端跨平台动态性技术解决方案! 几个特点 轻量 体积小巧,语法简单,方便上手 可扩展 业务方可自行横向定制 native 组件和 API 高性能 快速加载,快速渲染,体验流畅 其它 拥抱标准:基于 Web 标准设计语法 响应式界面: 通过简单的**模板**和**数据绑定**轻松解决数据和视图的同步关联问题 多端统一:iOS.Android.HT

对无线电商动态化方案的思考(一)

如题,接下里的一段时间里,我会从无线电商动态化的角度谈一谈自己的理解和思考 无线电商动态化 无线 首先要谈的是无线,或者说移动.手机和传统桌面端计算机有着非常大的不同,首先是随时随地,这样它就需要同时也可以拥有更多的传感器,比如镜头.体感.定位.蓝牙.NFC 等等,当然也包括多点触摸屏,人们的操作和交互方式也发生了很大的变化:其次它的屏幕尺寸和电脑完全不同,也由此产生了完全不同的阅读体验和阅读方式:再有就是能耗和稳定性变得非常非常关键,如何流畅的展示复杂界面和大数据,如何有效控制由于资源问题而导

深度揭秘Xshell后门事件:入侵感染供应链软件的大规模定向攻击

本文讲的是深度揭秘Xshell后门事件:入侵感染供应链软件的大规模定向攻击,近日,NetSarang旗下的Xmanager.Xshell.Xftp和Xlpd等在全球流行使用的服务器远程管理软件曝出被多家杀毒软件报毒查杀的情况,经过360科技集团追日团队调查分析确认,NetSarang旗下多款软件的关键模块被植入了高级后门,这是一起入侵感染供应链软件的大规模攻击事件,我们将其命名为"XshellGhost"(xshell幽灵). 事件时间轴 2017年7月17日,NetSarang公司发

揭秘阿里云护航G20背后的技术

[9月7日讯] 9月4日至5日,二十国集团(G20)领导人杭州峰会开幕. 二十国集团成员.嘉宾国领导人和有关国际组织负责人聚首杭州,就世界经济面临的挑战,商讨解决方案,为国际合作指明方向.全世界的目光再次聚焦中国,聚焦杭州. 为保障峰会期间的云上安全,G20官网以及浙江省内政务.民生类网站稳定传递资讯,阿里云积极贡献技术力量,提供了大量专业的安全护航服务. G20期间,为全国99个重保用户及浙江省217个政务业务系统提供安全防护,实现峰会期间零业务中断与零安全事件: G20期间,阿里云协助云上政