Flutter 简介
目前 Hybrid App 主要分为两类: (1) 通过 WebView 加载本地网页,App 相当于本地网站。如
PhoneGap、Cordova、IOnic。 (2) 原生控件的跨平台抽象,如 ReactNative、Weex。
Flutter 走了不一样的路:自己开发了一套原生控件,每个平台实现一遍,然后把渲染引擎(这套控件)打包在每个应用里面,因此性能没有问题,平台差异也很小。
<>
之所以不适用原生控件,是因为 Flutter 希望最终结果是更高质量的,如果 Flutter 使用原生系统 widget,Flutter
应用的质量和性能将受到这些 widget 本身质量的限制。
Flutter 和 ReactNative 底层架构的比较
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小很多。
在 ReactNative 中,引入了虚拟 DOM 来减少DOM的回流和重绘,系统将虚拟 DOM 与真正的 DOM
进行比较,生成一组最小的更改,然后执行这些更改,以更新真正的 DOM。最后,平台重新绘制真实的 DOM 到画布中。
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://juejin.im/user/5ac2db47f265da2393774122>
https://flutter.io/showcase/ <https://flutter.io/showcase/>
国外Facebook、Skype、Walmart、Uber、Instagrams
国内京东、QQ、手机百度等App使用ReactNative构建。
http://facebook.github.io/react-native/showcase.html
<https://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/ <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
<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 <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 <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
<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
<https://www.sohu.com/a/192998605_635110>
[闲鱼技术 ReleaseFlutter的最后一公里] https://juejin.im/post/5b456ebee51d4519277b7761
<https://juejin.im/post/5b456ebee51d4519277b7761>
[React Native VS Flutter评测] https://juejin.im/post/5b1e8b826fb9a01e3962618d
<https://juejin.im/post/5b1e8b826fb9a01e3962618d>
[深入理解 Flutter 的编译原理与优化] http://www.sohu.com/a/239579799_629652
<http://www.sohu.com/a/239579799_629652>
[slant上关于ReactNative和Flutter的讨论]
https://www.slant.co/versus/4650/17635/~react-native_vs_flutter
<https://www.slant.co/versus/4650/17635/~react-native_vs_flutter>
本文转自我的技术博客 https://www.cc-lab.cn/flutter-vs-reactnative/
<https://www.cc-lab.cn/flutter-vs-reactnative/>
热门工具 换一换