|
|
|
|
移动端

魅族张兴业谈实践:利用Weex技术做魅族小程序

“微信小程序的发布给了一个新的思路,我们可以通过小程序的思路去解决动态化的一些问题,于是我们提出了小程序的动态化方案。”在51CTO举办的WOT2018全球软件与运维技术峰会上,魅族高级工程师张兴业如是说。

作者:杜美洁来源:51CTO.com|2018-06-13 11:36

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

【51CTO.com原创稿件】“微信小程序的发布给了一个新的思路,我们可以通过小程序的思路去解决动态化的一些问题,于是我们提出了小程序的动态化方案。”在51CTO举办的WOT2018全球软件与运维技术峰会上,魅族高级工程师张兴业如是说。

那么,魅族的小程序是什么?为什么选择Weex技术做小程序?小程序的方案投入重点在哪里?怎样保证小程序的性能和稳定性?魅族小程序开发与前端开发有哪些异同点?接下来,本文为大家一一解读。

魅族高级工程师张兴业

魅族高级工程师张兴业

利用Weex技术做魅族小程序

张兴业表示,魅族小程序参考了微信小程序的思路,可以理解成是一种快应用。厂商联盟发布的快应用是对外的,对开发者使用了标准的开发文档;魅族小程序主要是对内的业务使用,它是魅族内部的一套无需安装的小程序方案,集成了魅族内部的服务、登录、埋点、push、支付等。

为什么选择Weex技术?传统使用比较多的技术有WebApp、Hybrid、json2view等等,后来又出现了ReactNative和Weex技术,魅族都曾做过尝试,对性能、长列表、动画等方面做过测试,最终选择了Weex。“我们想寻找一个动态化的方案,需要高性能、可扩展的开发方案,而Weex的测试结果满足我们的要求,无论是包大小、应用启动影响,还是页面渲染和内存占用等,均合乎我们的需求。” 张兴业说。

魅族张兴业谈实践:利用Weex技术做魅族小程序

Weex技术能够帮助用户实现高效开发、动态更新。这里举两个例子,在开发Flyme社区一个列表页面时,如果用iOS或者安卓去开发,代码量很多,可能300行也开发不完,而且还要写很多布局文件。但是,采用Weex技术,仅仅50多行代码即可解决一个列表的问题,有效缩短了开发时间。另外,魅族短视频应用趣视频也是应用了Weex技术。当时,趣视频预装在系统内,不能卸载掉,面对各渠道不能卸载的舆情压力,紧急上线“趣评论 得大奖”话题活动,希望用户登入客户端后感受到趣视频的“趣”味,缓解他们的负面情绪,尽可能降低舆情风险。由于采用了基于creator的Weex方案,需求从提出到发布到用户手上只花了不到一天的时间,实现快速开发、快速上线。

谈谈魅族小程序方案

如果想实现小程序方案都需要做什么?张兴业认为,如果做一个类似Weex的渲染方案,周期会比较长,但是基于Weex技术去在现有方案上做就比较简单。首先,需要UI渲染、Native API、应用数据缓存、以及一个系统级的渲染引擎。然后需要一个管理平台,创建应用,在平台上实现小程序的上架、下架、升级、内测等功能。之后,魅族基于自研的FlymeUI组件去开发。这就是魅族开发团队的做法。下图所示是一个系统级渲染引擎框架。从下向上看,底层为Weex支持,主要用于渲染。

魅族张兴业谈实践:利用Weex技术做魅族小程序

系统级渲染引擎框架

“还有一些module的扩展,module扩展主要是封装了我们自己的服务,像登录、推送、支付,还有上传下载,大约封装了九大类,上百个接口。” 张兴业解释说:“每个小程序都运行在独立的进程中,并不是共用渲染引擎这个进程,独立就是为了避免因小程序出错影响主进程的渲染。此外,我们引入了针对图片的缓存方案,http方案。”

魅族还构建了高可用服务平台体系,主要包含:一个可靠的管理系统,一个完善的监控度量体系,以及多维度的数据分析系统。其中,监控度量体系主要用来监控小程序启动时间、页面渲染时间、页面滑动帧率、各种crash日志、流量、电量等问题和指导标准,通过无痕埋点的方式监控卡顿、不流畅、内存爆掉问题;数据分析系统主要依托大数据的能力,通过埋点SDK上报数据,通过小程序ID区分。

小程序方案的重点优化

那么,小程序方案重点优化有哪些呢?哪些工作投入的精力比较多?在魅族的小程序开发实践中,主要做了四个方面的重点优化,即:启动性能、长列表、动画、安全。

在启动性能方面,怎么实现程序秒开?小程序的启动主要分为四部分:第一步,去服务端获取应用的信息;第二步,下载小程序,通过CDN下载最新文件;第三步,对小程序进行初始化。小程序初始化主要是包加载验证、manifest文件读取;第四步,实现小程序首屏页面渲染,这里主要还是依靠Weex自身的性能。因此,优化比较多的是第一步和第二步。

小程序的启动流程主要有以下三种方案:

魅族张兴业谈实践:利用Weex技术做魅族小程序

很明显,第一种方案需要执行所有的流程,耗时长。第二种方案同样耗时长,影响用户体验。比如在4G网络环境不好的情况下,下载新版本耗时会显著增多。相对来说,第三种方案较好,它加入了并发执行,一边拉取版本信息,一边渲染本地的缓存文件,有缓存时可以直接打开。但是该方案也有缺点,长期未启动应用再次启动是老版本,而且紧急更新版本首次启动不会体现。所以考虑至此,魅族提出了第四种方案,增加了重启机制,提示有新版本需要用户重启。

魅族张兴业谈实践:利用Weex技术做魅族小程序

在长列表方面,Weex提供了List组件,但是在使用list组件时,它的内存会一直增加,虽然增幅不大,但是对于长列表,尤其是无限列表,内存也会增大到爆,这时应用就会退出。在移动应用中,长列表是使用比较频繁的组件,基本每个应用都会用到,对列表的优化就放到了首要位置。我们对list组件的渲染流程做了分析,虽然weex的list组件对view做了复用,但是dom结构数据还是在增加,从而引起内存的增加。列表中内容虽然很长,但是结构都一样,dom层也适合做复用,我们以此为切入点,优化了长列表的内存升高问题。 在weex最新的版本0.18.0中提供了recycle-list组件,weex官方也解决了长列表内存升高问题,接入weex新版本的开发者可以使用recycle-list组件代替list组件。

怎么去解决list内存升高的问题?现在,Weex0.18版本已经能够解决。至于低版本的,张兴业建议,直接从JS发给Native,所有的vue的渲染都在原生侧实现。原生侧的vue是可以复用的,data的数据量很小,基本就没有内存的升高。

此外,在动画方面,用Weex实现的时候,简单动画是没有问题的,复杂动画还是很麻烦,而且交互性能比较低,魅族这边使用自研的ActionView方案,ActionView完全使用Native的方式渲染,很流畅。ActionView方案也在魅族的各个应用的Banner、主题美化的动态壁纸、画屏动画使用,如果想体验一下ActionView的效果,可以访问http://action.flyme.cn。在安全方面,主要是为了外发去考虑的,采用沙盒机制实现了进程隔离和数据隔离;对用户进行权限控制;并根据安全域限制了http request访问域名……

演讲最后,张兴业分享了一些关于接入AI和AR的一些思考。他表示,未来将有更多可能。AI模型下发将会与云端识别相结合,5G、AI助力AR再焕发新春。

以上内容是51CTO记者根据魅族高级工程师张兴业在WOT2018全球软件与运维技术峰会的采访内容整理,更多关于WOT的内容请关注51cto.com。

【51CTO原创稿件,合作站点转载请注明原文作者和出处为51CTO.com】

【编辑推荐】

  1. 阿里宣布开源Weex 用Web方式开发Native性能体验应用
  2. 基于React与Vue后,移动开源项目Weex如何定义未来
【责任编辑:蓝雨泪 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月最赞

读 书 +更多

计算机网络原理与实践标准教程

本书深入浅出地阐述了计算机网络技术的基本原理,介绍了当前常用的先进网络技术以及网络的实际应用知识。全书主要内容包括计算机网络概述、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊