Flutter VS React Native

Flutter 起源

2015年,为了解决 Android 经常因不流畅和卡顿而遭人诟病的问题,Google 内部测试了一种高性能编程方式,那就是 Google 的 Sky 项目。Sky 项目使用网页开发语言 Dart 开发原生 Android 应用,强调应用的运行速度和与 Web 的高度集成。

可以说 Sky 是 Flutter 框架的前身。

在 2017年的谷歌 I/O大会上,Google 推出了 Flutter —— 一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布了 Flutter 的第一个 Beta 版本,2018年5月的 I/O 大会上更新到了 Beta3 版本,向正式版又迈进了一步。一时间业内对这个框架的关注度越来越高。

Flutter 简介

目前 Hybrid App 主要分为两类: (1) 通过 WebView 加载本地网页,App 相当于本地网站。如 PhoneGap、Cordova、IOnic。 (2) 原生控件的跨平台抽象,如 ReactNative、Weex。

Flutter 走了不一样的路:自己开发了一套原生控件,每个平台实现一遍,然后把渲染引擎(这套控件)打包在每个应用里面,因此性能没有问题,平台差异也很小。

之所以不适用原生控件,是因为 Flutter 希望最终结果是更高质量的,如果 Flutter 使用原生系统 widget,Flutter 应用的质量和性能将受到这些 widget 本身质量的限制。

Flutter 和 ReactNative 代码结构比较

ReactNative Flutter
image image

Flutter 和 ReactNative 底层架构的比较

image

image

React-Native、Weex 核心是通过 Javascript 开发,执行时需要 Javascript 解释器,UI 是通过原生控件渲染。Flutter 与用于构建移动应用程序的其它大多数框架不同,因为 Flutter 既不使用 WebView,也不使用操作系统的原生控件。 相反,Flutter 使用自己的高性能渲染引擎来绘 制 widget。Flutter 使用 C、C ++、Dart 和 Skia(2D渲染引擎)构建。

Skia 是一个 2D的绘图引擎库,其前身是一个向量绘图软件,Chrome 和 Android 均采用 Skia 作为绘图引擎。Android 自带了 Skia,所以 Flutter Android SDK要比 iOS SDK小很多。

image

在 ReactNative 中,引入了虚拟 DOM 来减少DOM的回流和重绘,系统将虚拟 DOM 与真正的 DOM 进行比较,生成一组最小的更改,然后执行这些更改,以更新真正的 DOM。最后,平台重新绘制真实的 DOM 到画布中。

image

React Native 是移动开发的一大进步,并且是 Flutter 的灵感来源,但 Flutter 更进一步。 在 Flutter 中,UI 组件和渲染器已经从平台中集成到用户的应用程序中。没有系统 UI 组件可以操作,所以原来虚拟控件树的地方现在是真实的控件树。Flutter 渲染 UI 控件树并将其绘制到平台画布上。

UI 一致性

Flutter 因为是自己做的渲染,因此在iOS和Android的效果基本完全一致。
ReactNative存在将RN控件转换为对应平台原生控件的过程,存在一定的差异(如之前在调研里提到过的Button在iOS和Android下面显示效果不一样)。

动态化技术

Flutter使用的Dart语言,支持AOT和JIT两种模式,在Dev时候,通过JIT可以实现热重载,开发者可以即时的看到代码修改的效果。而在Release Build的时候,通过AOT事先编译,来最大化的优化性能。因此目前Flutter不支持代码的热更新。

ReactNative 的代码通过加载 JSBundle.js执行,JSBundle.js可以保存在本地,也可以通过远程加载。目前有很多RN的热更新方案供选择。

App体积

Flutter iOS空项目 30M左右,Android空项目 7M左右。 (iOS需要额外集成Skia)
ReactNative iOS空项目 3M左右,Android20M左右。(Android会加入OKHttp导致体积增大)

Flutter 部分的底层功能在 Android 系统上已经有实现,因此 Android 上适配要好(RN在 Android 上有可能遇到兼容性问题)。ReactNative 在 iOS上面兼容性更优,facebook 官方很多 iOS only 的控件直接移植自 Native。并且目前 Flutter 还处于 beta阶段,issue比较多,在 demo上遇到键盘遮挡的问题,官方也需要等下一个版本解决。

使用案例

Google 的 AdWords 已经使用了Flutter进行开发。
国内阿里巴巴的闲鱼 Team 已经在部分页面使用了Flutter并输出了很多相关的技术文章。 https://juejin.im/user/5ac2db47f265da2393774122
https://flutter.io/showcase/

国外Facebook、Skype、Walmart、Uber、Instagrams
国内京东、QQ、手机百度等App使用ReactNative构建。
http://facebook.github.io/react-native/showcase.html

第三方Library数量

Flutter 目前有1000+ library。
ReactNatve 专用library有11000+ (以react-native名称开头的包),与web开发可以共用的包700000+。

Flutter的优势

  • 运行效率上,Flutter和ReactNative都可以达到理论上的60帧的刷新率,来实现「Native般的流畅体验」,Flutter是全Native在执行,基于底层代码(Android 上为 C++ with NDK,iOS 上为 C++ with LLVM),而ReactNative是Native控件 + JavaScript代码,实际性能上,Flutter应该优于ReactNative,据官方文档,Flutter可以在支持的设备上达到120FPS,而ReactNative的文档上,只提到了可以达到60FPS(RN是否支持120FPS未深入调研,文档上 RN 可以通过优化 diff 的方法提升渲染效率)。

[Flutter Performance Profiling]
https://flutter.io/ui-performance/
Flutter aims to provide 60 frames per second (fps) performance, or 120 fps performance on devices capable of 120Hz updates.

[ReactNative Performance]
https://facebook.github.io/react-native/docs/performance

  • 兼容性上,Flutter 提供的 widget 都是基于 skia来实现和精心定制的,与具体平台没关,所以能保持很高的跨 os 跨 os version 的兼容性。
    Flutter 从更基础的层去抹平平台差异,站在了更宽广、更可控的一个基础平台上去演变和发展。
  • Flutter 官方提供了大部分 Material Design 控件的实现(甚至比 Android Design Support 实现的更多)。

Flutter目前的不足

  • Flutter官方没有对平板下的运行情况进行测试,有可能一些组件存在issue,目前所有widget都没有对平板进行特殊适配。

https://flutter.io/faq
We do not test on tablets, so there may be issues with some widgets on tablets. We have not implemented tablet-specific adaptations in our widgets.

  • 不支持3D

https://flutter.io/faq
Today we don’t support for 3D via OpenGL ES or similar. We have long-term plans to expose an optimized 3D API, but right now we’re focused on 2D.

  • 不支持windows app,ReactNative 可通过微软的https://github.com/Microsoft/react-native-windows 开发 windows UWP 和 WPF 程序。

  • 版本尚不成熟,目前 Flutter 官方建议的稳定版本还是 beta 版本。目前存在很多 issue,在目前调研中遇到的有「flutter doctor」环境检查误报错误、text input 会被软键盘遮挡、在设备上hot reload经常掉线等,很多问题官方的回应都是「will be fixed in next release」。

  • 官方提供的组件大部分都以 Material Design 为主,iOS风格的组件比较少,对于需要用到 iOS 风格组件的情况,都需要自己手动绘制组件。

  • 社区尚不成熟,开发中遇到问题,在官方文档、StackOverFlow 上都没有相关资料,最后在Github 的issue里找到了。

参考资料

[为什么说Flutter是革命性的?] https://www.sohu.com/a/192998605_635110

[闲鱼技术 ReleaseFlutter的最后一公里] https://juejin.im/post/5b456ebee51d4519277b7761

[React Native VS Flutter评测] https://juejin.im/post/5b1e8b826fb9a01e3962618d

[深入理解 Flutter 的编译原理与优化] http://www.sohu.com/a/239579799_629652

[slant上关于ReactNative和Flutter的讨论]
https://www.slant.co/versus/4650/17635/~react-native_vs_flutter

坚持原创技术分享,您的支持将鼓励我继续创作!