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

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

快速导读：在Gartner“技术成熟度曲线”的解析过程中，我们已将混合开发技术*明确定位于稳步攀升的光明期。根据Gartner的研究，这一时期具备显著的6大特征，本文将详细阐述混合开发技术现阶段的主要特征，并深入简出地讲解现阶段的混合开发技术应如何正确理解及使用。

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

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

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

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

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

● 界面切换和转场效果：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页面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

❹ 性能体验优化，已经基本达到原生的标准

今天，开发者已经非常清楚HTML5会存在哪些性能问题，在混合开发模式中，如果使用HTML5会产生性能问题，我们就会通过原生扩展的方式来代替，我们可以合理的使用HTML5技术。

所以如今使用混合技术开发的app，拥有和Naive一样的UI结构和功能扩展，性能方面已经可以达到Native的标准。

我们对比分析了一款使用APICloud技术开发的电商app，分别与淘宝和京东两款app在5个方面进行对比，测试覆盖了所有主流机型，测试时间以秒为单位，测试结果性能基本无差别。

• 应用启动速度：测试从点击应用图标开始，到进入首页的时间*

• 导航切换速度：三款应用都是底部导航，切换底部菜单，测试切换的时间*

• 打开新页面速度：点击商品列表，打开商品详情界面，测试打开新页面的时间*

• 调用扩展模块速度：点击二维码按钮，打开扫描界面，测试调用Native模块的时间*

• 调用开放服务速度：点击语音按钮，打开语音识别界面，测试调用开放服务的时间*

❺ 完成了平台化、组件化和生态化发展

目前跨平台技术领域分为两个发展方向：

第一个是HTML5 + Native混合方向；

第二个是中间语言编译方向；

其中APICloud和小程序都属于前者（虽然微信小程序开发使用自己定义的标签和样式，但是执行前还是要转化为标准HTML5）。

HTML5 + Native混合，也就是我们通常所说的混合开发。

这种模式的开发主体是HTML5，但整个app的架构是Native架构：通过HTML5快速实现app的UI布局、产品业务逻辑，在开发过程中涉及HTML5无法实现或者体验不好的功能，则借助Native模块来实现。

中间语言编译方向，代表产品为React Native（RN），Xamarin以及Google刚刚发布的Flutter。

如何理解中间语言编译？

以RN为例，传统的app开发，要求开发者使用Android和iOS原生技术-Java、Object-C、C/C++等进行开发，而RN的开发过程则要求开发者使用JS进行编码输出app，但在app执行过程中，JS又映射回到安卓和iOS原生层面执行。

借助JS快速实现编码，翻译为原生代码执行，这就是中间语言编译方向。

Xamarin则要求使用微软自己的语言C#，对于大部分开发者而言，C#的学习成本比较高且Xamarin需要付费使用，因此它目前在国内应用比较少。

Flutter的开发语言为Dart，它是谷歌发明的编程语言，这个语言很有趣，它的语法类似于C语言，又将JS和Java的一些设计思想以及语法规则融合了进去。Dart语言在此前应用比较少，可参考的资料不多，开发者上手需要一个过程。

其实今天，两个类型中很多的混合开发技术产品都已经完成了平台化、组件化和生态化的发展过程，例如：APICloud、小程序、React Native等。

❻ 大规模成功案例出现，成为企业app开发的主流技术

今天占领我们手机桌面的很多app都是采用混合技术开发的，上图中这些app的开发人员在不同的场合都分享过使用混合技术开发各自产品的经验。

这里大家可能会有一个疑问，在这些主流产品中混合技术占的比重是多少？是不是只是个别界面使用了？

其实在这些app中HTML5占的比重还是很高的，比如手机QQ、58同城、支付宝、淘宝、携程、美团等。

此外，一些大型企业也都纷纷采用混合技术开发app。

包括海尔、春秋航空、Intel、中信证券、上汽通用等很多款app都是基于APICloud技术进行开发的，今天使用APICloud技术开发的app在各大应用市场上线的应用已经超过5万款，在苹果App Store上线的app超高3万款。

更多使用混合开发技术的案例可以到APICloud官网(https://www.apicloud.com/cases)查看。

以上，从6个方面对目前的混合开发技术进行了全面的分析，按照Gartner技术成熟度曲线的每个阶段的定义，我们可以清晰的看到，今天的混合开发技术正处于“稳步攀升的光明期”，并即将迈入“实质生产的高峰期”。

这一现状也将为行业未来的技术研发、产品投入和技术选型提供了重要的决策参考。