WasmがFlutter on the Webに もたらす変化

Transcript

1. WASMが Flutter on the Webに もたらす変化 © 2024 WinTicket Inc.
2. 株式会社 サイバーエージェント 24年新卒 株式会社 WinTicket Flutter⽣まれ Flutter育ち Flutterやってるやつは⼤体友達 ⾃⼰紹介 Kosei Akaboshi @akaboshinit
3. Wasmについて
4. Wasm(わずむ)? ヨクワカラナイ Wasm?
5. Web? Assembly? Wasm?
6. 󰢄Webのみの技術では無い 󰢄厳密にはAssemblyでも無い 󰢄⾔語とかでも無い Wasm?
7. じゃあ何なんだ? Wasm?
8. Wasmホームページを参照 https://webassembly.org/ Wasm?
9. WebAssembly（略称：Wasm）は、 スタックベースの仮想マシン⽤のバイナリ命令フォーマットで ある。 Wasmはプログラミング⾔語の 移植可能なコンパイル‧ターゲットとして設計している(略) Wasm?
10. WebAssembly（略称：Wasm）は、 スタックベースの仮想マシン⽤のバイナリ命令フォーマットで ある。 Wasmはプログラミング⾔語の 移植可能なコンパイル‧ターゲットとして設計している(略) Wasm?
11. バイナリ命令フォーマット??? Wasm?
12. バイナリ命令フォーマット Wasm?
13. バイナリ命令フォーマット | テキストフォーマット ⼈は読めない書けない           ⼈が読む書く 機械に優しい                ⼈間に厳しい Wasm?
14. 噛み砕くと Wasm?
15. Wasmは バイナリ命令フォーマットで吐き出される プログラミング⾔語のコンパイルターゲット Wasm?
16. Wasmは バイナリ命令フォーマットで吐き出される プログラミング⾔語のコンパイルターゲット Wasm? 🙆プログラミング⾔語のコンパイル(変換)先 🙆バイナリ形式のコードで扱う
17. さらに噛み砕くと Wasm?
18. プログラミング⾔語(ex.Dart)で作られた物を ある仕様を元に変換(コンパイル)して 作られるバイナリ形式(.wasm)のコード Wasm?
19. そのバイナリ形式(.wasm)の コードを何に使える? Wasm?
20. Webブラウザで実⾏できる Wasm?
21. Dartで作った関数をWasmに変換して ブラウザでWasmを実⾏すると Dartで書いたロジックを実⾏できる バイナリ形式なので、早くて軽くて⾊々嬉しい Wasm? 🙆プログラミング⾔語のコンパイル(変換)先 🙆バイナリ形式のコードで扱う
22. Wasm? Dartで作った関数をWasmに変換して ブラウザでWasmを実⾏すると Dartで書いたロジックを実⾏できる バイナリ形式なので、早くて軽くて⾊々嬉しい
23. Wasm? 早い、軽い、以外に何が嬉しいのか?
24. Wasm? Wasmを使うのも簡単 実際のWebでの使い⽅
25. Wasm? Wasmをビルドすると • *.wasm • *.js ⼆つのファイルが作られる
26. Wasm? Wasmは、ブラウザと直接通信できない JSのファイルを通して Wasmとネイティブ(ブラウザ)で 引数と返り値を双⽅向にやりとりする (webでダイアログを開いたり,Wasmで計算をさせたり)
27. Wasm? Wasmは、ブラウザと直接通信できない JSのファイルを通して Wasmとネイティブ(ブラウザ)で 引数と返り値を双⽅向にやりとりする (webでダイアログを開いたり,Wasmで計算をさせたり) FlutterでいうMethodChannelのように
28. Wasm? 早い、軽い、簡単、以外に何が嬉しいのか?
29. Wasmの思想から⾒ていきましょう Wasm?
30. Wasm Design Goal (13個のWasm設計の⽬標) Wasm?
31. 4個を抜粋 Wasm?
32. Wasm?DesignGoal 🐥Compact 🔐Safe 󰠁Platform-independent 👐Open
33. Wasm?DesignGoal 🐥Compact 🔐Safe 󰠁Platform-independent 👐Open
34. Wasm?DesignGoal 🐥Compact - ⼩さい成果物になる事 前述のバイナリ命令フォーマットに変換を⾏い ビルド成果物が⼩さいファイルサイズになる 実⾏ファイルのダウンロード速度が速く、実⾏速度が早い ↑軽くて早くて嬉しい
35. Wasm?DesignGoal 🔐Safe - 安全に実⾏できる事 Wasm実⾏環境はサンドボックスで実⾏され、Wasm実⾏の メモリは別処理とは独⽴しています Wasmに⼊⼒されたデータ以外にはアクセスできなく安全 併せて、許可されていない外部の機能は実⾏できない ↑バイナリ命令フォーマットで、なんか簡単にシステム壊せ ちゃいそうだけど安全が担保される仕組みがあって嬉しい
36. Wasm?DesignGoal 󰠁Platform-independent - どのような環境でも実⾏できる事 Wasmは仕様から環境(個々のブラウザ)への依存が無いよう 意識されています 環境依存は別の仕組みで抽象化していて、Wasmは依存のた めだけに⾯倒なことを頑張らなくて良いようにできています ↑ブラウザなどの環境は無数にあり、個々に仕様差がある けど、その差分を気にせず集中できるのが嬉しい
37. Wasm?DesignGoal 👐Open - シンプルに外部の環境と相互通信ができる事 Platform-independentであったように依存が無いように なっているが、OSやブラウザなどの環境が持つネイティブ 機能を呼び出すための安全な呼び出しや相互通信の⽅法をつ くりたい ↑どうしても環境に依存する時は必ずある、その時は抽象化 された⽅法で複雑性を増やさず、依存を呼び出せて嬉しい
38. Wasm?DesignGoal 👐Open - シンプルに外部の環境と相互通信ができる事 OSやブラウザなどの環境が持つネイティブ機能を呼び出す ための、安全な呼び出しや相互通信の⽅法を確⽴する ↑どうしても環境に依存する時は必ずある、その時は抽象化 された⽅法で複雑性を増やさず、依存を呼び出せて嬉しい 似ているイメージはFlutterのMethodChannel
39. 👐Open - シンプルに外部の環境と相互通信ができる事 OSやブラウザなどの環境が持つネイティブ機能を呼び出す ための、安全な呼び出しや相互通信の⽅法を確⽴する 似ているイメージはFlutterのMethodChannel MethodChannelのように 依存が注⼊可能でロジックが綺麗になって嬉しい Wasm?DesignGoal
40. 👐Open - シンプルに外部の環境と相互通信ができる事 OSやブラウザなどの環境が持つネイティブ機能を呼び出す ための、安全な呼び出しや相互通信の⽅法を確⽴する MethodChannelのように 依存が注⼊可能でロジックが綺麗になって嬉しい ↑ちなみに呼び出しや通信などはFlutter内部に組み込まれていて、 MethodChannelのように開発者がネイティブを書く必要は無い Wasm?DesignGoal
41. Wasm? (再掲)Wasmは早い、軽い、以外に 何が嬉しいのか?
42. Wasm? 🐥Compact(⼩さい) 🔐Safe(安全) 󰠁Platform-independent(環境適応簡単) 👐Open(ネイティブ機能の呼び出しできる) ↑嬉しいことずくめ
43. Wasmビルドを使うことで なぜFlutter on the Webが早くなるのか
44. レンダラーの違い Flutter Renderer
45. レンダラーについておさらい Flutter Renderer
46. Flutter Renderer レンダラーとは FlutterのWidget等のUI要素を 元にUI表⽰(描画)を担うシステムのこと
47. Flutter on the Webには 現在3種類のレンダラーがあります Flutter Renderer
48. 🕸HTMLレンダラー 📋CanvasKitレンダラー 🫦skwasmレンダラー Flutter Renderer
49. 👴HTMLレンダラー(初期から有) 👴CanvasKitレンダラー(初期から有) 🎉skwasmレンダラー   ↑Wasmを使っている場合(skwasmしか使えない) Flutter Renderer
50. ⼀つずつ公式ドキュメントを 混ぜながら紹介 Flutter Renderer
51. 📋CanvasKitレンダラー 最新のすべてのブラウザーと互換性があり、デフォルトのビルド モードで使⽤さ れるレンダラー WebAssembly にコンパイルされた Skia のコピーが含まれていて、ダウンロー ドサイズが約 1.5 MB 増加する => Flutterチームが⼤事に育ててきたレンダラー、かなり最適化されている => レンダリング⽅法としてHTMLのcanvas要素にUIを描画する Flutter Renderer
52. 📋CanvasKitレンダラー 最新のすべてのブラウザーと互換性があり、デフォルトのビルド モードで使⽤さ れるレンダラー WebAssembly にコンパイルされた Skia のコピーが含まれていて、ダウンロー ドサイズが約 1.5 MB 増加する => Flutterチームが⼤事に育ててきたレンダラー、かなり最適化されている => レンダリング⽅法としてHTMLのcanvas要素にUIを描画する Flutter Renderer
53. 📋CanvasKitレンダラー 最新のすべてのブラウザーと互換性があり、デフォルトのビルド モードで使⽤さ れるレンダラー WebAssembly にコンパイルされた Skia のコピーが含まれていて、ダウンロー ドサイズが約 1.5 MB 増加する => Flutterチームが⼤事に育ててきたレンダラー、かなり最適化されている => レンダリング⽅法としてHTMLのcanvas要素にUIを描画する Flutter Renderer
54. Flutter Renderer WebAssembly にコンパイルされた Skia のコピーが含まれていて Skiaとは、Flutterのアプリ(iOS,Android)でも使われている C++製のGoogleのレンダリングライブラリ 汎⽤的なレンダリングライブラリなため、Flutterに限らず他のフレーム ワーク等でも使われている(KMM)
55. Flutter Renderer WebAssembly にコンパイルされた Skia のコピーが含まれていて Skiaとは、Flutterのアプリ(iOS,Android)でも使われている C++製のGoogleのレンダリングライブラリ Flutter on the WebではSkiaをWasmでビルドしたもの(CanvasKit)を 使って描画の処理を⾏っている
56. Flutter Renderer WebAssembly にコンパイルされた Skia のコピーが含まれていて Skiaとは、Flutterのアプリ(iOS,Android)でも使われている C++製のGoogleのレンダリングライブラリ Flutterに突然Wasmが来たと感じがちだが、今までデフォルトで使われてた CanvasKitもWasmだったので、Wasmに何だか親近感を持てるはずです
57. 📋CanvasKitレンダラー 最新のすべてのブラウザーと互換性があり、デフォルトのビルド モードで使⽤さ れるレンダラー WebAssembly にコンパイルされた Skia のコピーが含まれていて、ダウンロー ドサイズが約 1.5 MB 増加する => Flutterチームが⼤事に育ててきたレンダラー、かなり最適化されている(3年) => レンダリング⽅法としてHTMLのcanvas要素にUIを描画する Flutter Renderer
58. 📋CanvasKitレンダラー 最新のすべてのブラウザーと互換性があり、デフォルトのビルド モードで使⽤さ れるレンダラー WebAssembly にコンパイルされた Skia のコピーが含まれていて、ダウンロー ドサイズが約 1.5 MB 増加する => Flutterチームが⼤事に育ててきたレンダラー、かなり最適化されている => レンダリング⽅法としてHTMLのcanvas要素にUIを描画する Flutter Renderer
59. HTMLのcanvas要素は こんな感じのもの JSで指⽰を出してUIを作る ↑Flutterで似ているものとしては CustomPainter Flutter Renderer
60. 🕸HTMLレンダラー HTMLレンダラーは、HTML 要素、CSS、canvas 要素、SVG 要素の組み合わせ てレンダリング => CanvasKitがcanvas要素にだけ書き込みするのに対して、様々な要素で構成 するため、内部実装の複雑性が⾼い Flutter Renderer
61. 🕸HTMLレンダラー 廃⽌の⽅針 Flutter Renderer
62. ☂ Flutter Web の HTML レンダラーを廃⽌および削除する予定 ‧HTML レンダラーは、 他レンダラーと⽐較すると複雑で パフォーマンスが低くグラフィック表現⼒に限界があります。 ‧他レンダラーがHTML レンダラーの複雑さ、メンテナンスコ ストを上回る段階まで成熟しました。 =>まだ完全に無くなっていないが、使えなくなる Flutter Renderer
63. 🫦skwasmレンダラー WebAssembly にコンパイルされ、別のスレッドでのレンダリングをサポートす る Skia のよりコンパクトなバージョン Flutter Renderer
64. 🫦skwasmレンダラー WebAssembly にコンパイルされ、別のスレッドでのレンダリングをサポートす る Skia のよりコンパクトなバージョン Flutter Renderer
65. 🫦skwasmレンダラー WebAssembly にコンパイルされ、別のスレッドでのレンダリングをサポートす る Skia のよりコンパクトなバージョン ↑Flutter on the Web with Wasmが早くなる理由の⼀つ Flutter Renderer
66. Skia のよりコンパクトなバージョン CanvasKit > Flutter on the WebではSkiaをWasmでビルドしたもの(CanvasKit)を 使って描画の処理を⾏っている どこがコンパクトなのか? Flutter Renderer
67. Skia のよりコンパクトなバージョン CanvasKit > Flutter on the WebではSkiaをWasmでビルドしたもの(CanvasKit)を 使って描画の処理を⾏っている CanvasKitはWasmなので、冒頭に紹介したように ブリッジ⽤JSと本体のWasmに分けられる Flutter Renderer
68. Skia のよりコンパクトなバージョン CanvasKit > Flutter on the WebではSkiaをWasmでビルドしたもの(CanvasKit)を 使って描画の処理を⾏っている CanvasKitはWasmなので、冒頭に紹介したように ブリッジ⽤JSと本体のWasmに分けられる skwasmではCanvasKitのWasm本体にwasm-to-wasmバインディングで 直接接続する、だからコンパクト Flutter Renderer
69. Skia のよりコンパクトなバージョン CanvasKit > Flutter on the WebではSkiaをWasmでビルドしたもの(CanvasKit)を 使って描画の処理を⾏っている skwasmではCanvasKitのWasm本体にwasm-to-wasmバインディングで 直接接続する、だからコンパクト WasmとWasmが直接通信することで ブリッジJSを使うオーバーヘッドを減らすことができる Flutter Renderer
70. Skia のよりコンパクトなバージョン CanvasKit > Flutter on the WebではSkiaをWasmでビルドしたもの(CanvasKit)を 使って描画の処理を⾏っている skwasmではCanvasKitのWasm本体にwasm-to-wasmバインディングで 直接接続する、だからコンパクト WasmとWasmが直接通信することで ブリッジJSを使うオーバーヘッドを減らすことができる Flutter Renderer
71. 🫦skwasmレンダラー skwasmではCanvasKitのWasm本体にwasm-to-wasmバインディングで直接 接続する、だからコンパクト WasmとWasmが直接通信することで ブリッジJSを使うオーバーヘッドを減らすことができる Flutter Renderer
72. Flutter on the WebがWasmによって受ける影響は⼤きく Flutter Renderer
73. Wasmビルドで良くなること
74. パフォーマンスの違い Wasmになって良くなること
75. 同⼀のスクロール動作とページ遷移をした時の 動作完了時の1フレーム⽬の表⽰完了msを レンダラーごとに⽐較 Wasmになって良くなること
76. Wasmになって良くなること 同⼀のスクロール動作とページ遷移をした時の 動作完了時の1フレーム⽬の表⽰完了msを レンダラーごとに⽐較 ↑結果としてWasmの表⽰完了msが CanvasKit(JSビルド)より早ければ嬉しい
77. Wasmになって良くなること
78. Wasmになって良くなること 50%の確率で38%⾼速 90%の確率で52%⾼速 95%の確率で54%⾼速 CanvasKitに⽐べ Wasmの速度が⾼速
79. Wasmになって良くなること 50%の確率で38%⾼速 90%の確率で52%⾼速 95%の確率で54%⾼速 かなり効果的
80. 実際のWasm対応と、よくある罠
81. Wasmファイル作成からWeb実⾏の流れ Flutter on the Web on Wasm?
82. Flutterプロジェクトの準備 Flutter on the Web on Wasm?
83. 新規プロジェクトより既存プロジェクトを Wasm対応させる場合の⽅が難易度⾼いの で、そちらを解説 Flutter on the Web on Wasm?
84. ⛔WasmのStableはFlutter 3.22なので それ以上のバージョンのFlutterにする Flutter on the Web on Wasm?
85. ⛔JavaScript interoperabilityの対応 Flutter on the Web on Wasm?
86. ⛔JavaScript interoperabilityの対応 ここは結構しんどいかもしれません Flutter on the Web on Wasm?
87. ⼀瞬Wasmから離れて ⛔JavaScript interoperabilityの話 ⛔JavaScript interoperability
88. Flutter 3.22のタイミングで FlutterからのJSへのアクセス⽅法に⼤幅な 変更が⼊った ⛔JavaScript interoperability
89. Wasmを使うためには JavaScript interoperabilityの対応が必要 ⛔JavaScript interoperability
90. 具体的な対応としては 右のパッケージを左に変更 ⛔JavaScript interoperability(余談)
91. 具体的な対応としては 右のパッケージを左に変更 内部仕様結構変わっている ⛔JavaScript interoperability(余談)
92. ⛔JavaScript interoperability対応は 依存パッケージなども含め 全てで⾏う必要がある ⛔JavaScript interoperability
93. ⛔JavaScript interoperability 依存パッケージでは 基本は3.22リリース付近でJavaScript interoperability対応バージョンが出てるの でバージョン上げを⾏う ⛔JavaScript interoperability
94. ⛔JavaScript interoperability 対応パッケージがリリースされてない場合 は、forkなどして⾃⼒で対応するしか無い ⛔JavaScript interoperability
95. ちなみにFlutter3.22だったとしてもWasm を使⽤しないのであれば、 JavaScript interoperability対応しなくて も問題なし ⛔JavaScript interoperability
96. Wasmに戻ります Flutter on the Web on Wasm?
97. ⛔Flutter 3.22 <= ⛔JavaScript interoperability この対応でdebug起動の準備完了 Flutter on the Web on Wasm?
98. “--wasm”を付けて”flutter run” Flutter on the Web on Wasm?
99. Wasmでdebug起動🎉 Flutter on the Web on Wasm?
100. To Be Continued…