Flutter简介
Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。 Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。 在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Flutter历史
说到Flutter,可能很多小伙伴都会以为它是新兴的的移动开发框架,其实不然,Flutter的历史最早可以追溯到2014年10月,其前身是Google内部孵化的Sky项目。
不过,随着Flutter热度的上升,特别是2018年Flutter陆续发布了Beta版和Flutter1.0,给很多小伙伴造成了一个误区:认为Flutter是最近新兴的一个开发框架。最近,Google又发布了 1.2正式版 ,并且官方也发布了今年的开发路线(参考 Flutter 2019 产品路线图 ),可以预见,Flutter将在2019年迎来真正的爆发和成长。
- 2014.10 - Flutter的前身Sky在GitHub上开源;
- 2015.10 - 经过一年的开源,Sky正式改名为Flutter;
- 2017.5 - Google I/O正式向外界公布了Flutter,这个时候Flutter才正式进去大家的视野;
- 2018.6 - 距5月Google I/O 1个月的时间,Flutter1.0预览版;
- 2018.12 - Flutter1.0发布,它的发布将大家对Flutter的学习和研究推到了一个新的起点;
-
2019.2 - Flutter1.2发布主要增加对web的支持。
Flutter原理
相比React Native和Weex,Flutter实现跨平台采用了更为彻底的方案(参考 移动跨平台技术方案总结 )。它既没有采用WebView也没有采用JavaScript,而是自己实现了一台UI框架,然后直接系统更底层渲染系统上画UI。所以它采用的开发语言不是JS,而Dart(Dart是面向对象的、类定义的、单继承的语言。它的语法类似C语言,可以转译为JavaScript,支持接口(interfaces)、混入(mixins)、抽象类(abstract classes)、具体化泛型(reified generics)、可选类型(optional typing)和sound type syste)。 据称Dart语言可以编译成原生代码,直接跟原生通信,其原理模型图如下:
同时,Flutter将UI组件和渲染器从平台移动到应用程序中,这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas,以便定制的UI组件可以出现在设备的屏幕上,以及访问事件(触摸,定时器等)和服务(位置、相机等)。这是Flutter可以做到跨平台而且高效的关键。另外Flutter学习了RN的UI编程方式,引入了状态机,更新UI时只更新最小改变区域。
系统的UI框架可以取代,但是系统提供的一些服务是无法取代的。Flutter在跟系统service通信方式,采用的是一种类似插件式的方式,或者有点像远程过程调用RPC方式,这种方式据说也要比RN的桥接方式高效。关于RN和Flutter到底谁更优秀,有兴趣的读者可以关注下官方的撕逼大战 React Native 团队怎么看待 Flutter 的 。
Flutter 和 React Native 底层框架对比
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 控件树并将其绘制到平台画布上。
如果说非要比较 Flutter 和 React Native的优势,可以参考下面几点:
UI 一致性
Flutter 因为是自己做的渲染,因此在iOS和Android的效果基本完全一致。 React Native存在将RN控件转换为对应平台原生控件的过程,存在一定的差异(如之前在调研里提到过的Button在iOS和Android下面显示效果不一样)。
动态化技术
Flutter使用的Dart语言,支持AOT和JIT两种模式,在Dev时候,通过JIT可以实现热重载,开发者可以即时的看到代码修改的效果。而在Release Build的时候,通过AOT事先编译,来最大化的优化性能。因此目前Flutter不支持代码的热更新,不过在 Flutter 2019 产品路线图 )可以看到这方面的消息。
ReactNative 的代码通过加载 JSBundle.js执行,JSBundle.js可以保存在本地,也可以通过远程加载。目前有很多RN的热更新方案供选择。
App体积
Flutter iOS空项目 30M左右,Android空项目 7M左右。 (iOS需要额外集成Skia) React Native iOS空项目 3M左右,Android20M左右。(Android会加入OKHttp导致体积增大)
Flutter 部分的底层功能在 Android 系统上已经有实现,因此 Android 上适配要好(RN在 Android 上有可能遇到兼容性问题)。
Flutter的优势
运行效率上,Flutter和ReactNative都可以达到理论上的60帧的刷新率,来实现「Native般的流畅体验」,Flutter是全Native在执行,基于底层代码(Android 上为 C++ with NDK,iOS 上为 C++ with LLVM),而ReactNative是Native控件 + JavaScript代码,实际性能上,Flutter应该优于ReactNative,据官方文档,Flutter可以在支持的设备上达到120FPS,而ReactNative的文档上,只提到了可以达到60FPS。
兼容性上,Flutter 提供的 widget 都是基于 skia来实现和精心定制的,与具体平台没关,所以能保持很高的跨 os 跨 os version 的兼容性。 Flutter 从更基础的层去抹平平台差异,站在了更宽广、更可控的一个基础平台上去演变和发展。 Flutter 官方提供了大部分 Material Design 控件的实现(甚至比 Android Design Support 实现的更多)。