Web App或夭折，Hybrid App才是新世界的王

客官°小女子只卖身不卖艺 2022-06-06 09:56 193阅读 0赞

## Web App或夭折，Hybrid App才是新世界的王 ##

[徐珂铭][Link 1]   2012-06-29 10:09    [暂无评论][Link 2]

[![Native-vs.-Mobil][]][Native-vs.-Mobil 1]

【编者按】本文作者[@徐珂铭][Link 3]，一位看好Html5的移动互联网的从业人士。喜爱玩技术，会点JAVA、HTML及CSS，有自己的想法及姑且能表达想法的文字，因此有了自己的文章。

基于HTML5的Web App在移动端接受实用性检验后，开发者从热情转为观望。这时候Hybrid App作为现阶段HTML5技术的落脚点正悄然兴起！Native App和Web App的论战加入了一个新的角色Hybrid App。

**但究竟什么是Hybrid App？如何定义？**

汽车有混合动力Hybrid，移动应用同样也有混合模式。Hybrid App（混合模式移动应用）兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。很多人不知道市场上一些主流移动应用都是基于Hybrid App的方式开发，比如国外有Facebook、国内有百度搜索等。但究竟什么是Hybrid App？如何定义？

> Hybrid App：Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.

我们来拆解一下里面的含义：

1、mobile application：Hybrid App就是一个移动应用

2、both browser-supported language and computer language：同时使用网页语言与程序语言编写

3、available through application distribution platforms：通过应用商店进行分发

4、a target device：区分目标平台

5、install to run：用户需要安装使用

综合一下就是：“Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码，所以开发成本和难度比Native App要小很多。**因此说，Hybrid App兼具了Native App的所有优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。**

## **Hyrbid App为什么会兴起？** ##

Hybrid App的兴起是现阶段移动互联网产业的一种偶然。移动互联网的热潮刮起后，众多公司前赴后继的进入。但是很快发现移动应用的开发人员太少，所以导致疯狂的人才争夺。市场机制下移动应用开发人才的待遇扶摇直上，最终变成众多企业无法负担养一个具备跨平台开发能力的专业移动应用开发团队。而HTML5的出现让Web App露出曙光，HTML5开发移动应用的跨平台和廉价优势让众多想进入移动互联网领域的公司开始心动。可是当下基于HTML5的Web App更是雾里看花，在用户入口习惯、分发渠道和应用体验这三个核心问题没解决之前，Web App也很难得以爆发。正是在这样是机缘巧合下，基于HTML5低成本跨平台开发优势又兼具Native App特质的Hybrid App技术杀入混战，并且很快吸引了众人的目光。**大幅的降低了移动应用的开发成本，可以通过现有应用商店模式发行，在用户桌面形成独立入口**等等这些，让Hybrid App成为解决移动应用开发困境不错的选择，也成为现阶段Web App的代言人。Hybrid App像刺客一样，在Native App和Web App混战之时，偶然间的在移动应用开发领域占有了一席之地。

## **Hybrid App是如何实现网页语言与程序语言的混合？谁占主体？** ##

Hybrid App通常分为三种类型：多View混合型，单View混合型，Web主体型。

多View混合型：

即Native View和Web View独立展示，交替出现。目前常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候，将WebView当成一个独立的View（Activity）运行起来，在WebView内完成相关的展示操作。这种移动应用主体通常是Native App，Web技术只是起到补充作用。开发难度和Native App基本相当。

单View混合型：

即在同一个View内，同时包括Native View和Web View。互相之间是覆盖（层叠）的关系。这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。如百度搜索为代表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。

Web主体型：

即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。国外的appMobi、PhoneGap国内的AppCan和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发。appMobi和PhoneGap除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid。而AppCan除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题，接近Native App的体验。

多View混合型，单View混合型，Web主体型优劣势对比

<table style=""> 
 <tbody style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline"> 
 <tr style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline"> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> &nbsp;</td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> <span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline">多View混合型 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> <span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline">单View混合型 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> <span style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline">Web主体型 </td> 
 </tr> 
 <tr style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline"> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 常见主体 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> Native </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> Native </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> Web </td> 
 </tr> 
 <tr style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline"> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 开发成本 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 中 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 高 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 低 </td> 
 </tr> 
 <tr style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline"> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 用户体验 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 良 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 优 </td> 
 <td style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:10px; padding-bottom:6px; padding-left:0px; border-top-width:1px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:16px; font:inherit; vertical-align:baseline; border-top-style:solid; border-top-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font:inherit; vertical-align:baseline; line-height:1.8"> 差 </td> 
 </tr> 
 </tbody> 
</table>

从分析可见，Hybrid App中的Web主体型只要能够解决用户体验差的问题，就可以变成最佳Hybrid App解决方案类型。

## **Hybrid App的瓶颈与未来** ##

国内外Hybrid App的开发框架众多。如何选择又成为一个难题。下面对开发者比较关心的集中知名跨平台开发移动应用中间件进行列表和对比，以便选择最适合您的移动应用中间件。

[![E4_B8_AD_E9_97_B4_E4_BB_B6_E5_AF_B9_E6_AF_94-805x1024.jpg][]][E4_B8_AD_E9_97_B4_E4_BB_B6_E5_AF_B9_E6_AF_94-805x1024.jpg 1]

[PhoneGap][]是相对比较早进入公众视线的一种选择。但是，开发者简单的基于PhoneGap来开发移动应用肯定会发现结果和Web App比较差的用户体验类似。这也是为什么基于PhoneGap有实用性的移动应用主要集中在iOS上。可是PhoneGap这种现状弱化了HTML5的跨平台价值。

AppCan在技术架构上和PhoneGap类似是Web主体型中间件，但是通过结合了一些原生交互效果能够达到iOS、Android平台都比较一致的用户体验。但是相比PhoneGap的开源，AppCan相对封闭的路线显得过于谨慎。

Titanium是一种基于翻译机制的跨平台中间件，能够开发出具有Native体验的移动应用，但是因为翻译机制的限制导致移动应用开发不能像真正的[HTML5][]开发一样灵活。哪怕一个按钮也不能像普通HTML一样来编写，而必须按照Titanium约定的特定格式。

Hybrid App这个领域虽然还处于比较初期的阶段，但是已经有很多优秀的公司和技术团队在致力于跨平台开发移动应用中间件技术的研究，给了开发者众多选择。开发者可以根据实际的项目需求来选择中间件。Web App虽被浏览器厂商和搜索引擎公司所推崇，但存在用户体验差、盈利模式不明确等现阶段无法解决的问题，或最终夭折。Hybrid App正在被越来越多的公司和开发者所认同，势必会成为新世界的王。

**（[徐珂铭][Link 1] 供[雷锋网][Native-vs.-Mobil 1]专稿，转载请注明来自雷锋网及作者，并链回本页)**

[Link 1]: http://www.leiphone.com/author/%e5%be%90%e7%8f%82%e9%93%ad
[Link 2]: http://www.leiphone.com/web-appvs-hybrid-app.html#respond
[Native-vs.-Mobil]: /images/20220606/480a8b9a1282489a93ca47960bae2e20.png
[Native-vs.-Mobil 1]: http://www.leiphone.com/web-appvs-hybrid-app.html
[Link 3]: http://weibo.com/xukevim
[E4_B8_AD_E9_97_B4_E4_BB_B6_E5_AF_B9_E6_AF_94-805x1024.jpg]: /images/20220606/5cf1827bbd58482390588867cc566a52.png
[E4_B8_AD_E9_97_B4_E4_BB_B6_E5_AF_B9_E6_AF_94-805x1024.jpg 1]: http://www.leiphone.com/wp-content/uploads/2012/06/%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%AF%B9%E6%AF%94.jpg
[PhoneGap]: http://leiphone.com/tag/phonegap
[HTML5]: http://leiphone.com/tag/html5