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

移动端研发技术

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


原生开发

原生应用程序是指某一个移动平台(比如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开发流后,很可能就不想重新回去做原生了,毕竟很少有人不吐槽原生开发的编译速度。 

相关推荐

  1. 移动1px边框问题

    2024-03-14 10:06:03       22 阅读
  2. 基于机器学习无损缺陷检测技术研究进展

    2024-03-14 10:06:03       67 阅读
  3. 基于机器学习无损缺陷检测技术研究进展

    2024-03-14 10:06:03       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-14 10:06:03       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-14 10:06:03       97 阅读
  3. 在Django里面运行非项目文件

    2024-03-14 10:06:03       78 阅读
  4. Python语言-面向对象

    2024-03-14 10:06:03       88 阅读

热门阅读

  1. 【C++】每日一题 146 LRU缓存

    2024-03-14 10:06:03       41 阅读
  2. 无线业务配置建议

    2024-03-14 10:06:03       43 阅读
  3. nginx配置websocket

    2024-03-14 10:06:03       35 阅读
  4. Ribbon负载均衡

    2024-03-14 10:06:03       42 阅读
  5. 3、ETAS INCA标定系统建立过程

    2024-03-14 10:06:03       41 阅读
  6. MCU简单的前后台软件架构

    2024-03-14 10:06:03       39 阅读
  7. 蓝桥杯 递增三元组

    2024-03-14 10:06:03       43 阅读
  8. Elastic boosting的使用

    2024-03-14 10:06:03       41 阅读
  9. vue element input让浏览器不保存密码

    2024-03-14 10:06:03       41 阅读
  10. Redis实现全局唯一id

    2024-03-14 10:06:03       41 阅读
  11. Redisson

    2024-03-14 10:06:03       42 阅读
  12. Http 请求状态码

    2024-03-14 10:06:03       43 阅读