Native、Hybrid、React、Web App方案的分析比较css
前人栽树,后台乘凉,本文参考了如下来源html
阅读本文前，建议先阅读如下文章前端
目前的主流应用程序有四大类型:Native App、Hybrid App、React Native App、Web App。本文分别对这几种方案作一些分析对比react
当前的APP开发模式注意有如下四大类型:android
即传统的原生APP开发模式,Android基于Java语言,底层调用Google的 API;iOS基于OC或者Swift语言,底层调用App官方提供的API。体验最后。css3
即移动端的网站,将页面部署在服务器上,而后用户使用各大浏览器访问。通常泛指 SPA(Single Page Application)模式开发出的网站。体验最差。web
即混合开发,由Native经过JSBridge等方法提供统一的API,而后用Html5+JS来写实际的逻辑,调用API,这种模式下,因为Android,iOS的API通常有一致性,并且最终的页面也是在webview中显示,全部有跨平台效果编程
Facebook发起的开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,可是在入门后,通过良好的封装也可以实现大部分的跨平台。并且体验很好。小程序
脑图地址: http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70微信小程序
即原生开发模式,开发出来的是原生程序,不一样平台上,Android和iOS的开发方法不一样,开发出来的是一个独立的APP,能发布应用商店,有以下优势和缺点
相比于其它模式的交互,原生APP体验是最优的
得益于原生是直接依托于系统的,因此能够直接调用官方提供的api,功能最为全面(好比本地资源操做,通知,动画等)
Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必需要有各自的开发人员
原生的一个很大特色就是独立,因此不太容易入门,不像web前端同样那么普遍,并且Android,iOS都须要独立学习
原生应用更新是一个很大的问题,Android中还能直接下载整包APK进行更新,可是iOS中,若是是发布AppStore,必须经过AppStore地址更新,而每次更新都须要审核,因此没法达到及时更新
同开发同样,项目上线后,维护起来也很为麻烦
即移动端的网站,将页面部署在服务器上,而后用户使用各大浏览器访问,不是独立APP,没法安装和发布
Web网站通常分两种,MPA(Multi-page Application)和SPA(Single-page Application)。而Web App通常泛指后面的SPA形式开发出的网站(由于能够模仿一些APP的特性),有以下优势和缺点
web app通常只须要一个前端人员开发出一套代码,而后便可应用于各大主流浏览器(特殊状况能够代码进行下兼容),没有新的学习成本,并且能够直接在浏览器中调试
同上,若是代码合理,只须要一名前端就能够维护多个web app
因为web app资源是直接部署在服务器端的,因此只须要替换服务器端的文件,用户访问是就已经更新了(固然须要解决一些缓存问题)
经过浏览器便可访问,无需安装,用户就会比较愿意去用
因为是直接经过的浏览器访问,因此没法使用原生的API,操做体验很差
Web App每次访问都须要去服务端加载资源访问,因此必须依赖于网络,并且网速慢时访问速度很不理想,特别是在移动端,若是网站优化很差会无端消耗大量流量
只能使用Html5的一些特殊api,没法调用原生API,因此不少功能存在没法实现状况
这既是它的优势,也是缺点,优势是无需安装,肯定是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,致使用户很难再次使用
即混合开发,也就是半原生半Web的开发模式,有跨平台效果,固然了,实质最终发布的仍然是独立的原生APP(各类的平台有各类的SDK),有以下优势和缺点
Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑有Html和JS来完成,而因为最终是放在webview中显示的,因此只须要写一套代码便可,达到跨平台效果,另外也能够直接在浏览器中调试,很为方便
最重要的是只须要一个前端人员稍微学习下JS api的调用便可,无需两个独立的原生人员
通常Hybrid中的跨平台最少能够跨三个平台:Android App,iOS App,普通webkit浏览器
同上,若是代码合理,只须要一名前端就能够维护多个app,并且不少功能还能够互相复用
虽然没有web app更新那么快速,可是Hybrid中也能够经过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果
这种开发模式下,只须要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只须要前端人员便可开发
由于能够调用原生api,因此不少功能只要原生提供出就能够实现,另外性能也比较接近原生了
这应该是Hybrid模式的最多一个好处了,由于这种模式是原生混合web,因此咱们彻底能够将交互强,性能要求高的页面用原生写,而后一些其它页面用JS写,嵌入webview中,达到最佳体验
这种模式受限于webview的性能桎梏,相比原生而言有很多损耗,体验没法和原生相比
这种模式的主要应用是:一些新闻阅读类,信息展现类的app;可是不适用于一些交互较强或者性能要求较高的app(好比动画较多就不适合)
Facebook发起的开源的一套新的APP开发方案,Facebook在当初深刻研究Hybrid开发后,以为这种模式有先天的缺陷,因此果断放弃,转而自行研究,后来推出了本身的“React Native”方案,不一样于H5,也不一样于原生,更像是用JS写出原生应用,有以下优势和缺点
其实不少大公司都已经转React Native开发了,已经很成熟了
相比于原生模式,这种模式是统一用JS写代码,因此每每只须要一名成员投入学习,便可完成跨平台app的开发,并且后续代码封装的好,不少功能可复用
这种模式和Hybrid不同,Hybrid中的view层实际上仍是dom,可是这种模式的view层是虚拟dom,因此性能要高于Hybrid,距离原生差距不大
这种模式能够认为是用JS写原生,即页面用JS写,而后原生经过Bridge技术分析JS,将JS内容单独渲染成原生Android和iOS,因此也就是为何性能不逊色原生
这种模式是统一由JS编写,有着独特的语法,因此只须要学习一次,便可同时开发Android和iOS
这应该是React Native的很大一个优点,不像Hybrid模式和原生模式同样各自为营,这种模式是Facebook统一发起的,因此有一个统一的社区,里面有大量资源和活跃的人员,对开发者很友好
这种模式实际上仍是JS来写原生,因此Android和iOS中的原生代码会有所区别,若是须要跨平台,对开发人员有必定要求
固然了,若是发展了有必定时间,组件库够丰富了,那么其实影响也就不大了,甚至会比Hybrid更快
虽然社区已经比较成熟了,可是一个新的普通前端学习起来仍是有必定学习成本的,没法像Hybrid模式同样平滑
如下是各大模式的直观对比分析
| Native App | Web App | Hybrid App | React Native App | |
|---|---|---|---|---|
| 原生功能体验 | 优秀 | 差 | 良好 | 接近优秀 |
| 渲染性能 | 很是快 | 慢 | 接近快 | 快 |
| 是否支持设备底层访问 | 支持 | 不支持 | 支持 | 支持 |
| 网络要求 | 支持离线 | 依赖网络 | 支持离线(资源存本地状况) | 支持离线 |
| 更新复杂度 | 高(几乎老是经过应用商店更新) | 低(服务器端直接更新) | 较低(能够进行资源包更新) | 较低(能够进行资源包更新) |
| 编程语言 | Android(Java),iOS(OC/Swift) | js+html+css3 | js+html+css3 | 主要使用JS编写,语法规则JSX |
| 社区资源 | 丰富(Android,iOS单独学习) | 丰富(大量前端资源) | 有局限(不一样的Hybrid相互独立) | 丰富(统一的活跃社区) |
| 上手难度 | 难(不一样平台须要单独学习) | 简单(写一次,支持不一样平台访问) | 简单(写一次,运行任何平台) | 中等(学习一次,写任何平台) |
| 开发周期 | 长 | 短 | 较短 | 中等 |
| 开发成本 | 昂贵 | 便宜 | 较为便宜 | 中等 |
| 跨平台 | 不跨平台 | 全部H5浏览器 | Android,iOS,h5浏览器 | Android,iOS |
| APP发布 | App Store | Web服务器 | App Store | App Store |
目前有多种开发模式,那么咱们平时开发时如何选择用哪一种模式呢？以下
通常属于吹毛求疵的那种级别了,由于正常来讲若是要求不是特别高,会有Hybrid
正常来讲,若是追求性能和体验,都不会选用web app
由于web有限制,不少功能都没法实现,因此有额外功能就只能弃用这种方案了
这种模式能够用原生来实现要求高的界面,对于一些比较通用型,展现型的页面彻底能够用web来实现,达到跨平台效果,提高效率
固然了,通常好一点的Hybrid方案,都会把资源放在本地的,能够减小网络流量消耗
React Native这种模式学习成本较高,因此须要前期投入很多时间才能达到较好水平,可是有了必定水准后,开发起来它的优点就体现出来了,性能不逊色原生,并且开发速度也很快
除了以上的几种常见app开发模式,其实还有一些其它的相似方案
好比在进行微信网页开发时,能够调用一些微信的特殊api,这其实就是算是微信的Hybrid模式,实质上仍然是在浏览器中(只不过是腾讯的X5内核)
固然了,微信在这方面作了不少限制,好比权限认证等等,因此致使开发起来效果不是很完美。这里再也不赘述其功能
微信小程序是微信新推出的一种新的app方案,2016年9月开始进行内测,2016年11月准备全面面向开发者
须要注意的是,这种模式是“反HTML5”的,至关因而微信提供的一套封闭开发模式,有本身的语法和IDE,有的相似于iOS开发的感受。具体也不赘述,请参考引用来源中的文章
固然除此外,还有一些其它的模式,好比“百度直达号”,"流应用"等等,这里再也不赘述