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 應用。