web app 、native app、hybrid app比较

产品新人学习路 关注

2017.06.04 14:52* 字数 1887 阅读 11476评论 1喜欢 15

之前做讨论的时候,提出了这么一个问题,互联网产品的载体有多种,比如native app,web app,微信公众号,小程序等,那么这些不同形式的载体有什么区别点呢。当时只有一个特别简单的理解,后来又去查了一下,本文就先分析一下 web app 与 native app之间的区别点。

本文的结构主要分为以下部分:
1.app的分类
2.每类app的定义,明确各类app具体是什么
3.各类app的优缺点
4.具体开发过程中,到底该采用哪种类型的app

1.app的分类
大致可以分为这3种:

  • native app(原生app)
  • web app
  • hybrid app(混合app)
 

2.三类app的定义
**2.1 native app **
中文名称为“原生app”
来看一下百度百科的定义:基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,一般开发的语言为Java、C++等。在使用上的具体表现就是,手机桌面上的图标点进去基本就是native app了。

2.2 web app
仍然看一下百度百科的定义:基于web的系统和应用,运行于网络和浏览器之上,目前多采用h5标准开发。在使用上的具体表现是,手机浏览器点击进入,会有一些应用的小图标,这些小图标在点击后,在浏览器里加载的页面 跟你直接下载一个app后打开的页面是相同的,这些小图标代表的就是web app。

2.3 hybrid app
中文名称是“混合app”
顾名思义,就是 native app 与 web app的混合。在native app里内置浏览器,合适的功能页面采用网页的形式呈现。比如京东的某些营销页面,今日头条的某些新闻页面、微信的腾讯新闻的内容页面等。

3.各类app的优缺点
3.1native app
优点:

  • 提供最佳用户体验,最优质的用户界面,流畅的交互
  • 可以访问本地资源
  • 可以调用移动硬件设备,比如摄像头、麦克风等

缺点:

  • 开发成本高。每种移动操作系统都需要独立的开发项目,针对不同平台提供不同体验;
  • 发布新版本慢。下载是用户控制的,很多用户不愿意下载更新(比如说,版本发布到了3.0,但还是有很多1.0的用户,你可能就得继续维护1.0版本的API)
  • 应用商店发布审核周期长。安卓平台大概要1~3天,而iOS平台需要的时间更长

3.2 web app
优点:

  • 不需要安装包,节约手机空间
  • 整体量级轻,开发成本低
  • 不需要用户进行手动更新,由应用开发者直接在后台更新,推送到用户面前的都是全新版本,更便于业务的开展
  • 基于浏览器,可以跨平台使用

缺点:

  • 页面跳转费力,不稳定感更强。在网速受到限制时,很多时候出现卡顿或者卡死现象,交互效果受到限制
  • 安全性相对较低,数据容易泄露或者被劫持

3.3 Hybrid app
这类app集合了上面两种app各自的优势:
(下面优势点 参考 点击此处

  • 在实现更多功能的前提下,使得app安装包不至于过大
  • 在应用内部打开web网页,省去了跳转浏览器的麻烦
  • 主要功能区相对稳定下,增加的功能区采用web 形式,使得迭代更加方便
  • web页面在用户设置不同的网络制式时会以不同的形式呈现(以微信朋友圈为例,在数据流量下,设置APNS为WAP时,微信订阅号内容将屏蔽图片和视频。这样就能为用户省去一部分流量,整个页面阅读就不那么友好了)

另外,为什么有些原生app还会做web app呢?
以下图为例,这是我的手机浏览器自带的几个web app的图标

 
web app示例

有这么几点原因:

  • 数据可以被搜索引擎的爬虫抓到,并进行索引。如果产品只有一个app,那么它的入口独立,但同时数据也是封闭的。如果用户从搜索引擎查找的话,是找不到相关信息的。所以做成web app,可以被搜索引擎找到
  • 用户碎片时间使用,例如一些黏性不高的应用,比如 移动搜索、网址导航等

4.具体开发过程中,到底该采用哪种类型的app
参考 pmcaff上的 大家公司的app是用原生做的还是h5呢?
本文将做一下整理:
不同的页面情况选择不同的开发方式

  • 4.1 如果app中出现了大段文字(如新闻、攻略等),并且格式比较丰富(如加粗、字体多样等),采用H5较好。原因:原生开发对解析json字符串格式不是很友好
  • 4.2 如果讲究app反应速度(含页面切换流畅性),采用原生开发。原因:H5本质上是网页,换网页的时候,基本要加载整个页面,就像一个浏览器打开一个新的网页一样,比较慢,而原生系统只需要加载变化的部分
  • 4.3 如果app对有无网络、网络优劣敏感(譬如有离线操作、在线操作),则采用原生开发。虽然H5可以做到,但是比较敏感
  • 4.4 如果app要频繁地调用硬件设备(比如摄像头、麦克风等),则采用原生开发,这样支持硬件更多,调用速度更快,H5望尘莫及
  • 4.5 如果app用户常见页面频换(如淘宝首页的各种营销活动),采用H5,维护起来更容易
  • 4.6 如果预算有限(H5开发一套可在安卓、iOS、黑莓等跨平台使用)、不在乎用户体验、不在乎加载速度,肯定是H5

另:
短期活动,专题营销类的页面居多的,可以选择原生app搭建框架,详细页面采用H5,便于活动的随时修改和管理
主要业务流程方面,选择原生app开发,有更好的用户体验,也可以更方便的拓展其他功能

web app 、native app、hybrid app比较的更多相关文章

  1. 【Hybrid App】关于Hybrid App技术解决方案的选择

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...

  2. OnSen UI结合AngularJs打造”美团"APP"附近”页面 --Hybrid App

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_near/ 2.核心代码 near.html: <ons-page id=&q ...

  3. OnSen UI结合AngularJs打造”美团"APP"订单”页面 --Hybrid App

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_order/ 2.核心代码 order.html: <ons-page id= ...

  4. 聊聊Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  5. 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

    编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...

  6. Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  7. 聊聊Web App、Hybrid App与Native App的设计差异(转)

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  8. [转帖]聊聊Web App、Hybrid App与Native App的设计差异

    聊聊Web App.Hybrid App与Native App的设计差异 https://www.cnblogs.com/zhuiluoyu/p/6056672.html 编者按:这3类主流应用你都了 ...

  9. 转: 跨终端Web之Hybrid App

    转:  http://www.infoq.com/cn/articles/hybrid-app 编者按:InfoQ开设新栏目“品味书香”,精选技术书籍的精彩章节,以及分享看完书留下的思考和收获,欢迎大 ...

  10. 单纯觉得是篇好文——跨终端Web之Hybrid App

    [reference]http://www.infoq.com/cn/articles/hybrid-app#theCommentsSection 编者按:InfoQ开设新栏目“品味书香”,精选技术书 ...

随机推荐

  1. bind智能DNS + bindUI管理系统

    bind UI 管理系统 https://github.com/cucker0/BindUI # bind安装 cd /usr/local/src wget http://ftp.isc.org/is ...

  2. 大数据框架对比:Hadoop、Storm、Samza、Spark和Flink--容错机制(ACK,RDD,基于log和状态快照),消息处理at least once,exactly once两个是关键

    分布式流处理是对无边界数据集进行连续不断的处理.聚合和分析.它跟MapReduce一样是一种通用计算,但我们期望延迟在毫秒或者秒级别.这类系统一般采用有向无环图(DAG). DAG是任务链的图形化表示 ...

  3. maven默认本地仓库

    本地仓库是远程仓库的一个缓冲和子集,当你构建Maven项目的时候,首先会从本地仓库查找资源,如果没有,那么Maven会从远程仓库下载到你本地仓库.这样在你下次使用的时候就不需要从远程下载了.如果你所需 ...

  4. 2019.4.11 一题 XSY 1551 ——广义后缀数组(trie上后缀数组)

    参考:http://www.mamicode.com/info-detail-1949898.html (log2) https://blog.csdn.net/geotcbrl/article/de ...

  5. 不同路径 II

    一个机器人位于一个 m x n 网格的左上角 (起始点标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角. 现在考虑网格中有障碍物.那么从左上角到右下角将会有多 ...

  6. cat命令详解

    命令cat cat 命令用于连接文件并打印到标准输出设备上 语法格式: cat [-AbeEnstTuv] [--help] [--version] fileName 参数说明: -n 或 --num ...

  7. c#:$用法

    为什么会出现$符号,c#6.0才出现的新特性 var s = string.Fromat("{0}+{1}={2}",12,23,12+23) 用起来必须输入string.From ...

  8. Spring Cloud(Dalston.SR5)--Eureka 常用配置

    配置参数 默认值 说明 服务注册中心配置 Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean eu ...

  9. 基于redis 3.x搭建集群环境

    由于我团队开发的在线坐席系统,即将面对线上每周3000W的下行投放客户,产品的咨询量可能会很大,基于前期,200W的投放时,前10分钟,大概800问题量,平均一个客户大概8个问题,也就是说每分钟10个 ...

  10. MySQL的瑞士军刀

    这里主要讲mysql运维中的一些主要工具,这些工具可能大家都用过,特别是系统管理员或者做linux服务器维护的同学可能都知道这些小工具,这里讲得会比较多一些,除了系统监控的小工具,还包括一些mysql ...