譯文出自:閃電礦工翻譯組
原文地址: 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 核心層(上圖綠色部分)在移動端和 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 應用。