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
350
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
WASI 0.2のinit処理
askua
1
33
TSのコードをRustで書き直した話
askua
4
1k
久しぶりに自作ライブラリをリファクタした話
askua
0
76
今年の振り返り
askua
0
62
Wasmってなに_ 新宿御苑.wasm #2024.12.11
askua
1
310
TinyGoを使ったVSCode拡張機能実装
askua
3
360
Deno+JSRでパッケージを作って公開する
askua
0
210
最新のWasm事情
askua
5
2.9k
あなたの知らない組版の世界
askua
1
80
Other Decks in Technology
See All in Technology
偏光画像処理ライブラリを作った話
elerac
1
170
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Share my, our lessons from the road to re:Invent
naospon
0
140
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
190
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
AIエージェント入門
minorun365
PRO
31
17k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
5
510
What's new in Go 1.24?
ciarana
1
110
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
140
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
170
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Side Projects
sachag
452
42k
Adopting Sorbet at Scale
ufuk
74
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
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