Flutter For Web

原文地址: https://medium.com/flutter/br...

原文做者: Kevin Moore

翻译做者: Fedora

Flutter For Web

用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 如今已经支持 Web 开发了。咱们很高兴推出了一个预览版的 SDK 可让开发者直接使用 Flutter UI 和业务逻辑代码构建 web 应用在浏览器中运行起来。

Flutter 在 Web端的雄心

自从去年第一个公测版本推出以后，开发者使用 Flutter 构建跨 IOS 和 Android 的应用。可是 Flutter 自始至终被设计成一个跨平台的 UI 框架包括 Windows ，Mac，Fuchsia 甚至是 Raspberry Pi（树莓派）。由于 Flutter 是由 Dart 编写的，里面包含一个生产环境的编译器来构建原生的代码和 JavaScript 代码，因此咱们有一个坚实的基础。剩下的挑战就是替换基于 Skia-based 的图形引擎和文本渲染来适配 Web 平台。

要作到这些，咱们须要提供：

• 快速，无抖动的且每秒60帧的页面交互
• 考虑到 Flutter 在其余平台提供的能力和视觉
• 和现有开发模式整合的高效率的开发体验
• 支持全部现代浏览器的核心 Web 功能

虽然Flutter for web是一项正在进行中的工做，并且为了实现上述功能还有不少工做要作。咱们已经推出一个预览版，因此开发者能够进行尝鲜并给咱们反馈。

Flutter Web 架构

Flutter 在 Web 端的总体架构和移动端的架构差很少:

Flutter 核心层（上图绿色部分）在移动端和 Web 端是同样的。它提供了 Flutter UI 的高度抽象，包括动画，手势，基本的小部件，以及一套大部分应用须要的 Material 风格的部件。若是你已经在客户端开发中使用了 Flutter，那么你就会很快的在 Web 开发中上手。

神奇之处就是将这些概念（客户端层面的）编译到浏览器中。咱们从新实现了 dart ui 库，本来是基于 Skia 引擎被用在客户端上，如今是基于 DOM 和 Canvas API。当你编译 Flutter 代码到 Web 端，你的应用包括 Flutter 核心库，Web 端的 dart ui 库，全部的用 Dart 语言写的代码都会被编译成 JavaScript 代码，可以运行在全部的现代化浏览器中。

咱们正在认真考虑采纳 Web 核心的特性，像用 Flutter 的路由模型无缝衔接浏览器的 History 路由。咱们还在与 Flutter 桌面终端 合做，来实现鼠标滚动，悬停和聚焦这些客户端开发中用不到的功能。

Flutter Web 项目聚焦的核心功能就是框架提供的丰富流畅的交互体验。基于 document 的 Web 端也能从 Flutter web 可视化中 收益。

这个预览版的核心库是现有 Flutter 核心库的一个临时分支。这让咱们的工程师可以很快的实现 web 端功能而核心团队可以持续保持开发稳定的用于生产环境的工具。咱们已经开始往主仓库合并部分支持浏览器端的代码。咱们计划提供一个 Flutter 的工具包，里面的核心框架将为移动端，web，和其余平台提供支持。

咱们计划的工做包括:

• 支持文本特性例如选中，复制和粘贴。
• 提供插件支持。像位置信息，摄像头，文件 API，咱们但愿提供一个简单的 API 将客户端和 web 端桥接起来。
• 对 PWA 提供开箱即用的技术支持。
• 将 web 开发所须要的工具集成到现有的 FLutter 脚手架和编辑器中。
• 可以用 DevTools 来调试 web 开发。
• 提升性能，浏览器支持以及无障碍的访问的能力

欢迎你们去 flutter.dev/web 查看例子，文档以及更多的资源。咱们很期待你使用 Flutter 开发的 web 应用。