Flutter 演进和实现原理

Tamic 原文可关注开发者我技术前线
https://tamic.blog.csdn.net/article/details/89281867

Flutter发展历史

2018 年已经过去的这段时间里，Flutter 有着非常大的进展：

2015年5月Dart开发者峰会上，亮相了基于Dart语言的移动应用程序开发框架Sky [8-9] ，后更名为Flutter

2 月底在世界移动大会 (MWC) 上宣布了第一个 Beta 版发布;

5 月的 Google I/O 大会上发布了 Beta 3;

6 月底的 GMTC 宣布了首个发布预览版;

9 月的谷歌开发者大会 (Google Developer Days) 上，宣布 发布预览版 2 发布。

12月 Flutter live 2018 发布1.0稳定版本

2019年3月发布1.2

Flutter 在 Github 最受欢迎的开源软件中排名前 50，大量的中国开发者开始使用 Flutter 构建跨平台 (Android & iOS) 的应用 —— 阿里巴巴、腾讯、京东等都使用 Flutter 发布了自己的应用。

跨平台方案演进

回顾移动的发展历史，从Android 和 iOS 开发起步的时候，大家用的最多的就是原生开发,

第一阶段技术:原生开发

当时的架构都是这种形式，在系统的framework上面不断的开发新的功能，那个年代，开源库也没有现在这么多，所以大家都是出于造轮子的过程。

但这样明显有一个痛点：就是 Android iOS WP，网页端四分天下的格局，每个公司需要维护四个团队，这样成本很高，所以就有了一个迫切的需求，能否开发一套在多个平台上运行，这样可以大大降低开发成本。

第二阶段的技术:HYBRID

这个阶段h5兴起，甚至有一段时间大家觉得h5会替代Android原生开发，当时也出现了很多的开源框架来实现H5与底层的交互框架：PhoneGap，Cordova，Ionic，Xamarin

当然这种想法只持续了很短的一段时间，因为虽然在这种架构上有开发成本低，简单，跨平台等很多的优点，但有一个致命的缺点性能问题导致他只能在很少的应用上取得成功。（cordova官方统计，大概只有5%的使用cordove的应用能够取得成功）

这种现象持续了没有多久就有很多公司幻想能不能有一种既能跨平台，性能又高的架构解决这个问题呢？

第三阶段技术：跨平台

大家看到这个架构可能一下子就想到了 RN，对，当开发者认识到 H5 是性能的遇到瓶颈问题时，果断的采取了通过原生绘制的方式来实现。这样大大的解决了性能问题。

其实采用这种技术的不止 RN，还有Weex，Luaview ，等目前的跨平台方案，他们的原理大同小异，只是上层采用的语言不同，中间采用的桥有差异而已，整个架构思想。

Flutter原理

Flutter Framework
Flutter的框架部分完全使用Dart语言实现，并且有着清晰的分层架构。分层架构使得我们可以在调用Flutter提供的便捷开发功能（预定义的一套高质量Material控件）之外，还可以直接调用甚至修改每一层实现（因为整个框架都属于“用户空间”的代码），这给我们提供了最大程度的自定义能力。Framework底层是Flutter引擎，引擎主要负责图形绘制（Skia）、文字排版（libtxt）和提供Dart运行时，引擎全部使用C++实现，Framework层使我们可以用Dart语言调用引擎的强大能力。

分层架构

Framework的最底层叫做Foundation，其中定义的大都是非常基础的、提供给其他所有层使用的工具类和方法。绘制库（Painting）封装了Flutter Engine提供的绘制接口，主要是为了在绘制控件等固定样式的图形时提供更直观、更方便的接口，比如绘制缩放后的位图、绘制文本、插值生成阴影以及在盒子周围绘制边框等等。Animation是动画相关的类，提供了类似Android系统的ValueAnimator的功能，并且提供了丰富的内置插值器。Gesture提供了手势识别相关的功能，包括触摸事件类定义和多种内置的手势识别器。GestureBinding类是Flutter中处理手势的抽象服务类，继承自BindingBase类。Binding系列的类在Flutter中充当着类似于Android中的SystemService系列（ActivityManager、PackageManager）功能，每个Binding类都提供一个服务的单例对象，App最顶层的Binding会包含所有相关的Bingding抽象类。如果使用Flutter提供的控件进行开发，则需要使用WidgetsFlutterBinding，如果不使用Flutter提供的任何控件，而直接调用Render层，则需要使用RenderingFlutterBinding。

Flutter本身支持Android和iOS两个平台，除了性能和开发语言上的“native”化之外，它还提供了两套设计语言的控件实现Material & Cupertino，可以帮助App更好地在不同平台上提供原生的用户体验。

Flutter 实现

增加了一个dart虚拟机，所以减少了桥的交互，所以性能方面会更加优秀，还有一点就是维护上，flutter有Google维护，所以他的插件开发将会更加规范，所以理论上很容易实现跨平台代码复用的情况

什么是Dart语言？

Dart（https://www.dartlang.org/）亮相于2011年10月10至12日在丹麦奥尔胡斯举行的GOTO大会上，11年出生开始，他的目的就是干掉JS，但是一年过去了，JS各种框架产生，Dart一直在生死线上挣扎，后来没办法，Dart团队意识到取代是不可能的，先让自己活吧，我可以让你写Dart直接转换为Js，这样你可以用我啦吧，毕竟我比js更牛逼啊，但是还是没人用，后来出现了Fuchsia os，主要语言就是dart

为什么Flutter会选择 Dart ？

以下是使Dart成为Flutter不可或缺的一部分的特性：

Dart是AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使Flutter几乎都可以使用Dart编写。这不仅使Flutter变得更快，而且几乎所有的东西（包括所有的小部件）都可以定制。

Dart也可以JIT（Just In Time）编译，开发周期异常快，工作流颠覆常规（包括Flutter流行的亚秒级有状态热重载）。

Dart可以更轻松地创建以60fps运行的流畅动画和转场。Dart可以在没有锁的情况下进行对象分配和垃圾回收。就像JavaScript一样，Dart避免了抢占式调度和共享内存（因而也不需要锁）。由于Flutter应用程序被编译为本地代码，因此它们不需要在领域之间建立缓慢的桥梁（例如，JavaScript到本地代码）。它的启动速度也快得多。

Dart使Flutter不需要单独的声明式布局语言，如JSX或XML，或单独的可视化界面构建器，因为Dart的声明式编程布局易于阅读和可视化。所有的布局使用一种语言，聚集在一处，Flutter很容易提供高级工具，使布局更简单。

开发人员发现Dart特别容易学习，因为它具有静态和动态语言用户都熟悉的特性。

Flutter优缺点

Flutter的优势

跨平台应用的框架，没有使用 WebView 或者系统平台自带的控件，使用自身的高性能渲染引擎(Skia)自绘。

界面开发语言使用 dart，底层渲染引擎使用C, C++。

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量。

Flutter的弊端

Flutter 如火如荼在大肆宣扬战果，为了加快国内的普及，本次Flutter团队 在flutter live 北京 上，以与闲鱼，头条，和腾讯开始了 推进 Flutter大生态的建设。

但是目前 Flutter 障碍在于：

• 性能没有比原生改善

• 无法支持热更

• 在iOS普及上有极大的障碍

参考：
flutter: https://flutter.io/

flutter live 北京会议PPT

Dart 官方：（https://www.dartlang.org/）

Flutter原理与实践 ：https://tech.meituan.com/waimai_flutter_practice.html

Flutter中文网: https://flutterchina.club/

为什么说 Flutter 是革命性的？https://www.infoq.cn/article/why-is-flutter-revolutionary

更多原创关注开发者技术前线