浅谈Native、Web App、Hybrid、RN 和 Weex优劣-程序员宅基地

技术标签: ViewUI  java  前端  移动开发  

一句话概要

Native、Web App、Hybrid、React Native(后面以RN简称)、Weex 间的异同点,后期同步 小程序PWA

App常用开发模式【简介】

此处App为应用,application,并非我们通常讲的手机App
常用的几种APP开发模式-脑图

Native App

传统的原生App开发模式,有iOS和aOS两大系统,需要各自语言开发各自App。

优点:性能和体验都是最好的
缺点:开发和发布成本高
举个栗子网易管家App (Tab1,Tab2)
应用技术:Swift,OC,Java

WebApp

移动端的网站,常被称为H5应用,说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 SPA(Single Page Application)模式开发出的网站,与MPA(Multi-page Application,再后面做介绍)对应。

优点:开发和发布成本最低
缺点:性能和体验不能讲是最差的,但也受到浏览器处理能力的限制,多次下载同样会占用用户一定的流量
举个栗子网易管家APP(Tab3)
应用技术:ReactJS,RegularJS,VueJS等等

Hybrid App

混合模式移动应用,介于Web App、Native App这两者之间的App开发技术,兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”(百度百科解释)

主要的原理是,由Native通过JSBridge等方法提供统一的API,然后用Html+Css实现界面,JS来写逻辑,调用API,最终的页面在Webview中显示,这种模式下,Android、iOS的API一般有一致性,Hybrid App所以有跨平台效果。

优点:开发和发布都比较方便,效率介于Native App、Web App之间
缺点:学习范围较广,需要原生配合
举个栗子:FanReact,我爱我家App,东方航空App,富国基金-富国钱包App
应用技术:PhoneGap,AppCan,Wex5等

React Native App

Facebook发现Hybrid App存在很多缺陷和不足,于是发起开源的一套新的App开发方案RN。使用JSX语言写原生界面,js通过JSBridge调用原生API渲染UI交互通信。

优点:效率体验接近Native App,发布和开发成本低于Native App
缺点:学习有一定成本,且文档较少,免不了踩坑
举个栗子:Facebook、Youtube、Discord、QQ、百度等等

Weex App

阿里巴巴开发团队在RN的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,2016年4月正式开源,并在v2.0版本官方支持Vue.js,与RN分庭抗礼。

优点:单页开发模式效率极高,热更新发包体积小,并且跨平台性更强
缺点:刚刚起步,文档欠缺;社区没有RN活跃,功能尚不健全,暂不适合完全使用Weex开发App
举个栗子:淘宝、天猫、阿里云、优酷、闲鱼、饿了么等

继续剖析

Native App

Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。一般使用的开发语言为Java、C++、Objective-C。

自iOS和Android这两个的手机操作系统发布以来,在互联网界从此就多了一个新的名词:App意为运行在智能的移动终端设备第三方应用程序)。

Native App因为位于平台层上方,向下访问和兼容的能力会比较好一些,可以支持在线或离线,消息推送或本地资源访问,摄像拨号功能的调取。但是由于设备碎片化,App的开发成本要高很多,维持多个版本的更新升级比较麻烦,用户的安装门槛也比较高。但是比较乐观的是,AppStore培养了一种比较好的用户付费模式,所以在Apple的生态圈里,开发者的盈利模式是一种明朗状态,其他market也在往这条路上靠拢。

优势

1、相比于其它模式,提供最佳的用户体验,最优质的用户界面,最华丽的交互
2、针对不同平台提供不同体验
3、可节省带宽成本,打开速度更快
4、功能最为强大,特别是在与系统交互中,几乎所有功能都能实现

劣势

1、门槛高,原生开发人才稀缺,至少比前端和后端少,开发环境昂贵
2、无法跨平台,开发的成本比较大,各个系统独立开发
3、发布成本高,需要通过store或market的审核,导致更新缓慢
4、维持多个版本、多个系统的成本比较高,而且必须做兼容
5、应用市场逐渐饱和,怎么样抢占用户时间需要投入大量时间和金钱,这也导致“僵尸”App的增多

WebApp

说到Web App 不少人会联想到 WAP,或者有人认为,WAP就是WebApp,其实不然。

WebApp 与 WAP 最直接的区别就是功能层面。WAP更侧重使用网页技术在移动端做展示,包括文字、媒体文件等。而Web App更侧重“功能”,是使用网页技术实现的App。总的来说,Web App就是运行于网络和标准浏览器上,基于网页技术开发实现特定功能的应用。

响应式的大部分技术都是为实现WebApp能适配多类客户端而设计的。

Web网站一般分两种,MPA(Multi-page Application)和SPA(Single-page Application)。而WebApp一般泛指SPA形式开发出的网站。这样更像是一个App。

优势

1、可以跨平台,调试方便
2、无需安装,不会占用手机内存,而且更新速度最快
3、不存在多版本问题,维护成本低
4、临时入口,可以随意嵌入

劣势

1、依赖于网络,第一次访问页面速度慢,耗费流量
2、受限于手机和浏览器性能,用户体验相较于其他模式最差
3、功能受限,大量移动端功能无法实现
4、入口强依赖于第三方浏览器,且只能以URL地址的形式存在,导致用户留存率低(优点即缺点)

Hybird App

混合开发,也就是半原生半Web的开发模式,由原生提供统一的API给JS调用,实际的主要逻辑有Html和JS来完成,最终是放在webview中显示的,所以只需要写一套代码即可达到跨平台效果,另外也可以直接在浏览器中调试,很方便。最重要的是只需要一个前端人员稍微学习下JS api的调用即可。

Hybird App 的较早实践者是PhoneGap,随后遍地开花,如Titanium、Salama、WeX5、Kerkee和国内的AppCan,项目各有各的实现方式,大致的原理基本相同。有幸在AppCan上海总部参与过一段时间的学习研究,如下大致简介:

AppCan是基于HTML5技术的Hybird跨平台移动应用开发工具。开发者利用Html5+Css3+JavaScript技术,通过AppCan IDE集成开发系统、云端打包器等,快速开发出Android、iOS、WP平台上的移动应用。

AppCan的平台构成

在实际的APP开发中,AppCan可以完成大部分的工作量,如图示:

AppCan将App底层复杂的原生功能封装在引擎、插件中,开发者仅需调用接口、打包编译,就可以获得原生功能;灵活的插件扩展机制。

开发者可以像开发WebApp一样开发app的视觉UI,以及绝大部分的交互,当需要使用原生功能(如摄像头,陀螺仪等功能)时,只需要调用官方的API就可以轻松实现Native的效果。至于JS和Native的通信,常用的有URL监听和绝大部分Hybrid厂商使用的JSBridge通信,两者原理相近。

JsBridge通信简图

关于JsBridge的原理详解,可见blog.csdn.net/xiangzhihon…

在Hybird概念盛行的时候,国内外各大公司也参与了探索,国外代表有Facebook、google、亚马逊,国内的有腾讯、阿里巴巴、网易等,慢慢的他们发现Hybird严重受限于WebView的解析渲染效率,于是Facebook开始了他的类原生的研究探索。

React Native App

请移驾 【笔记】React Native 快速入门笔记

Weex App

请移驾网易严选App感受Weex开发

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34331102/article/details/87945318

智能推荐

hive学习笔记之四:分区表-程序员宅基地

文章浏览阅读373次,点赞4次,收藏4次。笔者已经把面试题和答案整理成了面试专题文档《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门即可获取!链图片转存中…(img-4xkqGpj1-1712104936689)][外链图片转存中…(img-6VtfOlP7-1712104936689)][外链图片转存中…(img-WoiUrEg2-1712104936690)][外链图片转存中…(img-W72fxn2J-1712104936690)]

数字图像处理使用计算机对,数字图像处理的应用现状及发展方向-程序员宅基地

文章浏览阅读5.6k次。随着计算机技术的不断发展,数字图像处理技术的应用也愈发广阔。图像是人们接受、表达、传递信息的快捷方式,通过计算机程序的运用,将图像用数字的形式表现出来,可以更加全面的控制图像处理,在全球各个尖端领域都有发展的前景。【关键词】数字 图像处理 计算机技术1 数字图像处理技术的优点数字图像处理是指利用数字硬件与计算机,将图像信息转换为电子信号,进行相应的数学运算,用以提高图像的实用性。数字图像处理精确度..._谈谈你对数字图像处理课程的理解,及其数字图像处理用途和使用场合的认识

stl map遍历和删除的方法_vs2008 stl map查询equal_range(),并删除-程序员宅基地

文章浏览阅读6.1k次。for(;iter!=mapStudent.end();){ if((iter->second)>=aa) { //满足删除条件,删除当前结点,并指向下面一个结点 mapStudent.erase(iter++); } else { //_vs2008 stl map查询equal_range(),并删除

rank函数python_Python pandas.DataFrame.rank函数方法的使用-程序员宅基地

文章浏览阅读1.4k次。DataFrame.rank(self: ~FrameOrSeries,axis=0,method: str = 'average',numeric_only: Union[bool,NoneType] = None,na_option: str = 'keep',ascending: bool = True,pct: bool = False)→ ~FrameOrSeries计算..._python dataframe rank

彻底扒光 通过智能路由器拆解看其本质-程序员宅基地

文章浏览阅读1.7k次。可以看到很多联发科的MT芯片摘自:https://net.zol.com.cn/531/5312999.html彻底扒光 通过智能路由器拆解看其本质2015-07-23 00:40:00[中关村在线 原创] 作者:陈赫|责编:白宁收藏文章 分享到 评论(24)关注智能路由器拆解的朋友们注意啦!我们已经将这五款产品彻底扒开,将主板的真容展现在了大家的眼前。网友们可以看见这些智能路由器主板的做工和用料,我们还为网友们展示了主要的电子元器件,供大家品评观赏。..._路由器拆解

Java--深入JDK和hotspot底层源码剖析Thread的run()、start()方法执行过程_jdk的源码hotspot跟jdk是分开的-程序员宅基地

文章浏览阅读2.1k次,点赞101次,收藏78次。【学习背景】今天主要是来了解Java线程Thread中的run()、start()两个方法的执行有哪些区别,会给出一个简单的测试代码样例,快速理解两者的区别,再从源码层面去追溯start()底层是如何最终调用Thread#run()方法的,个人觉得这样的学习不论对面试,还是实际编程来说都是比较有帮助的。进入正文~学习目录一、代码测试二、源码分析2.1 run()方法2.2 start()方法三、使用总结一、代码测试执行Thread的run()、start()方法的测试代码如下:public_jdk的源码hotspot跟jdk是分开的

随便推点

SM4国密算法原理及python代码实现_根据sm4_s计算sm4_sbox_t-程序员宅基地

文章浏览阅读6.6k次,点赞13次,收藏54次。SM4.0(原名SMS4.0)是中华人民共和国政府采用的一种分组密码标准,由国家密码管理局于2012年3月21日发布。相关标准为“GM/T 0002-2012《SM4分组密码算法》(原SMS4分组密码算法)”。在商用密码体系中,SM4主要用于数据加密,其算法公开,分组长度与密钥长度均为128bit,加密算法与密钥扩展算法都采用32轮非线性迭代结构,S盒为固定的8比特输入8比特输出。_根据sm4_s计算sm4_sbox_t

DMA映射 dma_addr_t-程序员宅基地

文章浏览阅读617次。DMA映射一个DMA映射是要分配的DMA缓冲区与为该缓冲区生成的、设备可访问地址的组合。DMA映射建立了一个新的结构类型——dma_addr_t来表示总线地址。dma_addr_t类型的变量对驱动程序是不透明的, 唯一允许的操作是将它们传递给DMA支持例程以及设备本身。根据DMA缓冲区期望保留的时间长短,PCI代码有两种DMA映射: 1) 一致性映射; 2) 流式DMA映射(推荐)。..._dma_addr_t

XSS跨站脚本攻击漏洞_小明是公司的开发工程师,发现公司网站存在xss漏洞,通过修改javascript代码进-程序员宅基地

文章浏览阅读1k次。XSS(跨站脚本攻击)是一种常见的网络安全漏洞,它允许攻击者在网站中植入恶意的脚本代码,当其他用户访问该网站时,这些脚本代码会在用户的浏览器中执行。这可能会导致严重的安全后果,比如窃取用户的敏感信息,欺骗用户,或者在用户的浏览器中执行恶意操作。XSS漏洞通常出现在网站中输入数据未经过滤或者不当过滤的情况下,攻击者可以通过向网站发送带有恶意脚本的数据,使得脚本在用户的浏览器中执行。在反射型XSS中,攻击者向网站发送一个带有恶意脚本的URL,当其他用户点击该URL时,恶意脚本就会在用户的浏览器中执行。_小明是公司的开发工程师,发现公司网站存在xss漏洞,通过修改javascript代码进

软件体系结构_采用结构化技术开发的软件是否具有体系结构?-程序员宅基地

文章浏览阅读2k次。 软件体系结构是具有一定形式的结构化元素,即构件的集合,包括处理构件、数据构件和连接构件。处理构件负责对数据进行加工,数据构件是被加工的信息,连接构件把体系结构的不同部分组组合连接起来。这一定义注重区分处理构件、数据构件和连接构件,这一方法在其他的定义和方法中基本上得到保持。 一、软件体系结构的定义  虽然软件体系结构已经在软件工程领域中有着广泛的应用,但迄今为止还没有一个被大家所公认的_采用结构化技术开发的软件是否具有体系结构?

springbbot运行无法编译成功,找不到jar包报错:Error:(3, 46) java: 程序包org.springframework.context.annotation不存在-程序员宅基地

文章浏览阅读1k次,点赞2次,收藏2次。文章目录问题描述:解决方案:问题描述:提示:idea springbbot运行无法编译成功,找不到jar包报错E:\ideaProject\demokkkk\src\main\java\com\example\demo\config\WebSocketConfig.javaError:(3, 46) java: 程序包org.springframework.context.annotation不存在Error:(4, 46) java: 程序包org.springframework.conte_error:(3, 46) java: 程序包org.springframework.context.annotation不存在

react常见面试题_recate面试-程序员宅基地

文章浏览阅读6.4k次,点赞6次,收藏36次。1、redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。常见的中间件:redux-logger:提供日志输出redux-thunk:处理异步操作..._recate面试