WebAssembly 最近の話題より

@chikoski

2022/05/14 TechFeed Conference 2022
bit.ly/techfeed2022-wasm-01

WebAssembly 2.0 workging drafts

WebAssembly 2.0 First public working drafts

Specs

AngryBots

安全性と柔軟性の両立

  • 安全性
    • サンドボックス化された実行環境
    • 3rd party code の実行
  • 柔軟性
    • プログラミング言語選択の柔軟性
    • ツール選択の柔軟性
    • モジュールの更新が（比較的）容易

Shopify App

RLBox

Amazon Prime Video

  • ドングルやSTB向けアプリ
    • UI は JS で実現
    • 下回りは Wasm で実現
  • 柔軟性
    • プロダクトの更新
    • 開発環境での差し替え
    • 開発言語の選択

Wasm module を組み合わせて使う

ESM integration: 使い勝手の向上

  • Wasm インスタンスを JS のモジュールとして扱う
  • Wasm のロードを ESM のロードの仕様に合わせる
//　従来のロード
const stream = fetch("./myModule.wasm");
const wasm = await WebAssembly.instantiateStreaming(stream, {});
wasm.instance.exports.foo();

// 統合後のロード
import { foo } from "./myModule.wasm";
foo();

Component model

  • Use cases: host embedding component, component composition
(component
  (module $A
    (func (export "one") (result i32) (i32.const 1))
  )
  (module $B
    (func (import "a" "one") (result i32))
  )
  (instance $a (instantiate (module $A)))
  (instance $b (instantiate (module $B) (with "a" (instance $a))))
)