深度揭秘阿里移动端高性能动态化方案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模式。

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

时间: 2024-12-25 19:49:02

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

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

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

AlphaGo深度揭秘

今日,在乌镇围棋峰会人工智能高峰论坛上,AlphaGo之父.DeepMind创始人戴密斯·哈萨比斯(Demis Hassabis)和DeepMind首席科学家大卫·席尔瓦(David Silver)在论坛上透露了关于AlphaGo的重要信息,以及AlphaGo究竟意味着什么?让人们能详细了解到AlphaGo背后的秘密. AlphaGo是什么? AlphaGo 是第一个击败人类职业围棋选手并战胜围棋世界冠军的程序,是围棋史上最具实力的选手之一.2016 年 3 月,在全世界超过一亿观众的关注下,A

阿里云ECOS 集群方案

转载 https://it.toggle.cn/article_detail/7e6f674b2564d6c319f807b4fda87eac.html 架构说明 前端由阿里云SLB统一分发Web请求 独立的网店管理后台管理入口域名绑定单台低权重ECS服务器(其他ECS管理做入口屏蔽),同时此ECS承担 ECStore crontab定时任务.应用文件同步源 独立一台ECS服务器做Mongo(KV NOSQL).MEMCACHE服务,如果在后期出现压力可以协同其他ECS服务器组Mongo副本集.

深度揭秘:伪基站短信诈骗产业传奇始末!

深度揭秘:伪基站短信诈骗产业传奇始末! 近些年因伪基站短信诈骗的崛起对用户造成了惨痛的经济损失,如今相关部门严打伪基站短信诈骗行业已取得初步成效,但仍有黑产团伙铤而走险继续作案,导致盗刷事件还是不断涌现.乌云君和行业都曾报道过一些伪基站诈骗手段与影响  伪基站 + 钓鱼 = 完美黑产,但还是难以深入背后的产业运作. 在乌云君经过一段时间的调查后,大致摸清了这个行业的详细分工与具体工作形式,今天给大家深度揭秘这个神秘的“伪基站诈骗产业链”是如何运作与分工,他们的目前的状况如何,又是怎样将你的钱洗走

亿级PV超大型网站集群架构图形深度揭秘讲解

猛戳下面地址观看: 亿级PV超大型网站集群架构图形深度揭秘讲解

mysql大内存高性能优化方案

mysql优化是一个相对来说比较重要的事情了,特别像对mysql读写比较多的网站就显得非常重要了,下面我们来介绍mysql大内存高性能优化方案 8G内存下MySQL的优化 按照下面的设置试试看:key_buffer = 3840Mmax_allowed_packet = 16Mtable_cache = 1024sort_buffer_size = 32Mread_buffer_size = 32Mread_rnd_buffer_size = 32Mmyisam_sort_buffer_size

移动端自适应布局方案尝试

原文地址:移动端自适应布局方案尝试 问题 刚开始接触移动端H5页面的时候最困扰的几个问题是: 6或6p上明明是1px的边框怎么就成了2px或3px辣么粗! 图片,div等如何等比自适应设计图 后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成,第二点知道了单位rem. 目的 不想因为使用rem而一一去计算设计稿的尺寸,设计稿750的尺寸的标注可以直接在sass中使用:字体不使用rem缩放,原因是: 显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号

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

目   录 基于XMPP协议的手机多方多端即时通讯方案................................................................. 1 目   录.................................................................................................................... 2 一. 开发背景........................

移动端font-size适配方案(续)

概述 之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用. 我上一篇博文主要有2个误区,下面我一一记下来. 这篇博文参考了移动端适配方案(下). 适配方案 有多种适配方案: 百分比布局:固定高度,宽度自适应.就是固定高度,宽度用百分比.可以想象,对于不同的屏幕,所有的东西都有横向拉伸,导致非常不好看. px布局:固定宽度,viewport缩放.就是全部用px,然后用js控制i