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
430
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
Wasmで社内ツールを作って配布しよう
askua
0
200
Wasm元年
askua
0
190
wstdなんだか良さそう
askua
0
67
Dartでウェブ開発 (やりたい)
askua
0
57
Denoでパッケージを作りJSRに公開する
askua
0
42
WASI 0.2のinit処理
askua
1
110
TSのコードをRustで書き直した話
askua
4
1.1k
久しぶりに自作ライブラリをリファクタした話
askua
0
120
今年の振り返り
askua
0
96
Other Decks in Technology
See All in Technology
帳票Vibe Coding
terurou
0
140
広島銀行におけるAWS活用の取り組みについて
masakimori
0
120
JOAI発表資料 @ 関東kaggler会
joai_committee
1
240
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
270
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
GCASアップデート(202506-202508)
techniczna
0
250
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
290
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Code Review Best Practice
trishagee
70
19k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Visualization
eitanlees
146
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
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