Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide