HybridApp—HybridApp开发模式介绍和各种开发模式对⽐
什么是Hybrid App
最开的App开发只有原⽣开发这个概念，但⾃从H5⼴泛流⾏后,⼀种效率更⾼的开发模式Hybrid应运⽽⽣，它就是"Hybrid模式"。Hybrid APP是⽬前⼴泛流⾏的⼀种APP开发模式
H5渗⼊APP开发
我们都知道，原⽣APP开发中有⼀个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview)，这个组件可以加载Html⽂件。
在Html5没有兴盛之前，加载的Html往往只能⽤来做⼀些简单的静态资源显⽰，但是H5⼤⾏其道以后,Html5中有很多新增的功能，炫酷的效果，特别是iOS中H5⽀持⼀直都很良好,Android 4.4以上⽀持也⾜够
所以这时候发现可以将⼀些主要的逻辑都⽤H5页⾯来编写，然后原⽣直接⽤webview加载显⽰，这样⼤⼤提⾼了开发效率,⽽且体验也很不错
Hybrid的兴盛
所谓Hybrid，即混合开发，意味着半原⽣半Web，其实在H5兴盛之前,Hybrid模式就已经⽐较成熟了，但是⼀直不愠不⽕(因为系统的⼀些现在以及html本⾝功能的限制)
但是⾃从H5兴盛之后,⼤家发现原来很多功能都可以⽤web来实现，然后原⽣作为容器显⽰
所以为了提⾼开发效率，越来越多的⼈使⽤Hybrid模式进⾏开发，越来越多的Hybrid开发框架，越来越多的前端专职成为Hybrid开发，也就是说Hybrid也随之兴盛起来了
Hybrid定义
前⾯有提到Hybrid这种模式，那么它是怎么样定义的呢？怎么样的开发模式才算是Hybrid模式呢?
Hybrid是半Native半web开发模式
Hybrid模式中，底层功能API均由原⽣容器通过某种⽅式提供，然后业务逻辑由H5页⾯完成，最终原⽣容器加载H5页⾯，完成整个App
成熟的Hybrid模式意味着业务逻辑均由H5实现
⼀款成熟的Hybrid框架，意味着各种类型的api都很完善，那么这时候⼏乎所有与业务相关的逻辑都是放在H5页⾯中的，原⽣只作为容器存在
成熟的Hybrid模式可复⽤性⾮常⾼，可以跨平台开发
手机上可以打html与css的app成熟的Hybrid框架，那么原⽣只会提供底层API，也就是说所有的业务是H5完成，不管是什么项⽬，业务只由H5实现
这时候就可以发现，业务代码是可以跨平台的，也就是说，开发⼀次，就可以和各⾃原⽣容器结合，组成两种原⽣安装包了，达到了跨平台开发效果
Hybrid App的类型划分
上⾯提到过Hybrid的定义，但实际上，根据Native和web的混合程度,Hybrid也可以再次细分为多种类型
多View混合型
这种模式主要特点是将webview作为Native中的⼀个view组件，当需要的时候在独⽴运⾏显⽰，也就是说主体是Native,web技术只是起来⼀些补充作⽤
这种模式⼏乎就是原⽣开发，没有降低什么难度，到了16年⼏乎已经没⼈使⽤了
单View混合型
这种模式是在同⼀个view内，同时包括Native view和webview(互相之间是层叠的关系),⽐如⼀些应⽤会⽤H5来加载百度地图作为整个页⾯的主体内容，然后再webview之上覆盖⼀些原⽣的view,⽐如搜索什么的
这种模式开发完成后体验较好，但是开发成本较⼤,⼀般适合⼀些原⽣⼈员使⽤
Web主体型
这种模式算是传统意义上的Hybrid开发，很多Hybrid框架都是基于这种模式的,⽐如PhoneGap,AppCan,Html5+等
这种模式的⼀个最⼤特点是,Hybrid框架已经提供各种api，打包⼯具，调试⼯具，然后实际开发时不会使⽤到任何原⽣技术，实际上只会使⽤H5和js来编写，然后js可以调⽤原⽣提供的api来实现⼀些拓展功能
往往程序从⼊⼝页⾯，到每⼀个功能都是h5和js完成的。理论上来说，这种模式应该是最佳的⼀种模式(因为⽤H5和js编写最为快速，能够调⽤原⽣api，功能够完善)
但是由于⼀些webview⾃⾝的限制，导致了这种模式在性能上损耗不⼩，包括在⼀些内存控制上的不⾜，所以导致体验要逊⾊于原⽣不少。当然了，如果能解决体验差问题，这种模式应当是最优的(⽐如
由于iOS对H5⽀持很好,iOS上的体验就很不错)
多主体共存型（灵活型）
这种模式的存在是为了解决web主体型的不⾜，这种模式的⼀个最⼤特点是，原⽣开发和h5开发共存，也就是说，对于⼀些性能要求很⾼的页⾯模块,⽤原⽣来完成，对于⼀些通⽤型模块,⽤h5和js来完成
这种模式通⽤有跨平台特性,⽽且⽤户体验号，性能⾼，不逊⾊与原⽣，但是有⼀个很⼤的限制就是，采⽤这种模式需要⼀定的技术前提
也就是说这种模式不同于web主体型可以直接⽤第三⽅框架，这种模式⼀般是⼀些有技术⽀持的公司⾃⼰实现的，包括H5和原⽣的通信，原⽣API提供，容器的⼀些处理全部由原⽣⼈员来完成
所以说，使⽤这种技术的前提是得有专业的原⽣⼈员(包括Android,iOS)以及业务开发⼈员(原⽣开发负责功能，前端解决简单通⽤h5功能)
Hybrid⾯临的挑战
⽐如Facebook推出的React Native⽅案，这是Facebook在放弃h5后⾃⾏推出⼀个'反H5⽅案',⼀句话总结就是:⾥⾯可以⽤JS来完整的写⼀个原⽣应⽤
⽐如推出的⼩程序(16年9⽉份内测)，这也是⼀个主导的'反H5⽅案',⼀句话总结就是:⾥⾯可以同JS+⾃制的UI⽅案来写⼀个类似于原⽣的应⽤，只不过这个应⽤不是发布到App Store中,⽽是发布到中
像以上技术都不断的在冲击着Hybrid模式(当然Native也会有影响)，不过都很推崇JS(话说很多前端猿⼀直希望JS⼀统天下)
Native、Hybrid、React Native、Web App⽅案的分析⽐较
⽬前的主流应⽤程序有四⼤类型:Native App、Hybrid App、React Native App、Web App。本⽂分别对这⼏种⽅案做⼀些分析对⽐
Native App
即传统的原⽣APP开发模式,Android基于Java语⾔，底层调⽤Google的 API;iOS基于OC或者Swift语⾔，底层调⽤App官⽅提供的API。体验最好
直接依托于操作系统，交互性最强，性能最好，相⽐于其它模式的交互，原⽣APP体验是最优的
功能最为强⼤，特别是在与系统交互中,⼏乎所有功能都能实现。得益于原⽣是直接依托于系统的，所以可以直接调⽤官⽅提供的api，功能最为全⾯(⽐如本地资源操作，通知，动画等)
开发成本⾼,⽆法跨平台，不同平台Android和iOS上都要各⾃独⽴开发。Android上基于Java开发,iOS上基于OC或Swift开发，相互之间独⽴，必须要有各⾃的开发⼈员
门槛较⾼，原⽣⼈员有⼀定的⼊门门槛，相⽐⼴⼤的前端⼈员⽽⾔，较少。原⽣的⼀个很⼤特点就是独⽴，所以不太容易⼊门，不像web前端⼀样那么⼴泛,⽽且Android,iOS都需要独⽴学习
更新缓慢，特别是发布应⽤商店后，需要等到审核周期。原⽣应⽤更新是⼀个很⼤的问题,Android中还能直接下载整包APK进⾏更新，但是iOS 中，如果是发布AppStore，必须通过AppStore地址更新,⽽每次更新都需要审核，所以⽆法达到及时更新
维护成本⾼。同开发⼀样，项⽬上线后，维护起来也很为⿇烦
Web App
即移动端的⽹站，将页⾯部署在服务器上，然后⽤户使⽤各⼤浏览器访问。⼀般泛指 SPA(Single Page Application)模式开发出的⽹站。体验最差。不是独⽴APP,⽆法安装和发布
Web⽹站⼀般分两种,MPA(Multi-page Application)和SPA(Single-page Application)。⽽Web App⼀般泛指后⾯的SPA形式开发出的⽹站(因为可以模仿⼀些APP的特性)，有如下优点和缺点
开发成本低，可以跨平台，调试⽅便。web app⼀般只需要⼀个前端⼈员开发出⼀套代码，然后即可应⽤于各⼤主流浏览器(特殊情况可以代码进⾏下兼容)，没有新的学习成本,⽽且可以直接在浏览器中调试
维护成本低同上，如果代码合理，只需要⼀名前端就可以维护多个web app
更新最为快速。由于web app资源是直接部署在服务器端的，所以只需要替换服务器端的⽂件,⽤户访问是就已经更新了(当然需要解决⼀些缓存问题)
⽆需安装App，不会占⽤⼿机内存。通过浏览器即可访问,⽆需安装,⽤户就会⽐较愿意去⽤
性能低,⽤户体验差。由于是直接通过的浏览器访问，所以⽆法使⽤原⽣的API，操作体验不好
依赖于⽹络，页⾯访问速度慢，耗费流量。Web App每次访问都需要去服务端加载资源访问，所以必须依赖于⽹络,⽽且⽹速慢时访问速度很不理想，特别是在移动端，如果⽹站优化不好会⽆故消耗⼤量流量
功能受限,⼤量功能⽆法实现。只能使⽤Html5的⼀些特殊api,⽆法调⽤原⽣API，所以很多功能存在⽆法实现情况
临时性⼊⼝,⽤户留存率低。这既是它的优点，也是缺点，优点是⽆需安装，确定是⽤完后有时候很难再到，或者说很难专门为某个web app留存⼀个⼊⼝，导致⽤户很难再次使⽤
Hybrid App
即混合开发，由Native通过JSBridge等⽅法提供统⼀的API，然后⽤Html5+JS来写实际的逻辑，调⽤API，这种模式下，由于Android,iOS的API⼀般有⼀致性,⽽且最终的页⾯也是在webview中显⽰，有有跨平台效果
开发成本较低，可以跨平台，调试⽅便Hybrid模式下，由原⽣提供统⼀的API给JS调⽤，实际的主要逻辑有Html和JS来完成,⽽由于最终是放在webview中显⽰的，所以只需要写⼀套代码即可，达到跨平台效果，另外也可以直接在浏览器中调试，很为⽅便
最重要的是只需要⼀个前端⼈员稍微学习下JS api的调⽤即可,⽆需两个独⽴的原⽣⼈员。⼀般Hybrid中的跨平台最少可以跨三个平
台:Android App,iOS App，普通webkit浏览器
维护成本低，功能可复⽤。同上，如果代码合理，只需要⼀名前端就可以维护多个app,⽽且很多功能还可以互相复⽤
更新较为⾃由。虽然没有web app更新那么快速，但是Hybrid中也可以通过原⽣提供api，进⾏资源主动下载，达到只更新资源⽂件，不更新
apk(ipa)的效果
针对新⼿友好，学习成本较低。这种开发模式下，只需要前端⼈员关注⼀些原⽣提供的API，具体的实现⽆需关⼼，没有新的学习内容，只需要前端⼈员即可开发
功能更加完善，性能和体验要⽐起web app好太多。因为可以调⽤原⽣api，所以很多功能只要原⽣提供出就可以实现，另外性能也⽐较接近原⽣了
部分性能要求的页⾯可⽤原⽣实现。这应该是Hybrid模式的最多⼀个好处了，因为这种模式是原⽣混合web，所以我们完全可以将交互强，性能要求⾼的页⾯⽤原⽣写，然后⼀些其它页⾯⽤JS写，嵌⼊webview中，达到最佳体验
相⽐原⽣，性能仍然有较⼤损耗。这种模式受限于webview的性能桎梏，相⽐原⽣⽽⾔有不少损耗，体验⽆法和原⽣相⽐
不适⽤于交互性较强的app。这种模式的主要应⽤是:⼀些新闻阅读类，信息展⽰类的app；但是不适⽤于⼀些交互较强或者性能要求较⾼的app(⽐如动画较多就不适合)
React Native App
Facebook发起的开源的⼀套新的APP开发⽅案，使⽤JS+部分原⽣语法来实现功能。初次学习成本较⾼，但是在⼊门后，经过良好的封装也能够实现⼤部分的跨平台。⽽且体验很好。
虽然说开发成本⼤于Hybrid模式，但是⼩于原⽣模式,⼤部分代码可复⽤。相⽐于原⽣模式，这种模式是统⼀⽤JS写代码，所以往往只需要⼀名成员投⼊学习，即可完成跨平台app的开发,⽽且后续代码封装的好，很多功能可复⽤
性能体验⾼于Hybrid，不逊⾊与原⽣。这种模式和Hybrid不⼀样,Hybrid中的view层实际上还是dom，但是这种模式的view层是虚拟dom，所以性能要⾼于Hybrid，距离原⽣差距不⼤
这种模式可以认为是⽤JS写原⽣，即页⾯⽤JS写，然后原⽣通过Bridge技术分析JS，将JS内容单独渲染成原⽣Android和iOS，所以也就是为什么性能不逊⾊原⽣
开发⼈员单⼀技术栈,⼀次学习，跨平台开发。这种模式是统⼀由JS编写，有着独特的语法，所以只需要学习⼀次，即可同时开发Android和iOS
社区繁荣，遇到问题容易解决。这应该是React Native的很⼤⼀个优势，不像Hybrid模式和原⽣模式⼀样各⾃为营，这种模式是Facebook统⼀发起的，所以有⼀个统⼀的社区,⾥⾯有⼤量资源和活跃的⼈员，
对开发者很友好
虽然可以部分跨平台，但并不是Hybrid中的⼀次编写，两次运⾏那种,⽽是不同平台代码有所区别这种模式实际上还是JS来写原⽣，所以Android 和iOS中的原⽣代码会有所区别，如果需要跨平台，对开发⼈员有⼀定要求当然了，如果发展了有⼀定时间，组件库够丰富了，那么其实影响也就不⼤了，甚⾄会⽐Hybrid更快
开发⼈员学习有⼀定成本。虽然社区已经⽐较成熟了，但是⼀个新的普通前端学习起来还是有⼀定学习成本的,⽆法像Hybrid模式⼀样平滑
各⼤开发模式直观对⽐
Native App Web App Hybrid App React Native App 原⽣功能体验优秀差良好接近优秀
渲染性能⾮常快慢接近快快
是否⽀持设备底层访
问
⽀持不⽀持⽀持⽀持
⽹络要求⽀持离线依赖⽹络⽀持离线(资源存本地情况)⽀持离线
更新复杂度⾼(⼏乎总是通过应⽤商店更
新)
低(服务器端直接更新)较低(可以进⾏资源包更新)较低(可以进⾏资源包更新)
编程语⾔Android(Java),iOS(OC/Swift)js+html+css3js+html+css3主要使⽤JS编写，语法规则JSX
社区资源丰富(Android,iOS单独学习)丰富(⼤量前端资源)有局限(不同的Hybrid相互独
⽴)
丰富(统⼀的活跃社区)
上⼿难度难(不同平台需要单独学习)简单(写⼀次,⽀持不同平台访
问)
简单(写⼀次，运⾏任何平台)中等(学习⼀次，写任何平台)
开发周期长短较短中等
开发成本昂贵便宜较为便宜中等
跨平台不跨平台所有H5浏览器Android,iOS,h5浏览器Android,iOS
APP发布App Store Web服务器App Store App Store
如何选择开发模式
⽬前有多种开发模式，那么我们平时开发时如何选择⽤哪种模式呢？如下
选择纯Native App模式的情况
性能要求极⾼，体验要求极好，不追求开发效率。⼀般属于吹⽑求疵的那种级别了，因为正常来说如果要求不是特别⾼，会有Hybrid
选择Web App模式的情况
不追求⽤户体验和性能，对离线访问没要求。正常来说，如果追求性能和体验，都不会选⽤web app
没有额外功能，只有⼀些信息展⽰。因为web有限制，很多功能都⽆法实现，所以有额外功能就只能弃⽤这种⽅案了
选择Hybrid App模式的情况
⼤部分情况下的App都推荐采⽤这种模式这种模式可以⽤原⽣来实现要求⾼的界⾯，对于⼀些⽐较通⽤型，展⽰型的页⾯完全可以⽤web来实现，达到跨平台效果，提升效率
当然了,⼀般好⼀点的Hybrid⽅案，都会把资源放在本地的，可以减少⽹络流量消耗
选择React Native App模式的情况
追求性能，体验，同时追求开发效率,⽽且有⼀定的技术资本，舍得前期投⼊
React Native这种模式学习成本较⾼，所以需要前期投⼊不少时间才能达到较好⽔平，但是有了⼀定⽔准后，开发起来它的优势就体现出来了，性能不逊⾊原⽣,⽽且开发速度也很快
另类的app⽅案
除了以上的⼏种常见app开发模式，其实还有⼀些其它的类似⽅案
微⽹页
⽐如在进⾏⽹页开发时，可以调⽤⼀些的特殊api，这其实就是算是的Hybrid模式，实质上仍然是在浏览器中(只不过是腾讯的X5内核)
当然了，在这⽅⾯做了很多限制,⽐如权限认证等等，所以导致开发起来效果不是很完美。这⾥不再赘述其功能
⼩程序
⼩程序是新推出的⼀种新的app⽅案,2016年9⽉开始进⾏内测,2016年11⽉准备全⾯⾯向开发者
需要注意的是，这种模式是“反HTML5”的，相当于是提供的⼀套封闭开发模式，有⾃⼰的语法和IDE，有的类似于iOS开发的感觉。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。