前言
写在前面的话
20170219更新
另外，最近阿里开源的weex也有越来越火热的趋势。补上部分weex的说明。
20161004更新 初稿发布
前置文章
阅读本文之前，建议先阅读下列前置文章
楔子
目前的主流应用程序有四大类型:Native App、Hybrid App、React Native App、Web App。本文分别对这几种方案做一些分析对比
几种APP开发模式
概述
当前的APP开发模式注意有以下几大类型:
- Native App
- 即传统的原生APP开发模式,Android基于Java语言,底层调用Google的 API;iOS基于OC或者Swift语言,底层调用App官方提供的API。体验最后。
- Web App
- 即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)模式开发出的网站。体验最差。
- Hybrid App
- 即混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,所有有跨平台效果
- React Native App
- Facebook发起的开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。
- Weex app
- Weex最底层的原理是和React-Native相同的，就是将JS代码渲染成原生组件
- 只不过在业务代码层面，Weex和React-Native有差别
更多参考脑图地址 http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70
Native App
即原生开发模式,开发出来的是原生程序,不同平台上,Android和iOS的开发方法不同,开发出来的是一个独立的APP,能发布应用商店,有如下优点和缺点
优点
- 直接依托于操作系统,交互性最强,性能最好
- 相比于其它模式的交互,原生APP体验是最优的
- 功能最为强大,特别是在与系统交互中,几乎所有功能都能实现
- 得益于原生是直接依托于系统的,所以可以直接调用官方提供的api,功能最为全面(比如本地资源操作,通知,动画等)
缺点
- 开发成本高,无法跨平台,不同平台Android和iOS上都要各自独立开发
- Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必须要有各自的开发人员
- 门槛较高,原生人员有一定的入门门槛,相比广大的前端人员而言,较少
- 原生的一个很大特点就是独立,所以不太容易入门,不像web前端一样那么广泛,而且Android,iOS都需要独立学习
- 更新缓慢,特别是发布应用商店后,需要等到审核周期
- 原生应用更新是一个很大的问题,Android中还能直接下载整包APK进行更新,但是iOS中,如果是发布AppStore,必须通过AppStore地址更新,而每次更新都需要审核,所以无法达到及时更新
- 维护成本高
- 同开发一样,项目上线后,维护起来也很为麻烦
Web App
即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问,不是独立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
即混合开发,也就是半原生半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,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发
- 功能更加完善,性能和体验要比起web app好太多
- 因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了
- 部分性能要求的页面可用原生实现
- 这应该是Hybrid模式的最多一个好处了,因为这种模式是原生混合web,所以我们完全可以将交互强,性能要求高的页面用原生写,然后一些其它页面用JS写,嵌入webview中,达到最佳体验
缺点
- 相比原生,性能仍然有较大损耗
- 这种模式受限于webview的性能桎梏,相比原生而言有不少损耗,体验无法和原生相比
- 不适用于交互性较强的app
- 这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)
React Native App
Facebook发起的开源的一套新的APP开发方案,Facebook在当初深入研究Hybrid开发后,觉得这种模式有先天的缺陷,所以果断放弃,转而自行研究,后来推出了自己的“React Native”方案,不同于H5,也不同于原生,更像是用JS写出原生应用,有如下优点和缺点
其实很多大公司都已经都有研究React Native开发了,整体技术方案已经相对比较成熟了
优点
- 虽然说开发成本大于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模式一样平滑
- 不要小瞧这一点，对于一些
传统的大规模低阶程序员的公司而言，这成为了选用React-Native的最大一个障碍，因为无法要求每一个人都能够会这个开发，推广起来有很大问题 - 当然，对于一些相对精英公司来说，这点倒是影响不大
Weex App
weex是阿里开源出来的一套APP开发方案，底层原理和React-Native一致，都是通过核心引擎将代码编译成原生组件。达到原生APP的体验效果。性能体验要优于Hybrid模式。
它与Hybrid相比，大部分优缺点都是React-Native中有提到的，但与React-Native相比，它又有如下的优缺点:
优点
- 一套代码跨平台，只要遵循特定的语法规则，完全可以达到一套代码多个平台运行
- 核心就是在web环境下，将源码编译成web中显示的Html dom对象等，在原生环境下编译成原生组件。
- 而React-Native中，它是JS写原生代码，不同平台代码是不一样的，虽然有大部分可以复用，但并不是完全一套代码多个平台。
- 语法接近H5，基本用法和H5一致，特别是后来改成了支持VUE.JS后，使用起来更是很方便。
缺点
- 目前来说，社区相比React-Native不足，是一个比较大的缺点
- 目前相比React-Native是新生，坑更多一点
分析
各大开发模式直观对比
以下是各大模式的直观对比分析
如何选择开发模式
目前有多种开发模式,那么我们平时开发时如何选择用哪种模式呢？如下
选择纯Native App模式的情况
- 性能要求极高,体验要求极好,不追求开发效率
- 一般属于吹毛求疵的那种级别了,因为正常来说如果要求不是特别高,会有Hybrid
选择Web App模式的情况
- 不追求用户体验和性能,对离线访问没要求
- 正常来说,如果追求性能和体验,都不会选用web app
- 没有额外功能,只有一些信息展示
- 因为web有限制,很多功能都无法实现,所以有额外功能就只能弃用这种方案了
选择Hybrid App模式的情况
- 大部分情况下的App都推荐采用这种模式
- 这种模式可以用原生来实现要求高的界面,对于一些比较通用型,展示型的页面完全可以用web来实现,达到跨平台效果,提升效率
- 当然了,一般好一点的Hybrid方案,都会把资源放在本地的,可以减少网络流量消耗
选择React Native App模式(或weex模式)的情况
- 追求性能,体验,同时追求开发效率,而且有一定的技术资本,舍得前期投入
- React Native这种模式学习成本较高,所以需要前期投入不少时间才能达到较好水平,但是有了一定水准后,开发起来它的优势就体现出来了,性能不逊色原生,而且开发速度也很快
另类的app方案
除了以上的几种常见app开发模式,其实还有一些其它的类似方案
微网页
比如在进行微信网页开发时,可以调用一些微信的特殊api,这其实就是算是微信的Hybrid模式,实质上仍然是在浏览器中(只不过是腾讯的X5内核)
当然了,微信在这方面做了很多限制,比如权限认证等等,所以导致开发起来效果不是很完美。这里不再赘述其功能
微信小程序
微信小程序是微信新推出的一种新的app方案,2016年9月开始进行内测,2016年11月准备全面面向开发者
需要注意的是,这种模式是“反HTML5”的,相当于是微信提供的一套封闭开发模式,有自己的语法和IDE,有的类似于iOS开发的感觉。具体也不赘述,请参考引用来源中的文章
其它
当然除此外,还有一些其它的模式,比如“百度直达号”,”流应用”等等,这里不再赘述
附录
原文地址
原文在我个人博客上面 Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
参考来源
