移动端研发技术的进化历程

移动端研发技术

        移动端研发技术主要分为原生开发和跨平台开发。本章主要介绍一下移动开发技术的过去、当下和未来,一步一步介绍移动技术的进化历程。


原生开发

原生应用程序是指某一个移动平台(比如iOS或Android)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。

比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序;而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。

原生开发有以下主要优势:

  • 可访问平台全部功能(GPS、摄像头);
  • 速度快、性能高、可以实现复杂动画及绘制,整体用户体验好;

主要缺点:

  • 平台特定,开发成本高;不同平台必须维护不同代码,人力研发成本随之变大;
  • 内容固定,动态化弱,大多数情况下,有新功能更新时只能发版;

在移动互联网发展初期,业务场景并不复杂,原生开发还可以应对产品需求迭代。 但近几年,随着物联网时代到来、移动互联网高歌猛进,日新月异,在很多业务场景中,传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在:

  • 动态化内容需求增大;当需求发生变化时,纯原生应用需要通过版本升级来更新内容,但应用上架、审核是需要周期的,这对高速变化的互联网时代来说是很难接受的,所以,对应用动态化(不发版也可以更新应用内容)的需求就变的迫在眉睫。
  • 业务需求变化快,开发成本变大;由于原生开发一般都要维护Android、iOS两个开发团队,版本迭代时,无论人力成本,还是测试成本都会变大。

总结一下,纯原生开发主要面临动态化和开发成本两个问题,而针对这两个问题,诞生了一些跨平台的动态化框架。

跨平台技术

针对原生开发面临的问题,业界一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架(注意,本书中所指的“跨平台”若无特殊说明,即特指 Android 和 iOS 两个平台),根据其原理,主要分为三类:

  • H5 + 原生(Cordova、Ionic、微信小程序)
  • JavaScript 开发 + 原生渲染 (React Native、Weex)
  • 自绘UI + 原生 (Qt for mobile、Flutter)

Hybrid混合开发

将 App 中需要动态变动的内容通过HTML5(简称 H5)来实现,通过原生的网页加载控件WebView 来加载。 H5 + 原生 的开发模式为混合开发 ,App我们称之为混合应用或 Hybrid App ,如果一个应用的大多数功能都是 H5 实现的话,我们称其为 Web App 。

优点:

混合开发中,H5 部分是可以随时改变而不用发版,动态化需求能满足;同时,由于 H5 代码只需要一次开发,就能同时在 Android 和 iOS 两个平台运行,这也可以减小开发成本。

缺点:

混合开发中,H5代码是运行在 原生WebView 中,其 JavaScript 依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。且性能体验不佳,对于复杂用户界面或动画,WebView 有时会不堪重任。

在此,我们需要提一下小程序,目前国内各家公司小程序应用层的开发技术栈是 Web 技术栈,而底层渲染方式基本都是 WebView 和原生相结合的方式。

JavaScript开发 + 原生渲染 

React Native (简称 RN )是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架,是 Facebook 早先开源的 Web 框架 React 在原生移动应用平台的衍生产物。

React 是一个响应式的 Web 框架,React 中提出一个重要思想:状态改变则UI随之自动改变。

React Native 是 React 在原生移动应用平台的衍生产物。那两者主要的区别是React中虚拟 DOM 最终会映射为浏览器 DOM 树,而 RN 中虚拟 DOM会通过 JavaScriptCore 映射为原生控件。

而 RN 中将虚拟 DOM 映射为原生控件的过程主要分两步:

  1. 布局消息传递; 将虚拟 DOM 布局信息传递给原生;
  2. 原生根据布局信息通过对应的原生控件渲染;

至此,React Native 便实现了跨平台。 相对于混合应用,由于React Native是 原生控件渲染,所以性能会比混合应用中 H5 好一些。

Weex 是阿里巴巴于 2016 年发布的跨平台移动端开发框架,思想及原理和 React Native 类似,底层都是通过原生渲染的,不同是Weex 支持 Vue 语法,而 RN 的是基于 React 的,不支持 Vue。

优点:

  1. 采用 Web 开发技术栈,社区庞大、上手快、开发成本相对较低。
  2. 原生渲染,性能相比 H5 提高很多。
  3. 动态化较好,支持热更新。

不足:

  1. 渲染时需要 JavaScript 和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿。
  2. JavaScript 为脚本语言,执行时需要实时生成机器码 (JIT,即 Just In Time),执行效率和编译类语言( AOT ,即 Ahead Of Time源码预处理)仍有差距。
  3. 由于渲染依赖原生控件,不同平台的控件需要单独维护,并且当系统更新时,社区控件可能会滞后;除此之外,其控件系统也会受到原生UI系统限制。

自绘UI + 原生

通过在不同平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,所以可以做到不同平台UI的一致性。注意,自绘引擎解决的是 UI 的跨平台问题,如果涉及其他系统能力调用,依然要涉及原生开发。

优点:

  1. 性能高;由于自绘引擎是直接调用系统API来绘制UI,所以性能和原生控件接近。

  2. 灵活、组件库易维护、UI外观保真度和一致性高;由于UI渲染不依赖原生控件,也就不需要根据不同平台的控件单独维护一套组件库,所以代码容易维护。由于组件库是同一套代码、同一个渲染引擎,所以在不同平台,组件显示外观可以做到高保真和高一致性;另外,由于不依赖原生控件,也就不会受原生布局系统的限制,这样布局系统会非常灵活。

不足:

  •  动态性不足;为了保证UI绘制性能,自绘UI系统一般都会采用 AOT 模式编译其发布包,所以应用发布后,不能像 Hybrid 和 RN 那些使用 JavaScript(JIT)作为开发语言的框架那样动态下发代码。

*动态化主要指是否支持动态下发代码和是否支持热更新。

Flutter 正是实现一套自绘引擎,并拥有一套自己的 UI 布局系统,且同时在开发效率上有了很大突破。

值得注意的是 Flutter 的Release 包默认是使用 Dart AOT 模式编译的,所以不支持动态化,但 Dart 还有 JIT 或 snapshot 运行方式,这些模式都是支持动态化的。因此,就意味着,在开发过程中 Flutter 的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在 iOS 和 Android 模拟器或真机上可以实现毫秒级热重载,并且不会丢失状态。

这真的很棒,相信我,如果你是一名原生开发者,体验了Flutter开发流后,很可能就不想重新回去做原生了,毕竟很少有人不吐槽原生开发的编译速度。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue项目创建新文件后都会提示仅当 “module” 选项设置为 “es2022”、“esnext”、“system”、“node16” -警告提示

警告提示 vscode中vue项目创建新文件后都会提示仅当 “module” 选项设置为 “es2022”、“esnext”、“system”、“node16” 或 “nodenext”,且 “target” 选项设置为 “es2017” 或更高版本时,才允许使用顶级 “await” 表达式。 在 VS Code 中&am…

C语言自学笔记8----C语言Switch语句

C 语言 switch 语句 switch语句使我们可以执行许多代替方案中的一个代码块。 虽然您可以使用if…else…if阶梯执行相同的操作。但是,switch语句的语法更容易读写。 switch … case的语法 switch (expression) { case constant1: // 语句 break; case constant2: // …

安装docker compose

尝试了各种方法 最后按照以下命令进行尝试 成功安装 mkdir -p ~/.docker/cli-plugins && \ curl -fsSL "https://github.com/docker/compose/releases/download/${DOCKER_COMPOSEV2_VERSION-v2.23.3-rc.3}/docker-compose-linux-${TARGET_ARCH} -o ~/.docker/cli…

自适应宽带波束形成:GSC(generalized sidelobe canceller)广义旁瓣消除器原理介绍和实现代码

GSC(generalized sidelobe canceller, 广义旁瓣消除器)可以将有约束的LCMV算法转换为无约束的实现结构。网上关于GSC的介绍对细节方面介绍得不详细,并且主要是应用在窄带。宽带的GSC应用范围也比较广泛,例如在智能音箱等产品的麦克…

EEPROM ADDRESS BYTE长度说明

1、24C16 ADDRESS BYTE 2、24C32 ADDRESS BYTE 3、ADDRESS BYTE 长度说明 容量小于16Kbits(含)的EEPROM 地址是8位的 容量大于16Kbits的EEPROM地址是16位的 4、操作说明 例如:STM的HAL库函数中 HAL_I2C_Mem_Write(I2C_HandleTypeDef *hi…

Clickhouse MergeTree 原理(一)

作者:俊达 MergeTree是Clickhouse里最核心的存储引擎。Clickhouse里有一系列以MergeTree为基础的引擎(见下图),理解了基础MergeTree,就能理解整个系列的MergeTree引擎的核心原理。 本文对MergeTree的基本原理进行介绍…

若依上传文件/common/upload踩坑

前言:作者用的mac系统(这个是个坑),前端用的uniapp,调用若依通用上传方法报错NoSuchFileException: /home/ruoyi/uploadPath/upload... 前端上传代码示例如下: uni.chooseImage({count: 1,success(res){ uni.uploa…

金融级PaaS体系规划

近日,在美丽春城昆明举办了一场闭门的金融行业讨论会,会上灵雀云首席解决方案专家杜东明受邀进行了《金融级PaaS体系规划》的主题分享。他指出,PaaS体系的重要性日益凸显,已经成为金融行业发展的重要驱动力,它能够为金…

maven打包把所有依赖的jar copy到一个文件夹

在maven项目中,是使用依赖坐标来引入jar包,在引入jar包的时候,maven也会默默的帮助我们导入这个jar包所依赖的jar包。 但是当我们打包项目使用jar包运行的时候,往往会出现缺少jar的情况: 如果我们一个一个添加缺少的jar包到classpath下就会很麻烦,而且我们也不知到mave…

React进阶(Redux,RTK,dispatch,devtools)

1、初识Redux 是React最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行 作用:通过集中管理的方式管理应用的状态 案例-实现一个计数器 实现步骤: Redux管理数据的流程: state:一个对象&…

Vue中的知识点

1.vue中for的key有什么用? Key是给虚拟DOM加的一个标识,当数据发生变化时,vue会去根据【新数据】去生成【新的虚拟DOM】。随后会将【新的虚拟dom】与【旧的虚拟dom】进行对比。对比时的依据就是这个key. 不用key,获取用index当key都有可能出现…

MySQL基础-----多表查询之内外连接与自连接

目录 前言 一、内连接 1.隐式内连接 2.显式内连接 二、外连接 1.左外连接 2.右外连接 三、自连接 1.自连接查询 2.联合查询 前言 本期我们学习MySQL中多表查询的内连接、外连接和自连接。这里我会通过相关的案例去讲解多表查询中的内外连接与自连接的查询方式&#xff…

2024.3.9-408学习笔记-C-字符函数和字符串函数

1、strlen函数 用于计算字符串长度(除了末尾的\0)。 函数格式:size_t strlen ( const char * str )。 字符串以\0作为结束标志,strlen函数返回的是在字符串中\0前面出现的字符个数(不包含\0)。 注意&am…

ARM 汇编指令:(七) STM/LDM多寄存器加载/多存储指令

一.四种栈 考验大家理解能力的地方来了,专心点,嘿嘿!! 1.满增栈:进栈(先移动指针再入栈,指针往地址增大的方向移动);出 栈(先出栈,栈指针往地址…

Java中的IO流是什么?

Java中的IO流(Input/Output Stream)是Java编程语言中用于处理输入和输出操作的一种重要机制。在Java中,IO流被用来读取和写入数据,这些数据可以来自各种来源,如文件、网络连接、内存缓冲区等。Java的IO流提供了丰富的类…

分享通义ChatGPT实用技能123

前言 作为一名程序员,你一定有过这样的经历:排查某个 bug 花费了好几个小时,在各个搜索引擎尝试搜索,浏览了几十甚至上百个网站,结果搜到的答案千篇一律,没有一个说到点上。而自从有了 ChatGPT&#xff0c…

船舶AIS监控网络-船位信息查询:实时查询船舶动态,服务于船舶安全航行管理、港口调度计划、物流、船代、货代。【AIS动态信息编写船舶轨迹】

文章目录 引言I 预备知识1.1 相关术语1.2 主要功能1.3 MongoDB和Es各自优势II 系统架构2.1 电子海图开源JavaScript包2.2 地图渲染库2.3 地图服务调用(天地图)2.4 在Elasticsearch(ES)中存储船舶轨迹数据III 数据同步方案3.1 基于 Binlog 实时同步3.2 数据迁移工具:Canal3.3…

通过网口或串口走Modbus协议,读写数据库中的数据

智能网关IGT-DSER方便实现多台PLC与数据库之间的数据通讯,既可以读取PLC的数据上报到数据库,也可以从数据库查询数据后写入到PLC的寄存器,还可以将数据库的数据转为Modbus服务端/从站,实现数据库内的数据也可以走Modbus协议通过网…

真空泵系统数据采集远程监控解决方案

行业背景 半导体制造业可以说是现代电子工业的核心产业,广泛应用于计算机、通信、汽车、医疗等领域。而在半导体生产加工过程中,如刻蚀、 镀膜、 扩散、沉积、退火等环节,真空泵都是必不可少的关键设备,它可以构建稳定受控的真空…

SVM实验分析(软硬间隔,线性核,高斯核)

目录 一、前言 二、实验 0. 导入包 1. 支持向量机带来的效果 2. 软硬间隔 3. 非线性支持向量机 4. 核函数变换 线性核 高斯核 对比不同的gamma值对结果的影响 一、前言 学习本文之前要具有SVM支持向量机的理论知识,可以参考支持向量机(Support Vector …