移动开发模式-Native、Hybrid、React、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+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。

脑图地址: http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70

Native App

即原生开发模式,开发出来的是原生程序,不同平台上,Android和iOS的开发方法不同,开发出来的是一个独立的APP,能发布应用商店,有如下优点和缺点

优点
1 直接依托于操作系统,交互性最强,性能最好相比于其它模式的交互,原生APP体验是最优的
2 功能最为强大,特别是在与系统交互中,几乎所有功能都能实现得益于原生是直接依托于系统的,所以可以直接调用官方提供的api,功能最为全面(比如本地资源操作,通知,动画等)

缺点
1 开发成本高,无法跨平台,不同平台Android和iOS上都要各自独立开发Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必须要有各自的开发人员
2 门槛较高,原生人员有一定的入门门槛,相比广大的前端人员而言,较少原生的一个很大特点就是独立,所以不太容易入门,不像web前端一样那么广泛,而且Android,iOS都需要独立学习
3 更新缓慢,特别是发布应用商店后,需要等到审核周期原生应用更新是一个很大的问题,Android中还能直接下载整包APK进行更新,但是iOS中,如果是发布AppStore,必须通过AppStore地址更新,而每次更新都需要审核,所以无法达到及时更新
4 维护成本高同开发一样,项目上线后,维护起来也很为麻烦

Web App

即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问,不是独立APP,无法安装和发布
Web网站一般分两种,MPA(Multi-page Application)和SPA(Single-page Application)。而Web App一般泛指后面的SPA形式开发出的网站(因为可以模仿一些APP的特性),有如下优点和缺点

优点
1 开发成本低,可以跨平台,调试方便web app一般只需要一个前端人员开发出一套代码,然后即可应用于各大主流浏览器(特殊情况可以代码进行下兼容),没有新的学习成本,而且可以直接在浏览器中调试
2 维护成本低同上,如果代码合理,只需要一名前端就可以维护多个web app
3 更新最为快速由于web app资源是直接部署在服务器端的,所以只需要替换服务器端的文件,用户访问是就已经更新了(当然需要解决一些缓存问题)
4 无需安装App,不会占用手机内存通过浏览器即可访问,无需安装,用户就会比较愿意去用

缺点
1 性能低,用户体验差由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好
2 依赖于网络,页面访问速度慢,耗费流量Web App每次访问都需要去服务端加载资源访问,所以必须依赖于网络,而且网速慢时访问速度很不理想,特别是在移动端,如果网站优化不好会无故消耗大量流量
3 功能受限,大量功能无法实现只能使用Html5的一些特殊api,无法调用原生API,所以很多功能存在无法实现情况
4 临时性入口,用户留存率低这既是它的优点,也是缺点,优点是无需安装,确定是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,导致用户很难再次使用
5 如果是一个单独的WebApp由于用户体验差被苹果官方的拒绝上架,苹果官方AppStore发布指导对于Web App我们公司之前也发布过,本地的一个webview直接加在整个web。但是被苹果拒绝上架,当然安卓市场无所谓。拒绝理由。
We noticed that your app only includes links, images, or content aggregated from the Internet with limited or no native iOS functionality. We understand that this content may be curated from the web specifically for your users, but since it does not sufficiently differ from a mobile web browsing experience, it is not appropriate for the App Store.
"我们注意到,您的应用程序仅包含来自互联网聚合的链接,图像或内容,限制或不具有本机iOS功能。 我们了解到,这些内容可能是专门针对用户的网站策划的,但由于它与移动网页浏览体验的差异不大,所以不适用于App Store。"

Hybrid App

即混合开发,也就是半原生半Web的开发模式,有跨平台效果,当然了,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),有如下优点和缺点

优点
1 开发成本较低,可以跨平台,调试方便Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑有Html和JS来完成,而由于最终是放在webview中显示的,所以只需要写一套代码即可,达到跨平台效果,另外也可以直接在浏览器中调试,很为方便
最重要的是只需要一个前端人员稍微学习下JS api的调用即可,无需两个独立的原生人员
一般Hybrid中的跨平台最少可以跨三个平台:Android App,iOS App,普通webkit浏览器
2 维护成本低,功能可复用同上,如果代码合理,只需要一名前端就可以维护多个app,而且很多功能还可以互相复用
3 更新较为自由虽然没有web app更新那么快速,但是Hybrid中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果
4 针对新手友好,学习成本较低这种开发模式下,只需要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发
5 功能更加完善,性能和体验要比起web app好太多因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了
6 部分性能要求的页面可用原生实现这应该是Hybrid模式的最多一个好处了,因为这种模式是原生混合web,所以我们完全可以将交互强,性能要求高的页面用原生写,然后一些其它页面用JS写,嵌入webview中,达到最佳体验

缺点
1 相比原生,性能仍然有较大损耗这种模式受限于webview的性能桎梏,相比原生而言有不少损耗,体验无法和原生相比
2 不适用于交互性较强的app这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)

React Native App

React Native 是Facebook发布的,可以让我们广大开发者使用JavaScript和React开发我们的应用,该提倡组件化开发,也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用,甚至我们可以相关嵌套形成新的组件。
使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。
现阶段Web APP的的体验还是无法达到Native APP的体验,所以这边fackbook更加强调的是“learn once, write everywhere”,应用前端我们使用js和React来开发不同平台的UI,下层核心模块编写复用的业务逻辑代码,提供应用开发效率。
其实很多大公司都已经转React Native开发了,已经很成熟了,

移动开发模式-Native、Hybrid、React、Web App方案的分析比较_第1张图片
很多公司的移动招聘都加上了对React Native的技术要求

React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率。

优点
1 虽然说开发成本大于Hybrid模式,但是小于原生模式,大部分代码可复用相比于原生模式,这种模式是统一用JS写代码,所以往往只需要一名成员投入学习,即可完成跨平台app的开发,而且后续代码封装的好,很多功能可复用
2 性能体验高于Hybrid,不逊色与原生这种模式和Hybrid不一样,Hybrid中的view层实际上还是dom,但是这种模式的view层是虚拟dom,所以性能要高于Hybrid,距离原生差距不大
这种模式可以认为是用JS写原生,即页面用JS写,然后原生通过Bridge技术分析JS,将JS内容单独渲染成原生Android和iOS,所以也就是为什么性能不逊色原生
3 开发人员单一技术栈,一次学习,跨平台开发这种模式是统一由JS编写,有着独特的语法,所以只需要学习一次,即可同时开发Android和iOS
4 社区繁荣,遇到问题容易解决这应该是React Native的很大一个优势,不像Hybrid模式和原生模式一样各自为营,这种模式是Facebook统一发起的,所以有一个统一的社区,里面有大量资源和活跃的人员,对开发者很友好

缺点
1 虽然可以部分跨平台,但并不是Hybrid中的一次编写,两次运行那种,而是不同平台代码有所区别这种模式实际上还是JS来写原生,所以Android和iOS中的原生代码会有所区别,如果需要跨平台,对开发人员有一定要求
当然了,如果发展了有一定时间,组件库够丰富了,那么其实影响也就不大了,甚至会比Hybrid更快
2 开发人员学习有一定成本虽然社区已经比较成熟了,但是一个新的普通前端学习起来还是有一定学习成本的,无法像Hybrid模式一样平滑
参考 http://reactnative.cn/

最终分析

随着React Native的不断壮大,可以毫无保留的说React Native是现在和未来很长一段时间移动开发人员的必备技能。React Native这种模式学习成本较高,所以需要前期投入不少时间才能达到较好水平,但是有了一定水准后,开发起来它的优势就体现出来了,性能不逊色原生,而且开发速度也很快。
同时我们可以关注的是链接-使用React Native的各大app,百度,腾讯,京东包括国外的FaceBook,Instgram等优秀的app都在使用React Native。

我们的愿景
  • 开发成本低
  • 部署方便
  • Native 原生的用户体验
  • 能访问所有的移动端功能
  • 更新迅速
  • 扩展方便

参考链接

Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
对当前主流hybrid app、web app与native app工具的初步比较与分析
H5、React Native、Native应用对比分析
如何评价 React Native
论Web App、Hybrid App以及Native App的设计差异
H5、React Native、Native应用对比分析
HybridApp解决方案No1混合模式(Hybrid)App开发概述
聊聊Web App、Hybrid App与Native App的设计差异
微信小程序,大多数人误解的8个问题

你可能感兴趣的:(移动开发模式-Native、Hybrid、React、Web App方案的分析比较)