path: root/slide.saty

@require: option
@require: class-slydifi/theme/akasaka
@require: figbox/figbox

let ex-big-textbox ?:size-opt it =
  let size = Option.from 48pt size-opt in
    FigBox.textbox?:(set-font-size size) it

let big-textbox ?:size-opt it =
  let size = Option.from 32pt size-opt in
    FigBox.textbox?:(set-font-size size) it

let mid-textbox ?:size-opt it =
  let size = Option.from 24pt size-opt in
    FigBox.textbox?:(set-font-size size) it

open FigBox
in

document '<
  +set-config(|
    SlydifiThemeAkasaka.default-config with
    color-emph = Color.black;
  |);

  +make-title(|
    title = {
      |WebAssembly を理解する
      |〜VM の作成を通して〜
      |};
    author = {|nsfisis (いまむら)|};
    date = {|PHPerKaigi 2024|};
  |);

  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  +frame{自己紹介}<
    +fig-center(vconcat [
      gap 75pt;
      hconcat [
        big-textbox{nsfisis (いまむら)};
        gap 20pt;
        include-image 50pt `assets/me.jpeg`;
      ];
      gap 20pt;
      big-textbox{\@ デジタルサーカス株式会社};
      gap 60pt;
      big-textbox?:(24pt){今年のコードゴルフ企画のシステム開発・運用};
    ]);
  >

  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  +section{|WebAssemblyの概要|}<

  +frame{WebAssemblyとは}<
    +fig-center(vconcat [
      gap 75pt;
      big-textbox{WebAssembly (Wasm)};
      gap 20pt;
      mid-textbox{ブラウザなどで実行できる};
      gap 10pt;
      mid-textbox{ポータブルな仮想命令セット};
    ]);
  >

  +frame{WebAssemblyの出自}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{元々のモチベーション: ブラウザ上での高速な処理};
      gap 20pt;
      mid-textbox{動的な JavaScript だと限界がある};
      gap 30pt;
      mid-textbox{間にいくつかの技術が生まれたり消えたりし、};
      gap 10pt;
      mid-textbox{最終的に WebAssembly が策定された};
    ]);
  >

  +frame{Emscripten}<
    +fig-center(vconcat [
      gap 60pt;
      big-textbox{Emscripten};
      gap 40pt;
      mid-textbox{C/C++ のソースコードを Wasm に変換};
      gap 20pt;
      mid-textbox{C/C++ で書かれた膨大な資産を};
      gap 10pt;
      mid-textbox{ブラウザの上で動かせる};
    ]);
  >

  +frame{Wasmの活用例}<
    +fig-center(vconcat [
      gap 50pt;
      mid-textbox{PHPの処理系はCで書かれている};
      gap 40pt;
      mid-textbox{Emscripten を使って Wasm に変換できる};
      gap 40pt;
      mid-textbox{Wasm に変換するとブラウザ上で動かせる};
      gap 40pt;
      mid-textbox{例: PHP Playground、コードゴルフ企画};
    ]);
  >

  +frame{WebAssemblyの特徴}<
    +fig-center(vconcat [
      gap 50pt;
      big-textbox{ポータブル};
      gap 20pt;
      big-textbox{速い};
      gap 20pt;
      big-textbox{安全};
      gap 40pt;
      mid-textbox{これらの特徴はどのように実現されているのか};
      gap 20pt;
      mid-textbox{処理系を自作して理解しよう};
    ]);
  >

  >

  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  +section{|作成したものの紹介|}<

  +frame{完成したもの}<
    +fig-center(vconcat [
      gap 30pt;
      include-image 700pt `assets/screenshot.jpeg`;
    ]);
  >

  +frame{完成したもの}<
    +fig-center(vconcat [
      gap 40pt;
      mid-textbox{今回作った Wasm 処理系};
      gap 30pt;
      mid-textbox{の上に、Wasmに変換されたPHP処理系};
      gap 30pt;
      mid-textbox{の上に、\code(`echo "Hello, World!\n";`);};
    ]);
  >

  +frame{完成したもの}<
    +fig-center(vconcat [
      gap 40pt;
      mid-textbox{普通のPHP処理系};
      gap 30pt;
      mid-textbox{の上に、今回作った Wasm 処理系};
      gap 30pt;
      mid-textbox{の上に、Wasmに変換されたPHP処理系};
      gap 30pt;
      mid-textbox{の上に、\code(`echo "Hello, World!\n";`);};
    ]);
  >

  +frame{完成したもの}<
    +fig-center(vconcat [
      gap 40pt;
      mid-textbox{普通のPHP処理系};
      gap 30pt;
      mid-textbox{の上に、今回作った Wasm 処理系};
      gap 30pt;
      mid-textbox{の上に、Wasmに変換されたPHP処理系};
      gap 30pt;
      mid-textbox{の上に、\code(`echo "Hello, World!\n";`);};
      gap 50pt;
      mid-textbox{多段になりすぎて実行に30秒かかる};
    ]);
  >

  >

  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  +section{|Wasmの処理系を作る|}<

  +frame{仕様書}<
    +fig-center(vconcat [
      gap 40pt;
      big-textbox{成長途中の規格};
      gap 20pt;
      big-textbox{バージョンがいろいろある};
      gap 50pt;
      mid-textbox{バージョン1};
      gap 20pt;
      mid-textbox{バージョン2};
      gap 20pt;
      mid-textbox{WasmGC};
    ]);
  >

  +frame{仕様書の構成}<
    +fig-center(vconcat [
      gap 60pt;
      big-textbox{Structure};
      gap 20pt;
      big-textbox{Validation};
      gap 20pt;
      big-textbox{Execution};
      gap 20pt;
      big-textbox{Binary Format};
      gap 20pt;
      big-textbox{Text Format};
    ]);
  >

  +frame{Binary Format と Text Format}<
    +fig-center(vconcat [
      gap 40pt;
      mid-textbox{バイナリ形式のプログラム表現と、};
      gap 20pt;
      mid-textbox{テキスト形式のプログラム表現の2種類がある};
      gap 40pt;
      mid-textbox{同じ意味のプログラムを別々の書き方で表せる};
      gap 20pt;
      mid-textbox{両形式は、相互に変換可能};
      gap 40pt;
      mid-textbox{どちらか一方だけ実装してやればよい};
    ]);
  >

  +frame{どの順に読むべきか？}<
    +fig-center(vconcat [
      gap 60pt;
      big-textbox{Structure};
      gap 20pt;
      big-textbox{Validation};
      gap 20pt;
      big-textbox{Execution};
      gap 20pt;
      big-textbox{Binary Format};
      gap 20pt;
      big-textbox{Text Format};
    ]);
  >

  +frame{どの順に読むべきか？}<
    +fig-center(vconcat [
      gap 60pt;
      big-textbox{Structure (1)};
      gap 20pt;
      big-textbox{Validation (4)};
      gap 20pt;
      big-textbox{Execution (3)};
      gap 20pt;
      big-textbox{Binary Format (2)};
      gap 20pt;
      big-textbox{Text Format (2)};
    ]);
  >

  +frame{Structure}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{Wasmのプログラムを表すデータ構造を定義};
      gap 20pt;
      mid-textbox{命令セットの定義、各種プリミティブ型の定義など};
      gap 40pt;
      mid-textbox{これを読みながら、データ型を定義していく};
    ]);
  >

  +frame{Binary Format / Text Format}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{Wasmのプログラムがどのような};
      gap 10pt;
      mid-textbox{バイナリ/ソースコードで表されるかを定義};
      gap 20pt;
      mid-textbox{Structure で定義されたデータ構造へと変換していく};
      gap 50pt;
      mid-textbox{Binary Format のほうが楽そう？};
    ]);
  >

  +frame{Execution}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{Wasmをどう実行するか (VM本体)};
      gap 40pt;
      mid-textbox{仕様書を忠実に翻訳するだけでは実装できない};
      gap 20pt;
      mid-textbox{Structured Control Flow/Label周りが厄介};
    ]);
  >

  +frame{Structured Control Flow の扱い}<
    +fig-center(vconcat [
      gap 70pt;
      mid-textbox{仕様書の記述をそのまま実装するのは困難};
      gap 50pt;
      mid-textbox{(A) block/loop/ifを直列に展開};
      gap 20pt;
      mid-textbox{(B) 今回の方法};
    ]);
  >

  +frame{Structured Control Flow の扱い: br 命令}<
    +fig-center(vconcat [
      gap 50pt;
      big-textbox{br命令};
      gap 40pt;
      mid-textbox{block 命令中では break相当};
      gap 20pt;
      mid-textbox{loop 命令中では continue相当};
      gap 40pt;
      mid-textbox{continuationの話は無視していい};
    ]);
  >

  +frame{Structured Control Flow の扱い: br 命令}<
    +fig-center(vconcat [
      gap 50pt;
      big-textbox{br命令};
      gap 40pt;
      mid-textbox{仕様書にあるbr命令の処理の内容は};
      gap 20pt;
      mid-textbox{br命令を実行する箇所ではなく};
      gap 20pt;
      mid-textbox{呼び出し元となるblockとloopに書く};
    ]);
  >

  +frame{Validation}<
    +fig-center(vconcat [
      gap 50pt;
      mid-textbox{Wasm のプログラムが正しいかどうか};
      gap 10pt;
      mid-textbox{実行前に検証する};
      gap 20pt;
      mid-textbox{Wasm の安全性を担保している処理の一つ};
    ]);
  >

  +frame{Validation}<
    +fig-center(vconcat [
      gap 50pt;
      mid-textbox{Wasm のプログラムが正しいかどうか};
      gap 10pt;
      mid-textbox{実行前に検証する};
      gap 20pt;
      mid-textbox{Wasm の安全性を担保している処理の一つ};
      gap 40pt;
      mid-textbox{やらなくていい};
      gap 20pt;
      mid-textbox{世にある Wasm のプログラムは};
      gap 10pt;
      mid-textbox{Validation が通るものばかり};
    ]);
  >

  +frame{外界とのやりとり}<
    +fig-center(vconcat [
      gap 50pt;
      mid-textbox{Wasm自体の仕様には};
      gap 10pt;
      mid-textbox{外の世界とやりとりする手段がない};
      gap 20pt;
      mid-textbox{例: 入出力、ファイル操作、ネットワークアクセス等};
      gap 20pt;
      mid-textbox{必要に応じて明示的にインポートする};
      gap 40pt;
      mid-textbox{これによって安全性が高まっている}
    ]);
  >

  +frame{まとめ}<
    +fig-center(vconcat [
      gap 50pt;
      big-textbox{1. データ構造を定義};
      gap 20pt;
      big-textbox{2. Binary format のデコーダを実装};
      gap 20pt;
      big-textbox{3. VMを実装};
      gap 20pt;
      big-textbox{4. 外界とのインターフェースを実装};
      gap 20pt;
      big-textbox{5. 頑張る};
    ]);
  >

  >

  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  +section{|注目が集まるわけ|}<

  +frame{WebAssemblyの特徴}<
    +fig-center(vconcat [
      gap 60pt;
      ex-big-textbox{ポータブル};
      gap 20pt;
      ex-big-textbox{速い};
      gap 20pt;
      ex-big-textbox{安全};
    ]);
  >

  +frame{WebAssemblyの特徴: ポータブル}<
    +fig-center(vconcat [
      gap 60pt;
      mid-textbox{Wasm自体の仕様には};
      gap 10pt;
      mid-textbox{外の世界とやりとりする手段がない};
      gap 20pt;
      mid-textbox{特定の環境に依存しない};
      gap 20pt;
      mid-textbox{環境依存の処理はWasmの外でおこなう};
    ]);
  >

  +frame{WebAssemblyの特徴: ポータブル}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{Webに依存しない};
      gap 20pt;
      mid-textbox{JavaScriptやDOM等の技術から独立している};
      gap 50pt;
      mid-textbox{ブラウザの外でも動く};
    ]);
  >

  +frame{WebAssemblyの特徴: 速い}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{バイナリ形式: パースが速い};
      gap 30pt;
      mid-textbox{十分に低レベルな命令セット};
    ]);
  >

  +frame{WebAssemblyの特徴: 安全}<
    +fig-center(vconcat [
      gap 75pt;
      mid-textbox{検証しやすい (validation)};
      gap 20pt;
      mid-textbox{外界とのやりとりが明示的};
      gap 20pt;
      mid-textbox{サンドボックス化が容易};
    ]);
  >

  +frame{活用事例}<
    +fig-center(vconcat [
      gap 60pt;
      mid-textbox{ブラウザ上での高速な処理};
      gap 20pt;
      mid-textbox{C/C++のソフトウェアをブラウザへ移植};
      gap 20pt;
      mid-textbox{ソフトウェアのプラグイン};
      gap 20pt;
      mid-textbox{コンテナ};
      gap 20pt;
      mid-textbox{エッジコンピューティング};
    ]);
  >

  >

  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

  +section{|言語処理系を作る|}<

  +frame{なぜ作るのか？}<
    +fig-center(vconcat [
      gap 50pt;
      big-textbox{車輪の再発明};
      gap 40pt;
      big-textbox{世に優れたWasmの処理系はごまんとある};
    ]);
  >

  +frame{なぜ作るのか？}<
    +fig-center(vconcat [
      gap 75pt;
      ex-big-textbox{なぜ？};
    ]);
  >

  +frame{なぜ作るのか？}<
    +fig-center(vconcat [
      gap 75pt;
      ex-big-textbox{なぜ？};
      gap 60pt;
      ex-big-textbox{楽しい};
    ]);
  >

  +frame{言語処理系の面白さ}<
    +fig-center(vconcat [
      gap 80pt;
      mid-textbox{あるとき突然すべてが上手く動くようになる};
      gap 40pt;
      mid-textbox{自分の理解を遥かに超えたものがなぜか動く};
    ]);
  >

  >

>