手机app开发技术调研

最近,我们小程序的功能已经趋于完善,但小程序进行图像处理的性能和体验,都和原生APP有很大差距,所以接下来我们计划开发对应的APP.

从第一款手机APP上架苹果商店,如今已经过去了十多年,出现了很多种 app 开发的技术方案,本文将对他们进行深入调研分析,为技术选型和架构提供参考。

我的相关经验

我最早接触原生APP开发是在2015年,当时在做手机SIM卡上的操作系统研发时,需要做几个简单的APP测试系统的一些功能。

最开始,我使用的eclipse 进行开发安卓APP,后来使用了官方发布的 Android studio,同时开发iOS时,安装了Xcode,但使用的是react native 技术开发。

react native 最开始只支持开发iOS APP,16年时开始支持安卓,然后我跳槽到了搜狐,使用react native 技术开发了一个P2P的互联网金融APP。

在搜狐开发维护的商业APP,不仅接入了很多原生的SDK,比如人脸认证、支付等,还实现了编译react native 代码成H5应用,一套代码支持三端。

然后2017年到2019年,都负责过了APP的团队,但最核心的APP都是基于原生开发,然后嵌入H5,当然也用flutter 开发了一个简单资讯APP。

去美团前,曾接了一个私活,使用React native 技术,开发过一个招聘APP,具备聊天功能。

入职美团后,工作内容以前端基建技术为主,也在两个项目中接触了使用美团内部的 MRN 技术开发宿主APP中的一些功能模块。

开发方式盘点

手机APP 开发,一开始只有原生开发,然后出现了混合开发,后面又出现了跨平台开发和多端开发,这四种方式一直都存在着,各有优劣。

原生开发

APP原生开发(Native App Development)指的是使用特定平台支持的开发工具和编程语言,为某一平台(如iOS或Android)开发应用程序的方法。

优势

  1. 性能最优化:原生应用可以直接调用操作系统的API,因此在性能上可以做到最优化,尤其是在图形处理和动画展示方面。
  2. 用户体验佳:原生应用可以提供更加流畅和一致的用户体验,因为它们遵循了各自平台的UI/UX设计指南。
  3. 功能访问:原生应用可以无限制地访问设备的所有功能,如相机、GPS、加速计等。
  4. 安全性高:原生应用通常被认为更加安全,因为它们可以更好地与操作系统的安全模型集成。
  5. 离线工作能力:原生应用可以在没有网络连接的情况下运行,并且可以提供更好的离线数据处理能力。
  6. 商店支持:原生应用通常更容易通过应用商店的审核。

劣势

  1. 开发成本高:因为需要为不同的平台分别开发,所以开发成本和时间会比较高。
  2. 维护难度大:如果有多个平台版本,维护和更新需要更多的工作量。
  3. 开发周期长:相较于跨平台解决方案,原生应用的开发周期更长。
  4. 学习曲线陡峭:开发者需要学习和掌握不同平台的语言和工具,如Java/Kotlin for Android, Swift/Objective-C for iOS。
  5. 资源分配:对于小团队或资源有限的公司来说,为每个平台分别开发可能不切实际。

混合开发

混合开发(Hybrid App Development)结合了原生开发和Web应用开发的元素,通常是通过将Web内容嵌入到一个原生容器中,或者使用特定的框架来桥接原生和Web技术。

优势

  1. 跨平台兼容性:混合应用可以在多个平台上运行,只需编写一次代码,大大节省了开发时间和成本。
  2. 开发效率高:使用Web技术(HTML、CSS、JavaScript)可以快速开发应用,并且可以利用现有的Web开发工具和框架。
  3. 更新快捷:对于Web部分的内容,可以无需通过应用商店审核,直接在线更新,提高了应用的灵活性。
  4. 成本效益:相对于原生开发,混合开发可以减少人力和维护成本,特别适合预算有限的项目。
  5. 易于集成:混合应用可以方便地集成第三方服务,如地图、支付系统等。

劣势

  1. 性能问题:混合应用的性能通常不如原生应用,尤其是在复杂的图形渲染和动画效果上。
  2. 用户体验差异:虽然现代框架努力接近原生体验,但混合应用在某些平台上可能无法完全达到原生应用的流畅度和一致性。
  3. 功能限制:混合应用可能无法完全访问设备的所有功能,或者访问某些功能时需要依赖第三方插件。
  4. 安全性问题:由于混合应用依赖于Web技术,可能会面临更多的安全风险,尤其是在处理敏感数据时。
  5. 依赖框架:混合应用的开发通常依赖于特定的框架,如Cordova、Ionic,这可能导致对这些框架的依赖和限制。

跨平台开发

跨平台开发是指使用单一代码库来构建可以在多个操作系统平台上运行的应用程序。以下是一些流行的跨平台开发框架,如React Native、Flutter、Xamarin等。

优势

  1. 代码复用:跨平台开发允许开发者使用同一套代码为不同的平台(如iOS和Android)构建应用,大大减少了开发时间和工作量。
  2. 成本效益:由于代码复用,跨平台开发可以显著降低开发成本,尤其是对于资源有限的小型团队或初创公司。
  3. 一致性体验:跨平台应用可以提供更加一致的UI和UX体验,因为它们使用相同的代码库。
  4. 快速迭代:跨平台框架通常支持热重载等特性,使得开发者可以快速迭代和测试应用。
  5. 易于维护:由于只有一个代码库,跨平台应用的维护和更新相对更加简单和快捷。
  6. 广泛的社区支持:许多跨平台框架都有强大的社区支持,提供了丰富的文档和工具。

劣势

  1. 性能问题:虽然现代跨平台框架的性能已经大幅提升,但在某些复杂或性能敏感的应用场景下,仍然可能不如原生应用。
  2. 用户体验差异:跨平台应用可能无法完全匹配每个平台的原生UI/UX设计指南,导致用户体验上的细微差异。
  3. 功能限制:跨平台应用可能无法完全访问所有原生功能,或者需要依赖特定的插件和桥接技术。
  4. 复杂性:在某些情况下,为了实现特定的平台特性或优化性能,可能需要编写特定平台的代码,增加了开发的复杂性。
  5. 依赖框架:跨平台开发通常依赖于特定的框架,这可能导致对这些框架的长期依赖,并可能受到框架更新和变化的影响。

多端开发

多端开发(Multi-platform Development)是指开发能够同时在多个不同的设备和服务端运行的应用程序,包括移动端(iOS、Android)、Web端、小程序、桌面端(Windows、macOS、Linux)等,国内用的最多的是uni-app和taro,但都不支持桌面端,所有端都支持的框架,目前应该还没有。

优势

  1. 广泛覆盖用户:通过支持多端,可以覆盖更广泛的用户群体,提高用户获取和留存率。
  2. 统一代码库:使用某些框架(如Flutter、React等)可以实现大部分代码的复用,减少开发成本和时间。
  3. 一致的品牌体验:多端应用可以保持品牌UI/UX的一致性,增强品牌形象。
  4. 易于同步更新:只需更新一处代码库,所有平台上的应用都可以同步更新,维护更加方便。
  5. 资源共享:可以共享后端服务、数据库和其他资源,提高资源利用率。
  6. 市场响应快:快速进入多个市场,抓住不同平台上的用户需求。

劣势

  1. 复杂性:多端开发通常比单一平台开发更为复杂,需要考虑不同平台间的差异和兼容性问题。
  2. 性能挑战:在保证多端兼容性的同时,可能难以达到每个平台上的最优性能。
  3. 开发难度:开发者需要掌握多种技术和工具,以适应不同的平台需求。
  4. 测试难度:需要在多个平台上进行测试,确保应用在所有环境中的稳定性和性能。
  5. 用户体验差异:尽管追求一致体验,但不同平台的用户习惯和设计规范可能导致用户体验存在差异。
  6. 更高的初始成本:多端开发的初始成本可能较高,因为它需要更多的设计和开发资源。

总结

综上所述,原生开发在性能和用户体验上有着不可替代的优势,但是随着跨平台技术的发展,如Flutter、React Native等,一些原生开发的劣势正在被逐渐克服,为开发者提供了一个快速、高效且低成本、效益高的解决方案,适用于大多数业务场景。

因为我们需要复杂的图形处理和端智能技术,混合开发和多端开发都不能满足性能的要求,原生开发成本太高且周期长,而跨平台的React Native是Facebook提供的框架,对原生功能的支持不如官方提供 flutter 框架。

所以,我们决定采用 flutter 技术方案来开发我们的APP。欢迎大家在评论区交流跨端APP的一些经验,或者加我微信进群交流:waxyysys82。

相关推荐
PleaSure乐事8 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo8 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v8 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
58沈剑12 小时前
80后聊架构:架构设计中两个重要指标,延时与吞吐量(Latency vs Throughput) | 架构师之路...
架构
想进大厂的小王14 小时前
项目架构介绍以及Spring cloud、redis、mq 等组件的基本认识
redis·分布式·后端·spring cloud·微服务·架构
阿伟*rui15 小时前
认识微服务,微服务的拆分,服务治理(nacos注册中心,远程调用)
微服务·架构·firefox
ZHOU西口15 小时前
微服务实战系列之玩转Docker(十八)
分布式·docker·云原生·架构·数据安全·etcd·rbac
September_ning16 小时前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪16 小时前
React 守卫路由
前端框架·reactjs
web行路人16 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架