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入門
   

   View Slide

2. © 2012-2022 BASE, Inc. 2
   @glassmonekey
   #phpcon2022
   このトークの目的
   ● WebAssemblyの基本的な理解
   ● PHPerがWebAssemblyと仲良くなること
   

   View Slide

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
   

   View Slide

4. © 2012-2022 BASE, Inc. 4
   1
   2
   3
   @glassmonekey
   #phpcon2022
   WebAssemblyとは
   WebAssembly入門
   PHPとWebAssembly
   今日話すこと
   

   View Slide

5. © 2012-2022 BASE, Inc. 5
   © 2012-2022 BASE, Inc. 5
   WebAssemblyとは
   

   View Slide

6. © 2012-2022 BASE, Inc. 6
   @glassmonekey
   #phpcon2022
   WebAssemblyとは
   Webブラウザを含む実行環境で
   コード実行とコンパクトなコード表現を実現するバイナリ形式
   https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
   

   View Slide

7. © 2012-2022 BASE, Inc. 7
   @glassmonekey
   #phpcon2022
   対応状況
   https://developer.mozilla.org/ja/docs/WebAssembly
   モダンな環境なら基本動く
   

   View Slide

8. © 2012-2022 BASE, Inc. 8
   @glassmonekey
   #phpcon2022
   例 (webassembly.sh)
   Linuxを模倣したもの
   https://webassembly.sh
   

   View Slide

9. © 2012-2022 BASE, Inc. 9
   © 2012-2022 BASE, Inc. 9
   なぜWebAssemblyなのか
   

   View Slide

10. © 2012-2022 BASE, Inc. 10
    @glassmonekey
    #phpcon2022
    Webアプリのリッチ化
    

    View Slide

11. © 2012-2022 BASE, Inc. 11
    @glassmonekey
    #phpcon2022
    JavaScriptだけだと辛い
    ● ブラウザゲーム(特に3D)
    ● AR/VR
    ● 画像処理
    … etc
    

    View Slide

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の一部の代替え
    

    View Slide

13. © 2012-2022 BASE, Inc. 13
    @glassmonekey
    #phpcon2022
    導入事例から見るWebAssembly
    https://madewithwebassembly.com/
    

    View Slide

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/
    

    View Slide

15. © 2012-2022 BASE, Inc. 15
    @glassmonekey
    #phpcon2022
    1Password
    ● 入力解析部分で主な改善
    ● chromeで最大13倍、firefoxだと39倍　
    https://blog.1password.com/1password-x-may-2019-update/
    

    View Slide

16. © 2012-2022 BASE, Inc. 16
    @glassmonekey
    #phpcon2022
    TensorFlow
    ● パフォーマンス向上(約10倍）
    ● 機械学習のようなCPUなどのリソースを酷使する場合とは相性が良い
    https://yashints.dev/blog/2019/12/17/tfjs-wasm
    

    View Slide

17. © 2012-2022 BASE, Inc. 17
    © 2012-2022 BASE, Inc. 17
    拡大する用途
    

    View Slide

18. © 2012-2022 BASE, Inc. 18
    @glassmonekey
    #phpcon2022
    Web Assemblyとは（2回目）
    Webブラウザを含む実行環境で
    コード実行とコンパクトなコード表現を実現するバイナリ形式
    https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
    

    View Slide

19. © 2012-2022 BASE, Inc. 19
    @glassmonekey
    #phpcon2022
    Web Assemblyの特徴
    ● 移植性
    ○ 任意の言語でWebAssemblyにbuildできたら良い
    ● セキュア
    ○ Runtimeが隔離（Sandbox化）されているのでセキュア
    WASM
    Host System
    WASI API
    WASM Runtime
    

    View Slide

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
    

    View Slide

21. © 2012-2022 BASE, Inc. 21
    © 2012-2022 BASE, Inc. 21
    WebAssembly入門
    

    View Slide

22. © 2012-2022 BASE, Inc. 22
    © 2012-2022 BASE, Inc. 22
    WebAssemblyの仕様
    

    View Slide

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/
    それぞれ別物！！
    

    View Slide

24. © 2012-2022 BASE, Inc. 24
    @glassmonekey
    #phpcon2022
    サンプルプログラム
    https://github.com/glassmonkey/web-assembly-sample
    glassmonkey/web-assembly-sample
    ● GoのサブセットのTinyGoを使用
    ○ Goは普段業務で使っているので
    ● ブラウザ版とブラウザ外用途に対応
    

    View Slide

25. © 2012-2022 BASE, Inc. 25
    © 2012-2022 BASE, Inc. 25
    ブラウザ用途
    

    View Slide

26. © 2012-2022 BASE, Inc. 26
    @glassmonekey
    #phpcon2022
    デモ
    https://github.com/glassmonkey/web-assembly-sample
    

    View Slide

27. © 2012-2022 BASE, Inc. 27
    @glassmonekey
    #phpcon2022
    Go側のコード
    ● main関数はコンパイルのおまじないで必要
    ● //exportキーワードでwasmの関数として公開可能
    

    View Slide

28. © 2012-2022 BASE, Inc. 28
    @glassmonekey
    #phpcon2022
    ビルド
    ● TinyGoを事前にインストールしておくこと
    ● wasmをブラウザから呼び出すためのグルーコードであるwasm_exec.jsをコピー
    ● ビルドターゲットをwasmでビルド
    

    View Slide

29. © 2012-2022 BASE, Inc. 29
    @glassmonekey
    #phpcon2022
    JavaScript側の呼び出し
    ● Goオブジェクトはwasm_exec.jsで定義されている、WASMの呼び出しラッパー
    ● exports以下に公開関数が存在する
    ● 数値以外のやりとりは現状できなさそう ( tinygo/issues/645 )
    

    View Slide

30. © 2012-2022 BASE, Inc. 30
    @glassmonekey
    #phpcon2022
    余談 (Rustでビルドした場合)
    ● Rustの場合 wasm-pack を利用してビルドする
    ● wasm-packが生成するグルーコードが優秀
    ● テキストなどのやりとりもできる ( wasm-bindgen )
    

    View Slide

31. © 2012-2022 BASE, Inc. 31
    © 2012-2022 BASE, Inc. 31
    ブラウザ外用途
    

    View Slide

32. © 2012-2022 BASE, Inc. 32
    @glassmonekey
    #phpcon2022
    Go側のコード
    ● main関数がエントリーポイントになる
    ● 挨拶は基本
    

    View Slide

33. © 2012-2022 BASE, Inc. 33
    @glassmonekey
    #phpcon2022
    ビルド
    ● TinyGoを事前にインストールしておくこと
    ● ビルドターゲットをwasiでビルド
    

    View Slide

34. © 2012-2022 BASE, Inc. 34
    @glassmonekey
    #phpcon2022
    実行
    ● WASIに対応しているなら何でも良い
    ● 例ではwasmer (https://wasmer.io/) を利用
    ● WASIは数値以外も出力可能
    

    View Slide

35. © 2012-2022 BASE, Inc. 35
    © 2012-2022 BASE, Inc. 35
    PHPとWebAssembly
    

    View Slide

36. © 2012-2022 BASE, Inc. 36
    1
    2
    3
    @glassmonekey
    #phpcon2022
    WASM上でPHPを実行する
    PHPからWASMを呼ぶ
    考察
    PHPとWebAssembly
    

    View Slide

37. © 2012-2022 BASE, Inc. 37
    © 2012-2022 BASE, Inc. 37
    WASM上でPHPを実行する
    

    View Slide

38. © 2012-2022 BASE, Inc. 38
    @glassmonekey
    #phpcon2022
    WASM上でPHPを実行
    ● WASMがPHPをパースして実行してくれる
    ● ブラウザ上でPHPが動きます
    https://github.com/seanmorris/php-wasm
    seanmorris/php-wasm
    

    View Slide

39. © 2012-2022 BASE, Inc. 39
    @glassmonekey
    #phpcon2022
    使い方
    ● WASMファイルのセットアップ
    などは割愛
    ● 実行結果を料理
    今回は雑にdocument.write
    ● PHPスクリプトを実行
    今回はphp info
    

    View Slide

40. © 2012-2022 BASE, Inc. 40
    @glassmonekey
    #phpcon2022
    結果
    

    View Slide

41. © 2012-2022 BASE, Inc. 41
    @glassmonekey
    #phpcon2022
    ブラウザ上でPHP動いた
    👏👏
    

    View Slide

42. © 2012-2022 BASE, Inc. 42
    @glassmonekey
    #phpcon2022
    デモ用意したのでよかったら
    https://github.com/glassmonkey/pdi-sample
    

    View Slide

43. © 2012-2022 BASE, Inc. 43
    © 2012-2022 BASE, Inc. 43
    PHPからWASMを呼ぶ
    

    View Slide

44. © 2012-2022 BASE, Inc. 44
    @glassmonekey
    #phpcon2022
    PHPからWASMを呼ぶ
    ● wasmer-phpからextensionをbuildする
    ● もとは元社員の方の個人リポジトリ
    ● 最終更新日は去年
    ○ 上記の社員の方が退職されてコミット量が激減
    https://github.com/wasmerio/wasmer-php
    wasmerio/wasmer-php
    

    View Slide

45. © 2012-2022 BASE, Inc. 45
    @glassmonekey
    #phpcon2022
    

    View Slide

46. © 2012-2022 BASE, Inc. 46
    @glassmonekey
    #phpcon2022
    動きませんでした😇
    extensionがビルド出来ず断念
    peclパッケージも古くて動かず…
    

    View Slide

47. © 2012-2022 BASE, Inc. 47
    @glassmonekey
    #phpcon2022
    理想の動き
    

    View Slide

48. © 2012-2022 BASE, Inc. 48
    @glassmonekey
    #phpcon2022
    現状のPHPからWASMの呼び出しは？
    ● 外部プログラムとしてWASI Runtime経由で呼び出すしか無さそう
    ● SDKレベルで呼び出しのサポートされている言語はJS/Rustが多い
    ● FFI経由の呼び出しを実装を作るしかない（他力本願）
    

    View Slide

49. © 2012-2022 BASE, Inc. 49
    © 2012-2022 BASE, Inc. 49
    まとめ
    

    View Slide

50. © 2012-2022 BASE, Inc. 50
    @glassmonekey
    #phpcon2022
    まとめ
    ● WebAssemblyはWebアプリのリッチ化で始まった技術
    ● ブラウザ以外の用途も登場している
    ○ キーワードは移植性とセキュリティ
    ○ WASIコミュニティの成長に期待
    ● PHPとWebAssemblyの相性は実験レベル感
    ○ Rustが最強
    ○ WASIコミュニティの成長に期待
    ○ FFI実装に期待
    

    View Slide

51. © 2012-2022 BASE, Inc. 51
    @glassmonekey
    #phpcon2022
    まとめ
    ブラウザ上でもPHPは動く
    

    View Slide

52. © 2012-2022 BASE, Inc. 52
    @glassmonekey
    #phpcon2022
    まとめ
    Web Assemblyと仲良くなりましょう
    

    View Slide

53. © 2012-2022 BASE, Inc. 53
    #gocon2022_4sponsor
    @glassmonkey
    フルサイクル開発やってます!!
    興味あったらDM待ってます!!
    We are hiring !!
    

    View Slide