APP开发平台 > Blog > 深度解析App混合开发技术的成熟度曲线(三)

深度解析App混合开发技术的成熟度曲线

  根据Gartner的研究,这一时期具备显著的6大特征,本文将详细阐述混合开发技术现阶段的主要特征,并深入简出地讲解现阶段的混合开发技术应如何正确理解及使用

  混合开发技术处于光明期的6大特征

微信图片_20180718150450.jpg

  ❶ 技术特点清晰,用户能够正确使用混合开发技术

  今天的开发人员对混合开发技术的特点已经有了充分了解,开发一款app,哪些功能可以使用HTML5,哪些功能必须要用Native模块扩展,相信大家已经有了清晰的认识。

  怎样应用混合技术对app开发非常重要,这里总结如下几点:

微信图片_20180718150512.jpg

  ● HTML&CSS的解析:能用HTML+CSS来布局的界面一定要用,HTML和CSS经过了这么多年的发展,标准已经非常完备,布局效率也是最高的。虽然HTML和CSS的解析需要一点时间,但是移动app的页面通常都很小,元素也很少。只要我们严格控制每一个页面中HTML和CSS代码的大小,完全按照产品设计来精细的编写HTML和CSS代码,不要引入重型的框架,不要出现无用的代码,那么这个解析过程对界面显示速度的影响其实很小。

  ● Layout&Render的机制:浏览器的渲染机制与原生不同,浏览器的渲染需要经过Dom Tree-》Layout Tree-》Draw的过程,并且这个Draw的实现是在浏览器内部自己完成的,这决定了其渲染速度要比原生慢。

  特别是在移动app中表现得更明显,因为在移动app中,用户会进行频繁的交互操作,例如:下拉刷新、界面滚动、手势动画等,这些操作效果引起的界面变化需要浏览器对整个界面进行重绘(重新Layout和Draw),浏览器本身渲染的效率就不高,频繁重绘造成的结果就表现为闪屏、界面卡顿,用户体验差。

  所以,混合开发一定要尽量避免引起浏览器的重绘,要通过原生的机制(调用混合开发平台的扩展API)实现下拉刷新、界面滚动、手势动画等会引起浏览器重绘的功能。

  其实HTML5界面第一次渲染的用户体验并不差,因为打开新页面用户可以接受有一个短暂的响应时间,而且通常界面切换会伴随转场动画和加载过程。但是频繁的浏览器重绘就会影响体验。

微信图片_20180718151305.jpg

  ● 界面切换和转场效果:app的界面切换会伴随各种转场效果,这样用户的操作感好,交互体验也好。HTML5的a标签跳转默认没有动画,SPA方式下div切换也没有动画,用HTML5的JS或CSS3来模拟这些Native窗口的的转场效果体验很差。

  在混合开发中app需要构造和原生一样的多窗口UI结构,这样就可以使用原生的转场效果,通常每一个混合技术平台都有自己的一套UI结构,以APICloud为例,APICloud界面布局使用Widget、Layout、Window、Frame和UIModules 5大组件。

  一款app如果有50个界面,那么就需要构建50个Window,每一个界面都是一个独立的Window(Window是一个标准Native的窗口,可以使用Native的界面切换和转场效果),在每一个Window内部加载HTML5页面。

微信图片_20180718151324.jpg

  ● 网络请求和数据存储:标准HTML5在跨域异步请求、Socket通信、异步和结构化的本地数据存储、存储容量、图片和数据缓存等方面相比Native在功能和性能上还存在很大差距。

  混合开发中我们需要通过原生方式实现这些功能,目前标准的混合开发技术平台都会为这些功能提供了封装好的API,方便开发者调用。

  ● JavaScript的执行和桥接:很多开发者认为由于JavaScript是在浏览器主线程中执行,耗时的JavaScript操作会阻塞主线程,从而影响界面的渲染。其实任何耗时的操作,放在主线程中都会阻塞UI,在Native开发中也是一样,在Native开发中,遇到耗时的操作我们也要新起一个线程,不能将这部分代码放到的UI线程中执行,否则一样阻塞UI。

  耗时的JavaScript操作,例如:复杂的数据解析、数据加解密、复杂的运算等等,在混合开发中,我们需要将这些耗时的操作放到Native扩展模块中来完成,在Native代码中新起一个线程来执行。

  同样,今天的混合开发技术平台也都会为这些耗时的功能提供标准化的扩展模块。

  另外就是JavaScript与Native的桥接成本,其实无论这种桥接是通过映射还是命令队列来实现,相比于功能调用本事的执行成本,这部分的成本可以忽略不计。

微信图片_20180718151337.jpg

  ● 开放服务的集成和封装:app中会用到很多的开放服务,常用的例如:支付、地图、客服、统计、推送、IM、IoT通信、各类AI识别等等。通常服务厂商都会提供Native版本的SDK,这些Native的SDK在HTML5无法直接调用,JS版本的SDK要么没有,要么功能不全。

  所以,混合开发中我们需要通过原生的方式分别封装不同厂商的Android和iOS版本的SDK,才能在自己的app中集成使用这些服务。

  其实,今天在APICloud平台上,已经封装好了所有主流开放服务的API,开发者可以直接调用。

微信图片_20180718151350.jpg

  其实,混合开发技术的本质就是要用Native技术来解决HTML5功能和性能的问题,哪些方面需要混合?如何进行混合?掌握混合技术的特点并正确使用非常关键。

  ❷ 应用领域清晰,用户根据自身需求正确选择

  任何应用都可以使用混合技术开发,关键还是要根据自身需求来选择。

  如果一款应用核心功能和大部分的界面都必须要原生实现,那么就没必须使用混合,例如游戏、美图等。

  如果只有个别界面需要原生实现,其他界面用HTML5没问题,那就可以采用混合,例如电商类app,商品分类、商品列表、商品详情、购物车、订单等界面用HTML5实现没有问题而且效率更高。

  今天几乎所有主流电商app(淘宝、京东、天猫等)都采用混合开发,混合开发技术已经是电商app面向运营快速迭代的技术支撑。

微信图片_20180718151409.jpg

  ❸ 功能覆盖全面,用户无需再花精力自己扩展

  混合开发技术平台经过这么多年的发展和完善,功能已经非常全面,基本可以覆盖app开发需要的所有功能。

  以APICloud平台为例,从2014年9月15日上线,4年来一直坚持每月更新一个版本,通过APICloud模块Store不断扩展API,目前已经拥有超过600款模块,10000个API,功能包括:界面布局、设备访问、功能扩展、开放服务、直播、物联网、AI等。

  更多app资讯,请关注www.apicloud.com

  提交app定制需求,了解报价和周期:

  https://app.apicloud.com/index?uzchannel=500


2018-07-18 来源:APICloud

App混合开发

高效的App定制平台,标准化、便宜、快!

提交APP定制开发需求