Hummingbird: Web 里的 Flutter

作者 / Yegor Jbanov, Flutter 开发工程师, Google

相信关注 Flutter Live 的朋友们已经知道了我们正在将 Flutter 带进 Web。在本文中我们会和您分享一下我们的工作历程，以及当前的项目进展。另外，您还会看到一些使用以及实现的细节以及在 Web 页面中和其他代码 / 元件进行互操作的说明，请耐心阅读到最后。

让我们来快速回顾一下 Flutter 的架构。Flutter 是一个多层系统，您可以在更高的层级上用很少的代码就开发出很丰富的内容，而如果您需要控制更多的系统行为，您也可以深入到较低的层去进行控制，但相应的，复杂度也会更高一些。当较高层的代码无法满足开发者的需求时，开发者们随时可以深入到较低的层中去完成自己的开发目标，如下图，开发者可以访问 Flutter Engine 上方的所有层。

△ Flutter 架构

正如大家所看到的，Flutter Engine 是 Flutter 中最低级别的库，dart:ui。它不涉及任何 widget、物理效果、动画或布局 (文本布局除外)，而只负责将一个个 picture 类放到屏幕上，并将它们绘制成像素。在 dart:ui 上直接编写应用是很困难的，这就是我们需要在此之上创建更多层代码的理由。

• Flutter 官方文档: Picture 类

  https://docs.flutter.io/flutter/dart-ui/Picture-class.html

我们将位于 dart:ui 之上的一切统称 “框架 (Framework)”，它下面的一切都叫做 “引擎 (Engine)”。框架完全使用 Dart 编程语言编写。引擎的绝大部分使用 C++ 编写，专属 Android 的部分用 Java 编写，专属 iOS 的部分则用 Objective-C 编写。而 dart:ui 中的一些基本类和方法是用 Dart 编写，主要用作 Dart 和 C++ 之间的桥梁。

Flutter 还提供插件系统。插件是可以直接访问 OEM 库和第三方库的代码，这些库在移动设备的生态系统中已经累积了很长时间，为开发提供了更多的可能性。要为 Android 创建插件，您可以使用 Java 或 Kotlin 进行编写，iOS 插件则使用 Objective-C 或 Swift 编写。

Hello, Web

Web 平台发展至今已有数十年了，包括了为数众多的技术和规范。我们可以使用一些总括性术语来描述大量相关功能，如 HTML、CSS、SVG、JavaScript、WebGL 等。为了在 Web 上运行 Flutter，我们需要:

• 编译 Dart 代码: Dart 是 Flutter 的开发语言，我们需要在 Web 上运行 Dart 代码。

• 确定要在 Web 上运行的 Flutter 子集: 在 Web 上运行所有 Flutter 代码并不实际，也谈不上有用，毕竟其中一些代码是专属某个平台的，例如 Android 和 iOS。

• 选择支持的 Web 功能子集: 随着时间的推移，Web 平台会累积一些彼此重叠的功能。例如，如果想绘制图形，您用 HTML + CSS、SVG、Canvas 和 WebGL 都可以做到。
  
  

自 Dart 诞生以来，它一直支持编译为 JavaScript。今天很多重要的应用都是从 Dart 编译为 JavaScript，并且在生产环境中运行良好。因此，Flutter 的编译策略同样依存于这套机制。

在启动这个项目时，我们面临着 UI 渲染方式的几种选项。但我们很快意识到，我们想要支持的 Flutter 层级和代码同时也决定了我们会支持哪些 Web 技术。为此我们制作了三个原型: 

1. 仅有 widget: 这个原型实现了 Flutter 的 widget 框架，并提供了一组核心布局 widget，作为构建自定义 widget 的基础。关于布局和定位，它有赖于 Web 内置的功能，例如 flexbox、grid 布局、通过 overflow:scroll 实现的浏览器滚动布局等。
   

2. Widget + 自定义布局: 此原型包括 Flutter 的布局系统 (基于 RenderObject)，但将渲染对象直接映射为 HTML 元素。

3. Flutter Web Engine: 这个原型保留了 dart:ui 之上的所有层，并提供了一个可以在浏览器中运行的