Dcloud崔红保:打造极致的Web APP原生体验 – SunlovelyBox

  • A+
所属分类:互联网络 技术展台

2016年8月26-27日,由51CTO.com主办的【WOT2016移动互联网技术峰会】在北京粤财JW万豪酒店隆重召开。自2012年以来,WOT品牌大会秉承专注技术、服务技术人员的理念已经成功举办十一届,不仅积累了大量的专家资源,更获得广大IT从业者和技术爱好者的认可和好评,并成为业界重要的技术分享及人脉拓展平台。

在前端技术专题主场,记者采访了DCloud前端架构师崔红保,请他分享在提升Web APP用户体验方面的经验。

Web App和Native App谁会笑到最后?

在论坛现场,当崔红保问到有谁在做Native App开发时,会场有不少人都举起了手,这些人来听崔红保谈HTML5如何提升Web App的用户体验,由此可见大家都非常关注Web App的未来发展。

对于Web App和Native App的未来发展前景,崔红保有自己的观点。他表示,“我认为Web App和Native App二者在相当一段时间内都将是并存的关系,但是会呈现出此长彼消的发展态势,Web App的比重会越来越高,而Native App的用户比例会逐渐降低。”

之所以会得出这样的结论,崔红保认为最关键的还是成本问题及用户获取内容体验问题,原生开发需要分平台进行,人力成本、多团队沟通成本都较高;原生App的推广成本更是Web App的10倍以上。此外,对比PC互联网,目前很少有用户愿意在PC上安装客户端,有任何需求基本都会直接通过浏览器搞定,手机未来也将是如此。而像微信这样的超级APP入口,它其实已经承载了很多Web App功能,从这也能看出Web App也将代表着未来的一个走势。而HTML5则是Web App的主要支撑技术。

三箭齐发,提升HTML5性能

虽然HTML5技术从功能、性能体验、开发调试都比原生要差,但是通过四层合力,Web App的js能力一样可以与原生拉齐:首先,W3C、ECAMScript、webkit扩展这些规范自身大概有7万左右的API;在此基础上,HTML5+规范封装了30大类、几百个常用的API,可以满足一般App开发所需的能力需求;通过Native.js,让JS直调40w原生API;在Active Plugin,可以用JS调用各种原生SDK和插件。

对于如何提升HTML5性能,崔红保认为可以从三个方面入手,一是硬件方面,提升设备能力;二是OS操作系统方面,升级到更高版本的操作系统, Android 4.4+ 目前的市场占有率已超过80%;三是利用HTML5+强化引擎、MUI前端框架,来提升Web强化引擎的性能。

崔红保告诉记者,HTML5其实一直在完善,例如本地存储的容量问题,现在通过增加引擎封装扩展了本地存储,还了封装了本地IO系统、文件系统,可以实现与原生应用一样操纵本地资源文件。至于安全性问题,可以把一些敏感数据做加密,再存储本地。

Web App用户体验差在哪?

崔红保认为,Web App目前用户感受较差的地方主要集中在以下方面:

首先是下拉刷新,现在业务大多有下拉刷新需求,在Web APP上面会出现闪屏抖动情况;其次是页面切换,从A页面跳到B页面的时候,可能有一个等待,出现白板页面。最后是Web APP能力上面的限制,例如二维码扫描,对于定位方面的需求可能存在局限性。

除此之外,像HTML5展示页面还容易出现顶部标题在滚动时闪烁、点击延迟等现象。

一心二用的流应用

崔红保告诉记者,流应用是一个新发行技术,相当于流媒体发行。过去人们看电影,要找一个资源先下载到本地,再通过播放器播放。后来优酷、爱奇艺出现后,大家可以缓冲看,边看边下载,流应用也是同样的概念。

和原生应用不同,流应用不需要经历搜索下载、本地安装、权限确认、安装完成这些繁琐步骤,流应用在点击下载按钮后,可以一边使用一边下载,例如大家下载大众点评外卖,后台在下载,但是用户可以直接先进入大众点评网的首页直接开始操作,其实首页也只有100K大小,也就相当于大家刷一下朋友圈的流量,基本上在5秒钟内就可以开始应用,可以大大提升用户使用体验。

还有一点优势也非常明显,那就是流量问题。原生APP大多都在几十兆到上百兆大小,用户下载耗费流量。而流应用可以降低流量,它把公有引擎内置手机里面,这样用户不需要下这个引擎,只需要下对应的资源就可以了。这个资源可能只有几百K或者几兆大小。可以有效避免下载折损。

记者了解到,在IOS和Android上已经有了流应用的应用,在360手机助手微应用专区,看到的所有应用都是流应用。

【责任编辑: TEL:(010)68476606】
下载服务恢复

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: