Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter for Web 2024
Search
asuka
September 15, 2024
Technology
1
340
Flutter for Web 2024
FlutterKaigi mini #2 @Ishikawaの資料.
https://flutterkaigi.connpass.com/event/325469/
asuka
September 15, 2024
Tweet
Share
More Decks by asuka
See All by asuka
TSのコードをRustで書き直した話
askua
4
1k
久しぶりに自作ライブラリをリファクタした話
askua
0
69
今年の振り返り
askua
0
59
Wasmってなに_ 新宿御苑.wasm #2024.12.11
askua
1
290
TinyGoを使ったVSCode拡張機能実装
askua
3
340
Deno+JSRでパッケージを作って公開する
askua
0
200
最新のWasm事情
askua
5
2.9k
あなたの知らない組版の世界
askua
1
79
夏の思い出
askua
1
89
Other Decks in Technology
See All in Technology
Tech Blog執筆のモチベート向上作戦
imamura_ko_0314
0
730
DevSecOps入門:Security Development Lifecycleによる開発プロセスのセキュリティ強化
yuriemori
0
230
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
340
[SRE kaigi 2025] ガバメントクラウドに向けた開発と変化するSRE組織のあり方 / Development for Government Cloud and the Evolving Role of SRE Teams
kazeburo
4
1.9k
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
2
220
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
4
260
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
100
CNAPPから考えるAWSガバナンスの実践と最適化
yuobayashi
5
680
BLEAでAWSアカウントのセキュリティレベルを向上させよう
koheiyoshikawa
0
120
あなたの興味は信頼性?それとも生産性? SREとしてのキャリアに悩むみなさまに伝えたい選択肢
jacopen
6
2.9k
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
3.9k
Postman Vaultを使った秘密情報の安全な管理
nagix
3
100
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
Faster Mobile Websites
deanohume
305
30k
How GitHub (no longer) Works
holman
312
140k
The Invisible Side of Design
smashingmag
299
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Done Done
chrislema
182
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Making Projects Easy
brettharned
116
6k
Transcript
Flutter for Web 2024 FlutterKaigi mini #2 @Ishikawa 1
WHOIS 2 株式会社モニクルに所属 - SWE/プロダクトSRE - ウェブシステムの運用開発 Wasmの同人誌を書いてるWasm の人!!! asuka@a_skua
フロントエンドカンファレンス北海道2024 ↓Wasmの話をしてきた
フロントエンドカンファレンス北海道に出していたCfP Dartのウェブ周りの話がしたかった↓ 3
FlutterというよりはDart寄りの話 4
2024年のDart • Wasmのサポート (Dart 3.3) ◦ DartとWebAssembly • Flutter 3.22
でstableでサポート ◦ Support for WebAssembly (Wasm) 5 $ flutter build web --wasm Wasmにビルドできるようになった main.dart.mjsとmain.dart.wasmが出力されている
Wasmを使うと2〜3倍ほど パフォーマンスがよくなるらしい 6 やったね
実際使えそう? 7
• Safariで動かない問題 • FireFoxで動かない問題 → 今まで通りcanvaskit.wasmで動いている なんだかんだまだ安定していない(1) 8 Support for
WebAssembly (Wasm) DartのWasmはWasmGCがランタイムに実装されているこ とが前提としている Safari→WasmGCをまだ実装していない FireFox→実装にバグがあって使えない
なんだかんだまだ安定していない(2) • CrossOriginヘッダーが必要 →GitHub Pagesでmain.dart.wasmは使われない → 今まで通りcanvaskit.wasmで動いている 9 $ dhttpd
'--headers=Cross-Origin-Embedder-Policy=credentialless;Cross-Origin-Opener-Policy=same-origin' skwasmを外部から取得して実行するため, サーバーレスポンスにこれらのヘッダーが必要
Flutterではできるけど,Dartだと出来ないが結構ありそう • httpパッケージをそれぞれ実行してみると... 10 import 'package:http/http.dart' as http; final response
= await http.get(Uri.parse('https://example.com')); print(response.body); ⭕ Flutter ❌ Dart $ flutter build web --wasm $ dart compile wasm
Q. Why ⭕Flutter ❌Dart ? A. Flutterチームが頑張って実装してくれているから (多分) 11 Wasmはそもそも外部との通信が出来ない設計
(Wasm自体がサンドボックスになっている) 外部と通信する部分は 頑張って実装する 必要がある
頑張って実装した 12
頑張って実装した 13 Wasmから実行できる https://pub.dev/packages/cf_workers final response = await fetch( Request('GET',
Uri.parse('https://example.com')).toJS ).toDart; print(response.body);
頑張って実装するには • dart:js_interop • dart:js_interop_unsafe 現状この2つのライブラリが必要 14 dart:js_interop →JSの型が定義されている →@JSデコレータ
dart:js_interop_unsafe →JSの関数呼び出しなどが定義されている
dart:js_interop こういう使い方ができる 15 import 'dart:js_interop'; @JS('greet') external JSString greet(JSString name);
void main() { print(greet('Dart'.toJS).toDart); } ここの型の扱いに注意が必要 ※ DartとJSの型を直接やり取りできない (globalThis as any).greet = (name: string) => `Hello, ${name}!`; JS側の実装例
dart:js_interop_unsafe JSオブジェクトのコンストラクタの呼び出しやメソッド,プロパティへのアクセスを提供. 16 final jsreq = globalContext .getProperty<JSFunction>("Request".toJS) .callAsConstructor<JSRequest>(“https://example.com”.toJS); final
url = jsreq.getProperty<JSString>("url".toJS).toDart; 少し面倒だけど,DartからJSオブジェクトを操作するための機能が提供されている.
Wasmがサポートされて変わったこと 17
Wasmがサポートされて変わったこと 18 dat2js • main.dart.js を出力 dart2wasm • main.dart.wasm •
main.dart.mjs import "./main.js"; import { compileStreaming } from "./main.dart.mjs"; const app = await compileStreaming( fetch(new URL("./main.dart.wasm", import.meta.url)), ); const instance = await app.instantiate({}); instance.invokeMain(); ESモジュールをサポート
まだ変わってないこと グローバルプロパティ にしかアクセスできない. 19 import 'dart:js_interop'; @JS('greet') external JSString greet(JSString
name); void main() { print(greet('Dart'.toJS).toDart); } @JSデコレーターは グローバルしか定義できない (globalThis as any).greet = (name: string) => `Hello, ${name}!`; globalThisにマッピングする必要がある
まだ変わってないこと グローバルプロパティ にしかアクセスできない. → ESモジュールに対応するなら,スコープをグローバルではなくモジュールに限定した い. 20
気になる機能 Wasmはモジュールのimport/exportをサポートしている. Imports and exports (dart-lang/sdk/pkg/dart2wasm) 21 @pragma("wasm:import", "foo.bar") external
void fooBar(Object object); const instance = await app.instantiate({ foo: { bar() { }, } }); instance.invokeMain(); Wasmモジュールのimport/exportをDartでもサ ポートしている (※現状はDartの内部向け) 今後この機能が開発者も使えるようになると嬉しい
dart2wasmはまだまだ開発中 22 • daart2wasmがリリースされた直後は@pragmaも使うことができてたが,最新版だ と内部向け機能としてコンパイルエラーになる • リリース直後と現在の.mjsファイルの中身が結構書き換わっている →この辺りの仕様が安定するまでもう少しかかりそう
Flutter for Web 2024 • Wasmビルドがstableにはなったけど,まだアーリー向けの機能で安定するまでに もう少しかかりそう • Wasmが使えない場合はcanvaskitが自動的に使われるので,とりあえず--wasm オプションつけておくでもそんなにデメリットない
• Flutter側は実装頑張ってくれているけど,Dartから直接Wasmを使おうとすると ,Wasmの仕様を知らないとハマる罠がそこそこある ◦ (著書買ってね❤) • dart2wasmでESモジュールがサポートされたので,Webとの相性が良さそうなので 今後の発展に期待したい 23