Flutter for Web
Google I/O 2019 來啦，作為一名 Web 開發，今年比較關注的是 Flutter 的動態，就現在來看今天的 Dev Keynote 上關於 Flutter 的部分有如下三個進展：
- Flutter for Web
- Flutter 1.5
- #FlutterCreate (具體檢視 https://www. youtube.com/watch? v=WLvpROMUjYQ )
如果這是你第一次聽到 Flutter你一定很疑惑什麼是 Flutter，在 IO19 之前它的目標是這樣的：
Flutter 是 Google 用以幫助開發者在 iOS 和 Android 兩個平臺開發高質量原生 UI 的移動 SDK。
它和其他跨平臺框架比如 React Native 又有啥區別呢，如果你滿腦子問號的話，可以先看看我之前寫的這篇文章啦 讓我們在2019年重新認識 Flutter
Google I/O 2019 關於 Flutter 的完整視訊列表可見 https://www. youtube.com/playlist? list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV
如果你對 Google IO 的其他內容感興趣，可以看下這個 Google IO 十分鐘速覽視訊：
十分鐘速覽 Google I/O 2019 https://www.zhihu.com/video/1109517613276942337
接下來，我詳細說說 Flutter for Web 的訊息。
Flutter - from Mobile to Multi-Platform
雖然當下只是 Technical Preview，但還是能看到不少動態。Flutter for Web 是 Flutter 基於標準 Web 技術（即 HTML，CSS 和 JavaScript）的一個相容實現版本，使得「一次編寫到處執行」的主角除了 JavaScript 外又多了一個選擇——Dart。
Flutter for Web 簡介
根據 Flutter 放出的架構圖可以看到，Flutter for Web 通過 DOM, Canvas 以及 CSS 實現了 Flutter 的核心繪圖層，技術上是用的 Dart 以及 Dart 優化過的 JavaScript 編譯器，將 Flutter 核心、框架層以及你的應用程式碼一起編譯成 Web 程式碼。雖然該版本還處於開發階段，但 Google 簡單羅列了幾個有價值的場景：
- 與 PWA 的結合（由 Flutter for Web 生成的程式碼可以打包成 PWA 應用，以提供更優雅的使用者體驗）
- 嵌入式互動內容的高效開發（比如資料視覺化實現，線上 Web 工具實現等）
- 向 Flutter 原生應用動態下發內容（Flutter for Web 希望通過 web view 的形式做到線上呈現與 app embedded 程式碼的動態傳送，避免重寫）
Flutter for Web 的程式碼長啥樣呢，我們看看 Hello World 的實現：
import 'package:flutter_web/material.dart';
void main() {
runApp(new Text('Hello World', textDirection: TextDirection.ltr));
}
預覽版注意事項
在 IO19 放出更多關於 Flutter 的動態之前，關於 Flutter for Web 預覽版有幾點是需要注意的：
- 當下的 Flutter for Web 基於 Flutter 專案 fork 開發，以保證可以同步核心 Flutter 的迭代；
- Google 已經開始將 Flutter for Web 程式碼合併到 Flutter core 中。最終願景是將 Flutter 打造成一個適用於全平臺的一套 SDK/Framework；
- Flutter for Web API 與 Flutter API 一致，但當下專案中是單獨打包的；
- 你可以直接將現有 Flutter 應用重新打包成 web 預覽版，但會有一些警告，詳見專案說明 flutter/flutter_web
- Flutter for Web 現在還不接受 PR，但有任何建議是可以新建 issue 提出的，issue 統一通過打標提在 Flutter 專案中，而不是 Flutter for Web。
Demo
其他
- https:// developers.googleblog.com /2019/05/Flutter-io19.html
- Developer Keynote (Google I/O '19) https://www. youtube.com/watch? v=LoLqSbV1ELU
- Flutter for Web 專案地址 https:// github.com/flutter/flut ter_web
- Gitter 聊天室 https:// gitter.im/flutter/flutt er_web
- Flutter for Web https:// flutter.dev/web
- Bringing Flutter to the Web https:// medium.com/flutter-io/b ringing-flutter-to-the-web-904de05f0df0?linkId=67084023
更多細節可以關注 IO19 後續關於 Flutter 的議題 https:// events.google.com/io/ ，也可以催@程路 分享哦，他在現場！
整理自回答 Google I/O 2019 上，釋出了哪些讓人期待的新品或技術？
個人公眾號 - 微信搜尋「 黯曉 」或掃這個二維碼
知乎專欄 -初級前端工程師
生活中難免犯錯，請多多指教！
參考
- https://www.youtube.com/watch?v=4P5ISYA0yyk
- The support Flutter now offers for a unified environment for web and mobile content enables you to deploy content online or embedded in an app without rewriting.