Native Apps、Web Apps
Native Apps 指的是远程程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强,需要用户下载安装使用
优点:
- 打造完美的用户体验
- 性能稳定
- 操作速度快,上手流畅
- 访问本地资源(通讯录,相册)
- 设计出色的动效,转场
- 拥有系统界别的贴心通知或提醒
- 用户留存率高
缺点:
- 分发成本高(不同平台有不同的开发语言和界面适配)
- 维护成本高(例如一款App已更新至V5版本,但仍有用户在使用V2,V3,V4版本,需要更多的开发人员)
- 更新缓慢,根据不同平台,提交-审核-上线等等不同的流程,需要经过的流程较复杂
Web Apps
指采用HTML5语言写出的App,不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用,基本上可以说是触屏版的网页应用
优点:
- 开发成本低
- 更新快
- 更新无需通知用户,不需要手动升级
- 能跨多个平台和终端
缺点:
- 临时性的入口
- 无法获取系统级别的通知,提醒,动效等等
- 用户留存率低
- 设计受限制诸多
- 体验较差
Hybrid Apps 混合开发(H5+原生):如:微信
Hybrid Apps 指的是半原生半Web的混合类App。需要下载安装,看上去类似Native Apps,但只有很少的UI Web View ,访问的内容是web。例如:store 里的新闻类APP ,视频类APP普遍采取的是Native的框架,Web的内容
优点:
- 兼容了Native Apps 和 Web Apps 的优点
- 可以通过jsBridge直接访问Native API
- 能够轻松使用跨平台Web技术
- 测试方便
缺点:
APP的Web部分可能是驻留在服务器上的网页,封装到App代码中,存储在设备本地。
- Hybrid Apps 代码驻留在服务器上,摈弃了任何离线可用性,因为设备与网络没有连接时,无法访问设备。(已有解决方案:本地留存)
- 把Web代码封装到APP里面可以提高性能和可访问性,但是不允许远程更新。
嵌入形态:
参数对比:
实现技术:js、css,html
React
React.js& React Native
联系
- UI使用的都是JSX,逻辑都是使用了JavaScript
- 都应用了虚拟DOM(Virtual DOM)
区别
- 对于Web
Apps,虚拟DOM仍然要转换成实际的DOM - 对于Android和iOS,虚拟DOM映射成本地控件
React Native
优势:
- 基于React Native 的App在运行效率上接近Native App
- 具备混合开发模式(Hybrid)的两个优点:热更新和跨平台
Native Apps、Web Apps的更多相关文章
- Native App、Web App 还是Hybrid App?
一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...
- Native App、Web App 还是Hybrid App
Native App.Web App 还是Hybrid App? 技术 标点符 1年前 (2014-05-09) 3036℃ 0评论 一.什么是Native App? Native App即原生应用, ...
- Native App、Web App 还是Hybrid App?(转)
一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...
- native app、web app、hybrid app、react-native 区别
Native App:指的是原生应用程序,一般依托于操作系统,有很强的交互. 技术:Objective-C Java Native App开发的优点 提供最佳的 户体验 拥有系统级别的通知或提醒 可以 ...
- [WebView其中一项研究]:Web Apps基本介绍
今天,我们开始了解WebView,以及Web Apps发展,从主要内容Android实际的例子来解释正式文件和后续. (博客地址:http://blog.csdn.net/developer_jian ...
- 什么是 Native、Web App、Hybrid、React Native 和 Weex?(转载)
什么是 Native.Web App.Hybrid.React Native 和 Weex? 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- Native、Web App、Hybrid、React Native(简称RN)、Weex 间的异同点。
App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统, ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
随机推荐
- 解题:POI 2018 Prawnicy
题面 网上好像都是堆的做法啊......我这个不算离散化是$O(n)$的说(虽然有一坨vector可能不开O2会爆炸) 题目即是让我们求是否存在一个最长的是不少于$k$个给出区间子集的区间,如果存在输 ...
- react native 热更新
一.安装codepush服务 npm install code-push-cli -gcode-push -v 二.创建codepush账号 code-push registercode-push l ...
- AI技术说:人工智能相关概念与发展简史
作为近几年的一大热词,人工智能一直是科技圈不可忽视的一大风口.随着智能硬件的迭代,智能家居产品逐步走进千家万户,语音识别.图像识别等AI相关技术也经历了阶梯式发展.如何看待人工智能的本质?人工智能的飞 ...
- 设置texture
//获取内部资源贴图 public void setInsideTexture() { Texture2D texture = Resources.Load(texture_url) as Textu ...
- js 30分钟倒计时
<html> <head> <meta charset="UTF-8"> <title></title> </he ...
- Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
环境 阿里云 centos7 node v8.11.3 npm 5.6.0 错误 npm update 解决 ping registry.npmjs.org 发现https://registry.np ...
- java基础-关键词super与this
转发:itbooks this是调用自己本身的构造函数,而super是调用父类中的构造函数. 这两个关键词是用在构造函数中的,这两个关键词的设计也是对封装特性的一种考虑,避免编写不必要的重复代码. c ...
- HTML跳转
<!DOCTYPE html><HTML><HEAD> <TITLE> HolyMirror </TITLE> <meta http- ...
- JS函数大全 莫名其妙找到的
1 .document.write(""); 输出语句 2 .JS中的注释为// 3 .传统的HTML文档顺序是:document->html->(head,body) ...
- React Native 入门笔记一 -- Windows下基本环境配置
一.准备工作 首先,需要安装nodejs,可以从nodejs官网下载,注意,React Native 要求node版本在4.0或以上:否则会出错,我建议把node版本升到最新版本,防止后面出现各种莫名 ...