WOT张兴业:Weex技术在魅族小应用中的实践

原创
开发 前端 移动开发 移动应用
张兴业表示,微信小程序的发布给移动前端开发带来了新的思路。一直以来,魅族也在思考能不能根据自己的业务创造一套适合自己的小程序方案,升级现有的动态化方案。也正是基于这种思考,同时结合Flyme 系统中有很多应用有着重运营属性,魅族基于Weex技术实现了自己的小程序方案。

【51CTO.com原创稿件】七年一剑,华丽蜕变。自2012年起连续6年15场峰会,凝聚大量技术专家,博观而约取,厚积而薄发。2018WOT全球软件与运维技术峰会扬帆起航,围绕12大核心热点,汇聚海内外60位一线专家,打造高端技术盛宴!

在 “前端工程实践”分论坛现场中,魅族高级工程师张兴业将给听众带来一场名为《Weex技术在魅族小应用中的实践》的主题演讲。在会前,51CTO记者采访到了他,请他提前“剧透”,精彩演讲内容就让我们“先睹为快”吧!

【讲师简介】

WOT张兴业:Weex技术在魅族小应用中的实践

张兴业主要从事应用技术支持工作,包括Android基础技术研究、Web相关技术在应用中的使用和优化等。现主要关注移动端动态化技术应用和优化以及AI技术在移动端的使用。

张兴业表示,微信小程序的发布给移动前端开发带来了新的思路。一直以来,魅族也在思考能不能根据自己的业务创造一套适合自己的小程序方案,升级现有的动态化方案。也正是基于这种思考,同时结合Flyme 系统中有很多应用有着重运营属性,魅族基于Weex技术实现了自己的小程序方案。

魅族为何选择利用Weex技术来开发小应用?

张兴业坦言,魅族内部一直在探索应用的动态化方案,包括:webapp、Hybrid、json2view等等。在2016年以前,魅做的更多的是Hybrid、json2view方面的,尤其是json2view,因为系统应用对性能的要求很高,而且也有动态化的需求,有些view就通过服务端下发json的方式,客户端解析json数据渲染出UI或者动画,比如魅族的ActionView(动视系统)就是采用了json2view的方案。

2016年,魅族开发团队注意到了ReactNative和Weex,当时团队对vuejs比较熟悉,所以比较倾向于使用weex,同时通过对ReactNative和Weex在基础组件和性能的对比发现,基础组件没有差距,而且自己也能扩展,性能方面也与ReactNative不相上下,所以最终选择了weex。

张兴业向记者介绍说,Weex是阿里2016年底开源的移动端动态化解决方案。它能够***兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。对于移动开发者来说,Weex帮助他们解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。

张兴业表示,在魅族小应用的开发流程和Weex的开发流程是一样的,魅族小应用的渲染框架用的weex,在此基础上开发时团队新增了很多魅族特有的接口和组件,并对自己提供的接口和组件撰写了详细的使用文档,用于内部使用方便交流。

目前,在魅族的很多小应用采用了Weex方案,例如用户反馈、国际流量、个人主页、评论中心等等,已覆盖了魅族三分之二以上的用户。

怎样保证小应用的性能和稳定性?

一个受欢迎的程序必然离不开高性能和高稳定性,那么,怎样做才能保证小应用的性能和稳定性?对此,张兴业认为,整个程序的高稳定性和高性能离不开前后端的支持,包括渲染层的优化。

在稳定性和性能方面,魅族小应用采用了魅族移动端的稳定性标准和性能标准,测试团队会对每个小程序进行稳定性、CPU、内存、流量、电量以及安全等专项测试。同时,开发团队采用Weex方案,用前端的方式开发部署程序,最终在移动端渲染成原生的方式,并在网络、渲染、缓存等方面做了优化。

我们知道,在应用性能方面,注重的是快和流畅,是怎样在最短的时间展现在用户面前,并有最流畅的感知。一个程序展现在用户面前,主要的时间花在了网络下载和UI渲染方面。在网络方面,魅族开发团队使用了GSLB(Global Server Load Balance)和CDN支持;在UI渲染方面,在weex原有基础上,对复杂控件做了调整,尤其是长列表的支持。在使用Listview,长列表出现了内存涨满的情况,经分析发现cell是可以重复利用的,但是数据量很大时,dom的量会很大,占用了很多的内存。dom的数据结构要比json数据复杂的多,需要更多的存储空间。如果list的数量是可控的,通过优化cell可以解决这个问题。但是对于list的Item数量不确定的情况,优化cell也不能解决这个问题。最终,开发团队选择通过提供cell模板的方式,让list支持的Item数量尽量多。

采访***,张兴业建议,在小程序开发过程中,开发团队要精通小程序开发的相关语言,熟读开发文档,要有前端基础,熟悉VueJS,还要多看weex的开发文档。虽然Weex前端开发也是用的vuejs框架,但也只是一个子集。所以有很多组件或者属性还不支持,用以前的前端经验去做,实现的效果反而不好。

5 月 18 - 19日,北京•粤财JW万豪酒店,全球最值得关注的IT技术盛宴与您不见不散。2018WOT全球软件与运维技术峰会一定是您发现全新思路、挖掘***思想、拓展人脉的重要平台。

目前我们的各项票种已全面发售。需要提醒您的是,购票越早,折扣越大!与KOL零距离交流,呈现不一样的“英雄盛宴”!

点击官网了解详情:wot.51cto.com

  7折预售中,抢票从速。

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

责任编辑:蓝雨泪 来源: 51CTO.com
相关推荐

2018-06-13 11:36:26

WeexUI渲染魅族

2015-09-22 09:17:19

2015-09-22 16:10:09

魅族

2018-06-06 10:50:18

容器开源

2015-09-28 11:32:34

51CTOIT技术周刊

2018-06-25 16:14:28

AI人工智能贝壳找房

2013-07-01 13:35:52

2011-03-23 10:18:16

魅友内测MStore魅族

2015-09-16 18:28:41

魅族

2014-09-02 17:33:05

魅族黄章MX4

2013-03-28 13:33:39

魅族MEIZU招聘

2014-10-24 13:52:07

手机

2013-03-28 09:47:38

魅族MEIZU

2019-04-09 15:02:36

OpenResty腾讯游戏营销技术

2018-12-24 11:13:32

WOT2018AI人工智能

2015-08-21 13:15:09

魅族mCycle

2014-09-09 10:03:27

智能穿戴智能设备可穿戴设备

2020-01-08 15:37:11

移动市场品牌资讯

2015-09-24 10:28:17

魅族品牌形象小而美

2011-12-15 20:59:01

MX
点赞
收藏

51CTO技术栈公众号