Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较

威尔we 等级 444 0 0

说明

Native、Hybrid、React、Web App方案的分析比较

前言

参考来源

前人栽树,后台乘凉,本文参考了以下来源

前置技术要求

阅读本文前,建议先阅读以下文章

楔子

目前的主流应用程序有四大类型: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+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。

脑图地址: 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模式一样平滑

参考 http://reactnative.cn/

分析

各大开发模式直观对比

以下是各大模式的直观对比分析

对比表格

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

如何选择开发模式

目前有多种开发模式,那么我们平时开发时如何选择用哪种模式呢?如下

选择纯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开发的感觉。具体也不赘述,请参考引用来源中的文章

其它

当然除此外,还有一些其它的模式,比如“百度直达号”,"流应用"等等,这里不再赘述

收藏
评论区

相关推荐

2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()
弱类型 在JS中变量类型由所引用的值决定 var web "helloWorld"; console.log(typeof web); //string web 99; console.log(typeof web); //number web {}; console.log(typeof web); //object 变量提升
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
Android动态更新APP图标
但凡一款用户量有一定的规模之后,运营都会在逢年过节的时候做一些活动来提高日活,促销商品等。所以为了配合活动,我们开发也需要在App启动图标上做出活动的效果,换一个活动图标,而且还在不额外发布版本的情况下。 效果演示图: 实现步骤 1.首先在AndroidManifest中创建一个activity的别名,用于替换启动页的ac
Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较
说明 Native、Hybrid、React、Web App方案的分析比较 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app、web app与native app工具的初步比较与分析
iOS开发:后台运行以及保持程序在后台长时间运行
第一部分 1.先说说iOS 应用程序5个状态:停止运行应用程序已经终止,或者还未启动。不活动应用程序处于前台但不再接收事件(例如,用户在app处于活动时锁住了设备)。活动app处于“使用中”的状态。后台app不再屏幕上显示,但它仍然执行代码。挂起app仍然驻留内存但不再执行代码。按下Home键时,app从活动状态转入后台,绝大部分app通
uni-app开发 经验和技巧总结
## 前言uni-app 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等**多个平台**。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。## 1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
Web APP UI一致性设计
前言做前端开发一段时间后,你会不会发现自己在持续的做着页面重复开发的工作,后面甚至干脆是CtrlC、CtrlV操作。你可能会说,那就使用组件啊!的确,通过抽取公用视图,创建子组件的方式确实可以提升代码复用度。上面是回答是基于你
面向初学者的 React 路由-React Router的完整指南!
因此,您正在尝试学习React.js。也许您甚至已经在其中构建了几个简单的项目。无论您是新开发人员还是有一定经验的人,都可能会发现自己必须开发具有不同页面和路线的Web应用程序。那就是React Router发挥作用的时候。什么是React Router?React Router提供了一种在React或React Native应用程序中实现路由的简便方法。入
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
IOS 某电商App签名算法解析(二) Frida RPC调用
一、目标Android下用frida来做rpc调用计算签名,我们已经玩的很熟练了。今天介绍在IOS下的玩法。要点如下: 参数类型确认 NSDictionary NSArray等ObjectC对象的构造和复制 ObjectC 类方法和对象方法的调用 附送福利, ObjectC的nil 参数如何构造 二、步骤 参考Android下的玩法参照 [某段子App协议分
Js可以写桌面应用端?
1、下载nw.jshttps://nwjs.io/最好下载sdk版本。2、解压打开安装包下载完之后,解压打开图中的「app文件夹」是我自己创建的,你也需要自己创建一个,里面放你项目文件。「app文件夹」中一般放一个index.html(页面展示),另外还需要创建一个package.json文件(参数配置):         "name":  "first 
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术
全靠这份Android知识点PDF大全,月薪30K
第一阶段:Android 基础知识回顾: 回顾Android 开发编程,深入理解Android系统原理和层次结构,深入分析Handler源码和原理; 回顾Java,C/C++,Kotlin、dart 在Android开发中必用的语言,熟悉一下几种语言混淆后的特性; 回顾Android IPC和JNI的底层原理和热更新技术回顾Native开发要点,使用C++结