$30 off During Our Annual Pro Sale. View Details »

PHPとWebAssembly

glassmonenkey
September 26, 2022

 PHPとWebAssembly

glassmonenkey

September 26, 2022
Tweet

More Decks by glassmonenkey

Other Decks in Science

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 !!