PHPとWebAssembly

#phpcon2022
で登壇した内容です。
https://fortee.jp/phpcon-2022/proposal/8e0b91bd-4606-4b1f-9ea3-ac133fd78444

Transcript

1. © 2012-2022 BASE, Inc. 1 PHP Conference 2022 BASE株式会社 永野 峻輔 ( @glassmonkey ) PHPで始める WebAssembly入門
2. © 2012-2022 BASE, Inc. 2 @glassmonekey #phpcon2022 このトークの目的 • WebAssemblyの基本的な理解 • PHPerがWebAssemblyと仲良くなること
3. © 2012-2022 BASE, Inc. 3 @glassmonekey #phpcon2022 自己紹介 所属 BASE 株式会社 BASE BANKチーム Engineering Program Manager 資金調達プロダクト「YELL BANK」の開発責任者やってます。 Go, PHP, Pythonを書きつつ時々データエンジニアも。 趣味 Flutterアプリ開発 hasura.ioやsupabaseがマイブーム SNS Twitter： @glassmonekey　 Github： https://github.com/glassmonkey 永野 峻輔 (ながの しゅんすけ） 去年のPHP ConferenceでLT
4. © 2012-2022 BASE, Inc. 4 1 2 3 @glassmonekey #phpcon2022 WebAssemblyとは WebAssembly入門 PHPとWebAssembly 今日話すこと
5. © 2012-2022 BASE, Inc. 5 © 2012-2022 BASE, Inc. 5 WebAssemblyとは
6. © 2012-2022 BASE, Inc. 6 @glassmonekey #phpcon2022 WebAssemblyとは Webブラウザを含む実行環境で コード実行とコンパクトなコード表現を実現するバイナリ形式 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
7. © 2012-2022 BASE, Inc. 7 @glassmonekey #phpcon2022 対応状況 https://developer.mozilla.org/ja/docs/WebAssembly モダンな環境なら基本動く
8. © 2012-2022 BASE, Inc. 8 @glassmonekey #phpcon2022 例 (webassembly.sh) Linuxを模倣したもの https://webassembly.sh
9. © 2012-2022 BASE, Inc. 9 © 2012-2022 BASE, Inc. 9 なぜWebAssemblyなのか
10. © 2012-2022 BASE, Inc. 10 @glassmonekey #phpcon2022 Webアプリのリッチ化
11. © 2012-2022 BASE, Inc. 11 @glassmonekey #phpcon2022 JavaScriptだけだと辛い • ブラウザゲーム(特に3D) • AR/VR • 画像処理 … etc
12. © 2012-2022 BASE, Inc. 12 @glassmonekey #phpcon2022 JavaScript + WebAssembly(WASM) WebAssembly: How and why https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/ WASMはJSの一部の代替え
13. © 2012-2022 BASE, Inc. 13 @glassmonekey #phpcon2022 導入事例から見るWebAssembly https://madewithwebassembly.com/
14. © 2012-2022 BASE, Inc. 14 @glassmonekey #phpcon2022 Figma • パフォーマンス向上 (約3倍） • もともとはasm.js (C++からコンパイルしたJS)をつかっていた　 https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/
15. © 2012-2022 BASE, Inc. 15 @glassmonekey #phpcon2022 1Password • 入力解析部分で主な改善 • chromeで最大13倍、firefoxだと39倍　 https://blog.1password.com/1password-x-may-2019-update/
16. © 2012-2022 BASE, Inc. 16 @glassmonekey #phpcon2022 TensorFlow • パフォーマンス向上(約10倍） • 機械学習のようなCPUなどのリソースを酷使する場合とは相性が良い https://yashints.dev/blog/2019/12/17/tfjs-wasm
17. © 2012-2022 BASE, Inc. 17 © 2012-2022 BASE, Inc. 17 拡大する用途
18. © 2012-2022 BASE, Inc. 18 @glassmonekey #phpcon2022 Web Assemblyとは（2回目） Webブラウザを含む実行環境で コード実行とコンパクトなコード表現を実現するバイナリ形式 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
19. © 2012-2022 BASE, Inc. 19 @glassmonekey #phpcon2022 Web Assemblyの特徴 • 移植性 ◦ 任意の言語でWebAssemblyにbuildできたら良い • セキュア ◦ Runtimeが隔離（Sandbox化）されているのでセキュア WASM Host System WASI API WASM Runtime
20. © 2012-2022 BASE, Inc. 20 @glassmonekey #phpcon2022 WASI(Web Assembly System Interface) 任意のシステムで呼び出すための仕様 • 汎用的なランタイムとして活用 ◦ ex) Wasmer, Wasmtime, Cranelift, WAMR • Edgeコンピューティングでの活用 ◦ ex) CloudflareWorkers (Cloudflare), Compute@Edge (Fastly) • K8sでの活用 ◦ ex) proxy-wasm 詳しくは https://bytecodealliance.org/ WASM Host System WASI API WASM Runtime
21. © 2012-2022 BASE, Inc. 21 © 2012-2022 BASE, Inc. 21 WebAssembly入門
22. © 2012-2022 BASE, Inc. 22 © 2012-2022 BASE, Inc. 22 WebAssemblyの仕様
23. © 2012-2022 BASE, Inc. 23 @glassmonekey #phpcon2022 Web Assemblyと仕様 • 基本仕様 ◦ WASM-Core • ブラウザ用仕様 ◦ WASM Web API ◦ WASM JS API • ブラウザ外仕様 ◦ WASI (Web Assembly System Interface) https://webassembly.org/specs/ それぞれ別物！！
24. © 2012-2022 BASE, Inc. 24 @glassmonekey #phpcon2022 サンプルプログラム https://github.com/glassmonkey/web-assembly-sample glassmonkey/web-assembly-sample • GoのサブセットのTinyGoを使用 ◦ Goは普段業務で使っているので • ブラウザ版とブラウザ外用途に対応
25. © 2012-2022 BASE, Inc. 25 © 2012-2022 BASE, Inc. 25 ブラウザ用途
26. © 2012-2022 BASE, Inc. 26 @glassmonekey #phpcon2022 デモ https://github.com/glassmonkey/web-assembly-sample
27. © 2012-2022 BASE, Inc. 27 @glassmonekey #phpcon2022 Go側のコード • main関数はコンパイルのおまじないで必要 • //exportキーワードでwasmの関数として公開可能
28. © 2012-2022 BASE, Inc. 28 @glassmonekey #phpcon2022 ビルド • TinyGoを事前にインストールしておくこと • wasmをブラウザから呼び出すためのグルーコードであるwasm_exec.jsをコピー • ビルドターゲットをwasmでビルド
29. © 2012-2022 BASE, Inc. 29 @glassmonekey #phpcon2022 JavaScript側の呼び出し • Goオブジェクトはwasm_exec.jsで定義されている、WASMの呼び出しラッパー • exports以下に公開関数が存在する • 数値以外のやりとりは現状できなさそう ( tinygo/issues/645 )
30. © 2012-2022 BASE, Inc. 30 @glassmonekey #phpcon2022 余談 (Rustでビルドした場合) • Rustの場合 wasm-pack を利用してビルドする • wasm-packが生成するグルーコードが優秀 • テキストなどのやりとりもできる ( wasm-bindgen )
31. © 2012-2022 BASE, Inc. 31 © 2012-2022 BASE, Inc. 31 ブラウザ外用途
32. © 2012-2022 BASE, Inc. 32 @glassmonekey #phpcon2022 Go側のコード • main関数がエントリーポイントになる • 挨拶は基本
33. © 2012-2022 BASE, Inc. 33 @glassmonekey #phpcon2022 ビルド • TinyGoを事前にインストールしておくこと • ビルドターゲットをwasiでビルド
34. © 2012-2022 BASE, Inc. 34 @glassmonekey #phpcon2022 実行 • WASIに対応しているなら何でも良い • 例ではwasmer (https://wasmer.io/) を利用 • WASIは数値以外も出力可能
35. © 2012-2022 BASE, Inc. 35 © 2012-2022 BASE, Inc. 35 PHPとWebAssembly
36. © 2012-2022 BASE, Inc. 36 1 2 3 @glassmonekey #phpcon2022 WASM上でPHPを実行する PHPからWASMを呼ぶ 考察 PHPとWebAssembly
37. © 2012-2022 BASE, Inc. 37 © 2012-2022 BASE, Inc. 37 WASM上でPHPを実行する
38. © 2012-2022 BASE, Inc. 38 @glassmonekey #phpcon2022 WASM上でPHPを実行 • WASMがPHPをパースして実行してくれる • ブラウザ上でPHPが動きます https://github.com/seanmorris/php-wasm seanmorris/php-wasm
39. © 2012-2022 BASE, Inc. 39 @glassmonekey #phpcon2022 使い方 • WASMファイルのセットアップ などは割愛 • 実行結果を料理 今回は雑にdocument.write • PHPスクリプトを実行 今回はphp info
40. © 2012-2022 BASE, Inc. 40 @glassmonekey #phpcon2022 結果
41. © 2012-2022 BASE, Inc. 41 @glassmonekey #phpcon2022 ブラウザ上でPHP動いた 👏👏
42. © 2012-2022 BASE, Inc. 42 @glassmonekey #phpcon2022 デモ用意したのでよかったら https://github.com/glassmonkey/pdi-sample
43. © 2012-2022 BASE, Inc. 43 © 2012-2022 BASE, Inc. 43 PHPからWASMを呼ぶ
44. © 2012-2022 BASE, Inc. 44 @glassmonekey #phpcon2022 PHPからWASMを呼ぶ • wasmer-phpからextensionをbuildする • もとは元社員の方の個人リポジトリ • 最終更新日は去年 ◦ 上記の社員の方が退職されてコミット量が激減 https://github.com/wasmerio/wasmer-php wasmerio/wasmer-php
45. © 2012-2022 BASE, Inc. 45 @glassmonekey #phpcon2022
46. © 2012-2022 BASE, Inc. 46 @glassmonekey #phpcon2022 動きませんでした😇 extensionがビルド出来ず断念 peclパッケージも古くて動かず…
47. © 2012-2022 BASE, Inc. 47 @glassmonekey #phpcon2022 理想の動き
48. © 2012-2022 BASE, Inc. 48 @glassmonekey #phpcon2022 現状のPHPからWASMの呼び出しは？ • 外部プログラムとしてWASI Runtime経由で呼び出すしか無さそう • SDKレベルで呼び出しのサポートされている言語はJS/Rustが多い • FFI経由の呼び出しを実装を作るしかない（他力本願）
49. © 2012-2022 BASE, Inc. 49 © 2012-2022 BASE, Inc. 49 まとめ
50. © 2012-2022 BASE, Inc. 50 @glassmonekey #phpcon2022 まとめ • WebAssemblyはWebアプリのリッチ化で始まった技術 • ブラウザ以外の用途も登場している ◦ キーワードは移植性とセキュリティ ◦ WASIコミュニティの成長に期待 • PHPとWebAssemblyの相性は実験レベル感 ◦ Rustが最強 ◦ WASIコミュニティの成長に期待 ◦ FFI実装に期待
51. © 2012-2022 BASE, Inc. 51 @glassmonekey #phpcon2022 まとめ ブラウザ上でもPHPは動く
52. © 2012-2022 BASE, Inc. 52 @glassmonekey #phpcon2022 まとめ Web Assemblyと仲良くなりましょう
53. © 2012-2022 BASE, Inc. 53 #gocon2022_4sponsor @glassmonkey フルサイクル開発やってます!! 興味あったらDM待ってます!! We are hiring !!