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
380
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
Denoでパッケージを作りJSRに公開する
askua
0
21
WASI 0.2のinit処理
askua
1
52
TSのコードをRustで書き直した話
askua
4
1.1k
久しぶりに自作ライブラリをリファクタした話
askua
0
82
今年の振り返り
askua
0
70
Wasmってなに_ 新宿御苑.wasm #2024.12.11
askua
1
330
TinyGoを使ったVSCode拡張機能実装
askua
3
390
Deno+JSRでパッケージを作って公開する
askua
0
230
最新のWasm事情
askua
5
3k
Other Decks in Technology
See All in Technology
AWSエンジニアがSAPのデータ抽出してみた
mayumi_hirano
0
110
SRE NEXT CfP チームが語る 聞きたくなるプロポーザルとは / Proposals by the SRE NEXT CfP Team that are sure to be accepted
chaspy
1
360
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
20
19k
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
340
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
180
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
320
「それはhowなんよ〜」のガイドライン #orestudy
77web
9
2.3k
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.5k
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.1k
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
130
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
250
バックエンド留学した話/Backend study abroad story
kaonavi
0
130
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
377
70k
A Tale of Four Properties
chriscoyier
158
23k
Gamification - CAS2011
davidbonilla
81
5.2k
How STYLIGHT went responsive
nonsquared
99
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
630
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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