Slide 1

Slide 1 text

© 2012-2022 BASE, Inc. 1 PHP Conference 2022 BASE株式会社 永野 峻輔 ( @glassmonkey ) PHPで始める WebAssembly入門

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

© 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

© 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/

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

© 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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