开发跨平台app推荐React Native还是flutter?

简介: 知乎热门问题:开发跨平台app推荐React Native还是flutter?

作者:闲鱼技术-海潴

嗯。。。这个问题十分不好回答啊(捋下鱼须)。闲鱼作为flutter领域的先驱者,以及fish_reduxflutter_boost等当红flutter库的作者,当然是欢迎广大的开发者多多使用flutter相关技术栈 逃~:)。咳咳,不过呢,我们还是正经得聊一下React Native(下面简称RN)和flutter之前的异同:

0x00 简单介绍一下

React Native

React Native是Facebook开源的一款基于react思想、使用JS、能够给移动平台带来native般体验的框架,官网最新的版本是0.5.9。

flutter

flutter来自Google,上层使用dart语言构建跨平台应用,通过平台相关的embedded层接入到使用c++编写的engine层,再通过skia库直接与GPU进行交互。通过对dart代码的AOT编译,拥有优异的计算(CPU)、渲染(GPU)性能。官网最新的版本为1.2。

0x01 跨平台性

开发者们使用跨平台技术栈,首要的目的是为了能够省事儿,所以跨平台能力是首先要被衡量的指标。

Build native mobile apps using JavaScript and React

这意味着开发者可以复用庞大的JavaScript生态和优雅的react思想来书写RN的代码,给开发提供很多的便利性。

从实现原理上来说,RN进行完排版之后会把最终的渲染交给native view,这种方式带来的是如native般的UI性能,但同时也给给平台一致性带来了一些问题。除开渲染层的不一致,在iOS和Android没有使用同一个JavaScript虚拟机也会带来一些暗坑。

手势的处理上两个平台不好统一,RN官方也没有提供一个抹平差异的库,虽然开源社区有react-native-gesture-handler

Beautiful native apps in record time

flutter官方的口气很大,说自己是”空前“的。是不是”空前“,我们得来评估一下。

编程语言层面,flutter使用dart语言构建应用,这门语言对大多数人来说应该是比较陌生,好在dart的语法并不复杂,与Java等强类型oop语言非常相似,还加入了函数式的特性,使用起来还是挺方便的。

flutter提供类似React思想的响应性UI编程模型,让UI开发变得更加fancy。

原理上来说,flutter在各个平台上使用统一的vm(dart vm),自带GDI(skia)。skia是一个已经发展多年成熟度相当高的2D图形库,也是Android系统和Chrome一直在使用的图形库。

flutter从逻辑计算到渲染绘图,都是自己的,使得它在跨平台一致性上有良好的表现。dart提供的AOT特性也可以保证应用在线上有一个好的性能表现。

多平台支持

RN目前支持iOS和Android两个平台,另外有个非官方的ReactNativeX的项目旨在让RN运行到其他平台。

flutter早期支持iOS和Android,desktop的支持目前尚不完善。近期flutter团队发布了Hummingbird,旨在让flutter编写的应用可以运行在浏览器端。

从多平台支持的角度看,两边差距不大。相比RN,flutter在desktop的支持上有些优势,但目前都是不怎么可用状态。

0x02 开发便利性

工具链

RN在打包发布方面有被前端广泛使用的webpack支持,官方自己提供了基于浏览器的debug工具,与前端同学管用的调试方式并无二致。

flutter基于iOS和Android已有的打包工具添加了flutter产物打包功能,同样debug工具也由官方自己提供,除了刚发布的基于浏览器的调试工具外,flutter团队提供的调试工具可以直接在Android Studio或者VScode这类IDE上直接使用。

调试便利性

JS的调试方式已经很成熟了,这里不多做展开。
flutter在debug阶段可以使用集成于IDE插件中的hot reload功能做到亚秒级的新代码加载速度,十分适合与设计师坐在一起结(ya)对(li)编(tiao)程(shi) :)。

第三方库

在RN上你可以使用JS的大部分库,平台相关的plugin也相对丰富。

flutter在这方面稍显欠缺,库的数量上无法与JS生态相比较。flutter/plugins项目提供了大量的平台相关插件供开发者使用,倒也是满足了日常开发的需求,另外dart pubs上的公开库数量也日趋上升。

在混合开发和大型app业务框架上,闲鱼技术开源的flutter_boost提供了与native混合开发的可能,而fish_redux使得大型app中的复杂页面的开发在flutter中变得更加容易。

0x03 未来的发展

开发者选择一个技术,都是压了”身家性命“在上面,谁也不想刚入门就发现这门技术即将被淘汰。

RN是个很好的项目,在发布之初给移动开发带来了一阵旋风。但不得不说,Airbnb宣布放弃使用RN技术栈对于整个社区有不小的打击,而文章中对原因的阐述也相当有说服力。

flutter在1.0发布之后趋于成熟,被钦定为Google Fuchsia系统的应用层框架。从团队2019 roadmap中可以看到,flutter当前重点在于完善一些现有功能上的细节与bugfix,另外对于广受期待的动态化特性,flutter团队也在开发code push功能。从flutter团队目前的方向和笔者在闲鱼开发中实际使用的flutter的感受来看,整体上flutter在框架层面目前已经基本上稳定。

从桌面端跨平台框架发展的历程来看,Java GUI从最初使用peer(对等设计模式)的AWT,到基于Java图形绘制接口性能巨慢无比的Swing,再到公认性能最好目前应用最广泛的基于目标平台绘制接口的SWT,我们可以从中窥见一些历史规律。

peer(对等设计模式),即AWT中的一个控件,对应目标平台(如Windows)上的一个控件(是不是看起来跟RN有一些相似),最终AWT被放弃是因为peer模式传输层级过多造成效率低下,GUI部分为了保证可移植性只能保留各个平台公共的接口。

SWT与QT(另一个被广泛使用的桌面端跨平台GUI框架),牺牲了一部分可移植性(主要是因为直接调用了目标平台的图形绘制接口),带来了GUI的高性能。flutter也采用了类似技术栈,skia来抹平各个平台的绘制接口差异,并向上提供统一的图形接口。

从这个角度来说,无疑flutter可能会是一个更有未来的跨平台框架。

0x04 写在最后

当然Facebook官方对于RN正在进行重构,包括把大部分逻辑移动到c++层来减少线程切换的开销提升性能等。

选择一个框架需要考虑的实际情况比框架的优劣比较更加重要,比如你的项目大小、开发人员构成等,
RN和flutter作为目前移动平台上炙手可热的框架,两者并不是孰优孰劣的对立关系。

纸上得来终觉浅,如果你是个对新技术感兴趣,抑或是希望在移动平台上有所突破的开发者,何不尝试一下Google最新的成果咧

相关文章
|
2月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
IDE 开发工具 开发者
使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件
# 使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件 #鸿蒙开发工具 #DevEco Studio
293 1
|
3月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用`ISportOptimizer`对内置运动分析器进行微调优化。相比小程序,APP框架(如uni-app)因技术差异,无法直接修改运动分析器参数,因此提供了统一的优化机制。开发者可通过`ISportOptimizer`获取和更新检测规则、动作样本等,灵活适应不同场景需求,如全民运动赛事的宽松模式或学生体测的严格模式。文中还提供了示例代码,展示如何对具体运动项目(如仰卧起坐)进行优化。需要注意的是,微调优化适用于标准动作的小范围调整,若动作变化过大(如花式跳绳),可期待后续自定义扩展功能。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
3月前
|
安全 新制造
不用开发APP,也能实现设备巡检自动提醒和记录归档
设备巡检新方案!告别纸质表格,用二维码轻松搞定自动提醒和记录归档。某工厂分享如何通过草料二维码实现一物一码、扫码填写巡检信息,自动生成数据归档,还能设置定期提醒,确保巡检任务按时完成。无需额外开发 App,低成本高效管理,为设备巡检提供简单又实用的解决方案。
app开发的一些思路
<p><br></p> <p><br></p> <p></p> <h3 style="margin:0px; padding:0px; border:0px; vertical-align:baseline; clear:both; font-weight:normal; list-style:none; color:rgb(102,102,102); font-family:宋体;
3037 0
x3d
小型app开发的思路
前提: 1. 性能不是最重要; 2. 人手少; 3. 速度要快;   结论: 1. 混合式 2. 减少app的复杂程度 3. 追求性能   (博客,尽量让自己每天写一点,短一点都可以)
x3d
614 0
|
5月前
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。