【譯】Bringing Flutter to the Web

閃電礦工翻譯組發表於2019-07-08

譯文出自:閃電礦工翻譯組

原文地址: Bringing Flutter to the Web

原文作者: kevmoo

倉庫原文連結:issue

譯者: Fedora

用來構建漂亮、定製化應用的跨平臺的 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架構

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

相關文章