【.com原稿】众所周知，HTML5技术本身有很多优势。但是，HTML5要想成为移动互联网时代App开发的主流技术，有一个必要的前提，那就是其功能、性能和API扩展能力必须达到Native级别。在这一点上，依靠W3C规范的定义和浏览器厂商的支持是不现实的，混合开发技术是唯一的出路。令人欣喜的是，经过近10年的发展，混合开发技术终于足够成熟，并实现了大规模的商业应用。根据Gartner技术成熟度曲线模型的定义，混合开发技术已经具备了“稳步上升的光明期”所需的全部条件。技术成熟度曲线模型“技术成熟度曲线模型”是业界公认的标准模型，用于衡量一项技术的成熟度。作为全球最权威的IT研究和咨询公司，Gartner每年都会根据这个模型分析推演各种技术的成熟度。该模型认为，一项技术的发展可以分为五个阶段，并明确界定了每个阶段的边界和特点。?第一阶段——技术创新的起步期：技术概念提出、相关产品出现、媒体报道、早期用户尝试、产业应用可行性尚未得到证实?第二阶段——高峰期高期望：技术体系形成，更多相关产品发布，媒体报道，个人成功案例，行业期望太多太高不切实际?第三阶段-泡沫低谷期：技术局限和短板暴露，部分产品很难运营甚至死亡，媒体关注度下降，部分用户无法验证，行业前景不明朗。第四阶段——稳定增长的光明期：产品技术特征明确、用户理解、平台化、组件化、生态化崛起，媒体重新认可，规模化、重量级成功案例，行业应用前景清晰阶段-实际生产的高峰期：技术体系完备规范，产品相关生态和产业链蓬勃发展，媒体一致混合开发技术成熟曲线广受好评，成为主流技术并得到广泛应用使用，并在行业应用中稳定根据“技术成熟度曲线模型”的定义，我们可以画出一条描述混合开发技术的成熟度曲线，可以见证今天的混合开发技术。开发技术进入第四阶段后期，即将从“稳步攀升的光明期”进入“实产高峰期”。先简单回顾一下混合开发技术的发展历程：第一阶段：2009-2012年前后，混合开发技术的概念被正式提出。媒体报道。第二阶段：2012-2015年，混合动力技术蓬勃发展，被媒体广泛报道。2014年下半年，HTML5标准定稿。与此同时，市场上也出现了更多的混合开发技术产品，比如2014年问世的APICloud，2015年Facebook推出ReactNative时，业界对混合开发技术寄予厚望。第三阶段：2015-2016年，混合开发技术进入低谷期，至少在行业用户看来是这样。应用?由于不了解技术特性和原理，采用不合理的开发方式?技术产品本身不够成熟，在性能和兼容性方面仍存在问题?学习资源太少，缺乏优质社区。开发者自身需要一个踩坑和成熟的过程?扩展模块太少导致功能受限，这是主要原因之一；开发者使用混合技术开发一个APP，最后发现大量的功能需要通过Native来扩展，最典型的就是各种开放服务SDK的封装，比如：支付、地图、推送、统计、客户service,IM,IoT,AI等，每一类服务又分为不同的厂商。如果混合开发技术平台本身没有提供相应的模块或插件，开发者就得自己打包，工作量很大，坑也很大。事实上，任何技术的成熟，都必须经历平台化、组件化、生态化的发展过程。这个过程需要大量开发者的参与和大量应用的验证。用户肯定会遇到问题和挑战。如果期望设置过高或使用不当，负面评论和令人失望的结论是不可避免的。第四阶段：2016-2018年，混合开发技术逐渐成为众所周知的常规技术，用户自然可以根据自己的产品研发需求合理选择和使用。虽然媒体关注度有所下降，但在实际应用中取得了真正的发展和提升，表现在：技术特性逐步掌握，应用领域清晰，功能覆盖越来越全面，性能体验显着提升，一些High-优质的混合开发技术产品完成了平台化、组件化、生态化的开发过程，并有大规模的成功应用案例。混合开发模式已经成为一线互联网公司App开发的主流开发模式。第五阶段：未来从开发效率和成本，以及功能和体验等方面考虑，纯原生开发模式会越来越少，基于HTML5的混合开发技术将成为移动应用开发的主流技术。整个行业。混合开发的理念会被所有用户所接受，混合开发技术的门槛会越来越低，一些标准化的产品也会逐渐形成。光明期混合开发技术的六大特点下面详细解释目前混合开发技术在光明期的六大特点（一）技术特点清晰，用户可以正确使用混合开发技术今天的开发人员具有混合开发技术的特点我们在开发APP时已经充分了解了哪些功能可以使用HTML5，哪些功能必须使用Native模块进行扩展。我们对细节有清楚的了解。如何应用混合技术对应用程序开发非常重要。这里有以下几点：?HTML&CSS分析：必须使用HTML+CSS可以布局的界面。经过这么多年的发展，HTML和CSS的标准已经很完善了。效率也是一流的。虽然HTML和CSS的解析需要一点时间，但移动应用程序页面通常很小，元素很少。只要我们严格控制每个页面中HTML和CSS代码的大小，完全按照产品设计编写HTML和CSS代码，不引入笨重的框架，不出现无用代码，那么这个解析过程对产品的影响界面显示速度其实很小。?Layout&Render机制：浏览器的渲染机制与原生不同。浏览器的渲染需要经过DomTree-》LayoutTree-》Draw这个过程，而这个Draw的实现是在浏览器自己内部完成的，这就决定了它的Rendering要比native慢。尤其是在移动应用中，因为在移动应用中，用户会进行频繁的交互操作，例如：下拉刷新、界面滚动、手势动画等，这些操作效果所引起的界面变化，需要浏览器对整个界面进行监控。重绘（re-LayoutandDraw），浏览器本身渲染效率不高，频繁重绘导致的结果表现为闪屏、界面卡顿、用户体验差。因此，在混合开发中，需要尽量避免浏览器重绘，通过原生机制（调用混合开发平台的扩展API）。其实第一次渲染HTML5界面的用户体验还不错，因为用户可以接受打开新页面时较短的响应时间，而且通常界面切换都会伴随着过渡动画和加载过程。但是频繁的浏览器重绘会影响体验。?界面切换和转场效果：APP的界面切换会伴随各种转场效果，让用户有良好的操作感和良好的交互体验。HTML5a标签跳转默认没有动画，SPA模式下div切换没有动画。使用HTML5JS或者CSS3来模拟这些Native窗口的过渡效果，体验很差。在混合开发中，app需要构建和原来一样的多窗口UI结构，这样才能使用原生的转场效果。通常，每个混合技术平台都有自己的一套UI结构，例如Widget、Layout、Window、Frame和UIModules组件。如果一个app有50个界面，那么需要构建50个窗口，每个界面都是一个独立的窗口（window是标准的原生窗口，可以使用原生的界面切换和过渡效果）。窗口在内部加载HTML5页面。?网络请求和数据存储：标准HTML5在跨域异步请求、Socket通信、异步和结构化本地数据存储、存储容量、图像和数据缓存等方面与Native相比在功能和性能上还有很大差距。在混合开发中，我们需要以原生的方式实现这些功能。目前标准的混合开发技术平台为这些功能提供了封装的API，方便开发者调用。?JavaScript执行和桥接：很多开发者认为，由于JavaScript是在浏览器的主线程中执行的，耗时的JavaScript操作会阻塞主线程，从而影响界面的渲染。事实上，任何耗时的操作都会阻塞主线程中的UI。在Native开发中也是如此。在Native开发中，遇到耗时的操作，我们不得不另开一个线程。我们不能把这部分代码放在UI线程中的Execute中，否则会阻塞UI。JavaScript的耗时操作，比如：复杂的数据解析、数据加解密、复杂的计算等，在混合开发中，我们需要把这些耗时的操作放到Native扩展模块中去完成，在Native代码中启动一个要执行的新线程。同样，今天的混合开发技术平台将为这些耗时的功能提供标准化的扩展模块。另一个是JavaScript和Native之间的桥接成本。事实上，不管这个桥接是通过映射还是命令队列来实现，与函数调用的执行成本相比，这部分成本是可以忽略的。?开放服务的集成和封装：App会用到很多开放服务，比如：支付、地图、客服、统计、推送、IM、物联网通信、各种AI识别等。通常服务商会提供原生版本的SDK，这些原生SDK在HTML5中是不能直接调用的，JS版本的SDK要么没有，要么功能不全。因此，在混合开发中，我们需要将不同厂商的Android和iOS版本的SDK以原生的方式进行打包，从而在我们自己的APP中集成使用这些服务。在一些混合开发平台上，已经封装了大部分主流开放服务的API，开发者可以直接调用。下图是聚合在APICloud模块库中的相关模块。其实混合开发技术的本质就是利用Native技术来解决HTML5的功能和性能问题。哪些方面需要混合？如何混合？掌握混合动力技术的特点并正确使用非常重要。(2)应用领域明确，只要用户根据自己的需要正确选择，任何应用都可以使用混合技术开发。关键是要根据自己的需要来选择。如果一个应用的核心功能和绝大部分界面都必须原生实现，那么就没必要用hybrid，比如游戏，美图等，如果只需要原生实现少数几个界面，HTML5也没问题其他的界面，那就可以用hybrid，比如电商app，商品分类，商品列表，商品详情，购物车，订单等界面都可以用HTML5实现，没有问题，效率更高，今天主流的e几乎都是-电商APP（淘宝、京东、天猫等）采用混合开发，混合开发技术已经是电商APP快速迭代运营的技术支撑。(3)功能覆盖全面，用户无需花费精力自行扩展混合开发技术平台。经过这么多年的发展和完善，功能已经非常全面，基本可以涵盖APP开发所需的所有功能。(4)性能体验优化基本达到原生水准。今天，开发人员非常清楚HTML5会出现的性能问题。在混合开发模式下，如果使用HTML5时出现性能问题，我们将使用原生扩展。相反，我们可以合理地使用HTML5技术。因此，现在使用Hybrid技术开发的App，拥有与Naive相同的UI结构和功能扩展，性能已经可以达到Native标准。我们对比分析了一款基于APICloud平台开发的电商APP，从5个方面与淘宝、京东进行对比。测试覆盖所有主流机型，测试时间以秒为单位。测试结果性能基本为零。不同之处。?应用启动速度：测试点击应用图标到首页的时间?导航切换速度：三个应用均为底部导航，切换底部菜单，测试切换时间?打开新页面速度：点击产品列表打开商品详情界面，测试打开新页面时间?调用扩展模块速度：点击二维码按钮打开扫描界面，测试调用Native模块时间?调用打开服务速度：点击语音按钮打开语音识别界面，测试调用开放服务时间（5）完成平台化、组件化和生态开发。目前跨平台技术领域分为两个发展方向：第一个是HTML5+Native混合方向；APICloud和微信小程序属于前者（微信小程序开发虽然使用了自定义标签和样式，但执行前还是需要转换成标准的HTML5）。HTML5+Native混合，也就是我们通常所说的混合开发。这种模式的开发主体是HTML5，但整个APP架构是Native架构：APP的UI布局和产品业务逻辑可以通过HTML5快速实现。开发过程中，涉及到HTML5无法实现或体验不好的功能，使用了Native模块。完成。二是中间语言编译方向；中间语言编译方向，代表产品有谷歌刚刚发布的ReactNative（RN）、Xamarin和Flutter。如何理解中间语言编译？以RN为例，传统的app开发需要开发者使用Android和iOS原生技术——Java、Object-C、C/C++等进行开发，而RN的开发过程需要开发者使用JS对app进行编码和output，但是在app执行的过程中，JS会被映射回Android和iOS的native层去执行。使用JS快速实现编码，转化为原生代码执行。这是中间语言编译的方向。Xamarin需要使用微软自己的语言C#。对于大部分开发者来说，C#的学习成本比较高，Xamarin需要付费，所以目前在国内使用较少。Flutter的开发语言是Dart，是Google发明的一种编程语言。这种语言非常有趣。它的语法类似于C语言，同时也融合了JS和Java的一些设计思想和语法规则。Dart语言之前很少用到，参考资料也不多。开发人员需要一个过程才能开始。事实上，时至今日，许多两种类型的混合开发技术产品已经完成了平台化、组件化、生态化的开发过程，例如：小程序、ReactNative、APICloud等。（6）大规模成功案例已经涌现，成为企业App开发的主流技术。今天占据我们移动桌面的许多应用程序都是使用混合技术开发的。上图中这些App的开发者分享了他们在开发各自产品时，在不同场合使用混合技术的经验。说到这里大家可能会有疑问，这些主流产品中混动技术的占比是多少？它只被个别接口使用吗？其实HTML5在这些APP中的占比还是很高的，包括我们平时非常熟悉的手机端。QQ、58同城、支付宝、淘宝、美团等生活类APP，以及海尔、春秋航空、英特尔、中信证券、VIPKID等大型企业应用。以上，从六个方面对目前的混合开发技术进行了全面的分析。根据Gartner技术成熟度曲线各个阶段的定义，我们可以清楚地看到，如今的混合开发技术正处于“稳定上升期”的后期，即将进入“高峰期”真正的生产”。这一现状也将为行业未来的技术研发、产品投资和技术选择提供重要的决策参考。【作者信息】邹达，现任APICloud联合创始人兼CTO，专注于浏览器及相关中间件技术。参与了多个浏览器引擎、JavaScript引擎、移动中间件引擎的开发。WebApp和NativeApp他都有。丰富的实践经验。多年一线开发经验，了解移动应用开发的前后端技术；热爱新技术，对nodejs、mongodb、redis等有深入了解经验。
