0%

【文章翻譯】Racing Forward at I/O 2023 with Flutter and Dart

【文章內容使用 Gemini 1.5 Pro 自動產生】

Flutter 3.10:圖形效能、網頁整合、開發人員生產力和安全性的大幅更新

A fun image of the Flutter mascot, Dash, standing by a racecar. She is holding a blue flag with “3.10” printed on it.

我們非常高興能回到今年的 Google I/O,從我們在加州山景城的總部附近向全世界進行直播!

就在三個月前,我們在肯亞奈洛比的 Flutter Forward 上推出了大膽的 Flutter 和 Dart 新路線圖。在 I/O 上,我們將透過四個主題的更新,分享我們對該願景的進展:突破性的圖形體驗、與網頁和平台的無縫整合、對新興架構的支持,以及對開發人員體驗的關注。

At Flutter Forward, we announced four areas of focus for the upcoming months: breakthrough graphics performance, seamless integration for web and mobile, early to new and emerging architectures, and continued focus on developer experience.

如您所知,Flutter 是一個 UI 工具包,讓應用程式開發人員可以從單一程式碼庫為行動裝置、網頁、桌面和嵌入式設備進行開發。Flutter 使您能夠建立 美麗 的應用程式,讓您完全控制螢幕上的每個像素。它 速度很快,利用裝置功能,支援硬體加速圖形和原生編譯的機器碼。它 富有成效,使用狀態熱重載等技術,讓您可以立即在應用程式中看到程式碼變更。它的 可移植性 使您能夠使用相同的原始碼部署到各種平台,而不會出現任何意外。此外,它是完全 開放原始碼 的,無需支付授權費用,也不需要為開發工具付費。

持續的 Flutter 動量

Flutter 的使用在 Google 和整個更廣泛的產業中持續增長。在 Google,團隊已在行動裝置、網頁和桌面平台上部署了 Flutter 應用程式,包括:

關於 Classroom,我們在 Flutter Forward 上宣佈,該團隊正在使用 Flutter 建立行動應用程式的新版本。新版本目前正在 iOS 上開始推出,最新的 Android 應用程式中也將很快推出新功能。這個版本的 Classroom 使用最新的 Flutter 技術,包括我們新的 Impeller 圖形渲染引擎,這可以實現快速、無卡頓的 UI。

使用 Flutter 重寫 Classroom 甚至提高了效能。應用程式的新版本比舊版本具有更快的冷啟動時間,正如這個並排影片所展示的:

我們將繼續投資於套件,以將您的 Flutter 應用程式與 Google 開發者生態系統的其餘部分連接。這包括對我們的 原生廣告的 Google Ads 支援進行重大更新針對 Firebase 的新 Windows 支援以及更好的網頁支援;以及對 更深入的 Android 互操作性 的新的實驗性支援。

在六個平台(Android、iOS、網頁、Windows、macOS 和 Linux)上都有 Flutter 支援,現在有超過一百萬個已發佈的應用程式使用 Flutter。它們來自世界各地:從 SNCF Connect,法國鐵路的火車旅行應用程式;到 Apple 當天應用程式獲獎者 SO VEGAN;從 Rive 的快速桌面應用程式,用於建立動畫圖形到關係賦能的 Agapé 行動和平板電腦應用程式;從美麗的 全新設計的 Global Citizen 應用程式新的 Ubuntu Linux 安裝程式,我們很高興看到 Flutter 價值的證明!

使用 Impeller 實現突破性的圖形效能

我們希望 Flutter 能夠為開發人員和設計師提供巨大的力量,以提供出色的圖形體驗。在過去的幾年中,我們一直在重建我們的圖形渲染架構,以實現速度和功能。我們將這個新引擎稱為 Impeller

“我們希望 Flutter 能夠為開發人員和設計師提供巨大的力量,以提供出色的圖形體驗。”

自從我們在 iOS 上推出 Impeller 以後,我們一直在擴展測試和我們的早期採用者合作,以驗證生產品質並進一步調整效能。在今天的 Flutter 3.10 版本中,我們很高興地宣布 Impeller 現在已為 iOS 預設啟用,只需遷移到最新版本的 Flutter,應用程式就可以獲得很大的效能提升。

隨著 Impeller 現在已啟用生產 iOS 使用,我們將注意力轉向為 Android 添加預覽支援。正如 iOS 上的 Impeller 使用底層 Metal API 一樣,Android 上的 Impeller 實作建立在 Vulkan 之上,該 API 為底層圖形硬體上的快速渲染提供了低階 API。雖然絕大多數 現代 Android 裝置 支援 Vulkan,但我們將支援舊裝置的向後相容模式。我們將在接下來的部落格文章中,分享 Impeller for Android 的早期預覽,以及更多有關 Impeller 技術基礎的詳細資訊。

與網頁的無縫整合

正如我們在 Flutter Forward 上所述,我們的目標與大多數現有的網頁框架不同。我們為網頁構建的 Flutter 實作明確 不是 旨在成為通用的網頁框架。現有的網頁框架,例如 Angular 和 React,已經有很多,它們在這個領域做得很好。相反,Flutter 是第一個在架構上圍繞新興的 Web 技術(例如 CanvasKitWebAssembly)進行設計的框架,這些技術特別適合複雜的應用程式體驗。

“Flutter 是第一個在架構上圍繞新興的 Web 技術(例如 CanvasKit 和 WebAssembly)進行設計的框架。”

自從我們早期發佈 Flutter 的網頁支援以來,我們一直在努力改進效能、無障礙性和互操作性。

感知效能 的一個主要因素是 載入時間,即從請求頁面到頁面變成互動式的時間間隔。在此版本中,我們取得了重大進展,這得益於 CanvasKit 在所有瀏覽器上的大小減少,以及針對基於 Chromium 的瀏覽器的額外最佳化。在 Flutter 3.10 中,CanvasKit 縮小到 1.5MB(我們之前的版本為 2.7MB)。圖示字體也已修剪掉未使用的字形,在多數情況下尺寸減少了 100 倍。由於這些最佳化,我們使用模擬的電纜連線將預設計數器應用程式的載入時間縮短了 42%。

正如在 Flutter Forward 上預覽的那樣,我們現在 支援將 Flutter 內容嵌入到現有的 HTML 網頁中,而不是讓 Flutter 佔據整個頁面或需要使用內聯框架。在 Flutter 3.10 中,我們引入了 元素嵌入,它讓您可以像在頁面上添加任何其他 CSS 元素一樣整合 Flutter 內容 - 例如,應用複雜的 CSS 轉場和轉換。若要開始使用,請嘗試這些使用 JavaScript 的範例,或者將 Flutter 包含在 Angular 組件 中。

繼續專注於突破性的圖形效能,Flutter 3.10 還獲得了對網頁上 片段著色器 的支援。自訂著色器可使用於提供比 Flutter SDK 提供的更豐富的圖形效果。著色器是一個用類似 Dart 的語言(稱為 GLSL)撰寫,並在使用者 GPU 上執行的程式。如果您想進一步了解,請查看 我們關於著色器的文件,以及我們的 新程式碼實驗室

對 WebAssembly 的新興架構提供早期支持

WebAssembly(通常縮寫為 Wasm)已逐漸成熟,成為現代瀏覽器的 現代瀏覽器 的平台中立二進制指令格式。在網頁上,Flutter 一直使用 Wasm 來分發 CanvasKit 執行時間,而 Dart 框架和應用程式程式碼歷史上一直編譯為 JavaScript。我們對針對 Wasm 而不是 JavaScript 感興趣已經有一段時間了。然而,直到最近,Wasm 缺乏對 Dart 等垃圾回收語言的原生支援。

因此,在過去的一年中,我們與 WebAssembly 生態系統中的幾個團隊合作,為標準引入了垃圾回收。這已透過一個名為 WasmGC 的新擴展來實現,該擴展目前在基於 Chromium 的瀏覽器和 Firefox 瀏覽器中具有接近穩定的實作。

WebAssembly 讓我們對將原生程式碼的效能帶到網頁的可能性感到興奮。Dart 的 JavaScript 編譯器(在 Google 的數百萬行程式碼中使用)已經生成了快速、經過優化調整的 JavaScript。但是,切換到 Wasm 將為我們提供原生程式碼的效率和 JavaScript 的可移植性,這將進一步提高我們在網頁上的效能。在一些早期的基準測試中,我們發現執行速度提高了 3 倍,這意味著可以提供更豐富的基於網頁的體驗。Wasm 將這與更輕鬆地整合其他語言(如 Kotlin 和 C++)撰寫的程式碼結合在一起。

“WebAssembly 讓我們對將原生程式碼的效能帶到網頁的可能性感到興奮。”

隨著我們等待瀏覽器支援變得更加普及,我們在預發佈通道中引入了將 Flutter 應用程式編譯為 WebAssembly 的預覽支援。我們希望您嘗試為自己的應用程式使用它,並為我們提供早期的回饋。若要進一步了解,請查看 flutter.dev/wasm

持續關注開發人員體驗

儘管我們希望透過之前提到的突破性的圖形效能和更豐富的網頁支援來取悅許多人,但我們在此版本中還引入了許多針對開發者速度和生產力的改進。而 我們詳細的技術部落格記錄了 Flutter 本身的數百項改進,這對現有的 Flutter 開發人員非常感興趣。

但或許此版本中對核心開發者體驗最重大的改進是 **發佈了 Dart 3 **,它包含在 Flutter 3.10 中。

Dart 3 完成了將健全的空安全帶到 Dart 生態系統的漫長旅程。撰寫空安全程式碼可以防止一整類來自在沒有檢查的情況下使用未初始化值的程式設計錯誤。雖然我們自 Dart 2.0 以來一直支援空安全程式碼,但我們現在已關閉了舊的「不安全」模式。作為一個生態系統,我們一直在為此做準備,並且由於排名前 1,000 個套件中的 99% 支援空安全,我們相信現在是進行轉換的適當時間。

“Dart 3 完成了將健全的空安全帶到 Dart 生態系統的漫長旅程。”

Dart 3 引入了許多其他新功能,包括記錄、模式和類別修飾符,這將提高 Dart 程式碼的可讀性和流暢性。前往 主要的 Dart 3 部落格 以獲取更多資訊和範例。Flutter 本身已經開始利用這些新的 Dart 3 功能,因此您將看到我們自己的程式碼庫隨著這些功能的推出而有所改進。我們相信您會喜歡在自己的程式碼中使用它們。

SLSA 和軟體供應鏈安全性

在現代,保護關鍵軟體基礎架構免受威脅不幸地成為一種必要性。因此,除了之前提到的主要功能之外,我們的工程團隊今年 優先考慮了對安全性的投資。這種投資涵蓋安全性測試、自動化和供應鏈安全性。

“我們的團隊優先考慮了對安全性的投資”

透過進行以下工作,我們旨在讓企業對採用 Flutter 更有信心:

  • 開放原始碼安全基金會 最佳實務程式 作為一個有用的基準,幫助專案遵循安全性和漏洞管理的最佳實務。我們很高興地宣布,我們已完成 該程式通過級別的 100% 通過要求。我們將繼續推進,以證明符合 銀色金色 標準。
  • Flutter 也已在所有 Flutter 關鍵儲存庫上啟用了 OpenSSF ScorecardsDependabot。OpenSSF Scorecards 是一個靜態分析工具,檢查您的儲存庫是否符合最佳實務,並且在未遵循這些實務時建立議題。Dependabot 監控專案相依關係中的漏洞,並在必要時建立拉取請求以更新它們。使用這些工具,Flutter 團隊已在我們的網站和程式碼實驗室中識別並解決了超過 300 個漏洞。
  • Flutter 和 Dart SDK 以及這些 SDK 的發佈工作流程最近達到了 SLSA L1 級別。SLSA(軟體工件供應鏈級別)框架幫助開放原始碼專案維持強大的供應鏈安全性。達到 SLSA L1 是保護 Flutter 開發人員每天使用的工具的一個重要步驟。
  • 最後,我們對我們的基礎架構進行了許多安全性改進。這包括遷移到更安全的構建和測試環境,同時限制對這些環境的存取。此外,我們改進了 Flutter 框架和引擎工件的記錄和審計功能,提供對工件的出色保護。這些改進讓 Flutter 團隊對我們在構建過程中產生的工件如何處理有了更深入的了解。

開放原始碼專案,成千上萬人的作品

此版本中有成千上萬的其他變更,我們希望這些變更能讓現有的 Flutter 開發人員感到滿意。但值得注意的是,這些貢獻中有多少來自 Google 之外的開發人員。它們包括新功能;文件改進;將 Flutter 擴展到我們從未料想過的範圍的套件;以及可重現的議題報告和功能請求,這些請求為我們提供了關於如何改進的新觀點。

Flutter 不是一個 Google 專案,而是一個 我們所有人 的專案。我們非常感謝社群的多元化和熱情,這讓 Flutter 成為它現在的樣子。加入您參與這項使命是件令人愉快的事;Flutter 的未來將比以往任何時候都更加光明!


在 I/O 2023 上與 Flutter 和 Dart 一起向前邁進 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

http://creativecommons.org/licenses/by/4.0/