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
60
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
3
12k
エンジニアコミュニティ
askua
0
46
技術書典16オフライン振り返り
askua
0
47
技術書典16新刊紹介
askua
0
220
新刊紹介
askua
0
98
Go1.21とWebAssembly
askua
0
2.9k
技術書典14の振り返り
askua
0
130
async await完全に理解した
askua
0
40
Flutter2でweb appを作る
askua
0
24
Other Decks in Technology
See All in Technology
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
200
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
200
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
プログラム検証入門
riru
6
860
20240912 JJUGナイトセミナー
mii1004
0
140
ナレッジグラフとLLMの相互利用
koujikozaki
0
400
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
210
リアルお遍路+SORACOM IoT
ozk009
1
130
サプライチェーン攻撃に備える
ryunen344
0
270
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
190
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
280
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
221
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Designing for Performance
lara
604
68k
Optimizing for Happiness
mojombo
375
69k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Bash Introduction
62gerente
608
210k
Code Review Best Practice
trishagee
62
16k
BBQ
matthewcrist
83
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
The Invisible Customer
myddelton
119
13k
What's in a price? How to price your products and services
michaelherold
242
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
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