最新のWasm事情 - Speaker Deck

最新のWasm事情

by asuka

Slide 1

Slide 1 text

最新のWasm事情 2024.10.18 N5T#13

Slide 2

Slide 2 text

asuka (@a_skua) ● 株式会社モニクル ○ SWE / プロダクトSRE ● WebAssemblyの同人誌を書いている人 ○ WebAssemblyでできること ■ 商業誌：実践入門WebAssembly ○ ご注文はWASIですか? ○ ご注文はWASIですか?? ■ 商業誌：WebAssembly System Interface入門 ○ WebAssembly Cookbook vol.1 2 WHOIS

Slide 3

Slide 3 text

Niigata 5分 Tech 結構参加している 3 ● N5T#5 AssemblyScriptではじめるWebAssembly入門 ● N5T#8 技術書典16オフライン振り返り ● N5T#10 エンジニアコミュニティ ● N5T#12 夏の思い出 ● N5T#12 go:wasmexport ● N5T#13 祝1周年東京から飲みにきた

Slide 4

Slide 4 text

最近発売されたWasmの本

Slide 5

Slide 5 text

5 9月20日発売． → 著書です．買ってね❤ WASI 0.1と0.2の仕様の紹介をする内容．コンポーネントモデルについても扱っている．最近発売されたWasmの本

Slide 6

Slide 6 text

6 10月10日発売． → Wasmの最新事情を扱っている本コンポーネントモデルを使ったWasmの開発の紹介をしている．最近発売されたWasmの本

Slide 7

Slide 7 text

キーワード「コンポーネントモデル」

Slide 8

Slide 8 text

コンポーネントモデルとは従来のWasm ● モジュールが1つの単位 ● 1バイナリ1モジュール ● ESモジュールのようなものだと思ってもらってOK これからのWasm ● 複数のモジュールを組み合わせたコンポーネントが1つの単位 ● コンポーネント同士の合成もできる 8

Slide 9

Slide 9 text

よくわからないよね

Slide 10

Slide 10 text

コンポーネントモデルとは従来のWasm ● モジュールが1つの単位 ● 1バイナリ1モジュール ● ESモジュールのようなものだと思ってもらってOK これからのWasm ● 複数のモジュールを組み合わせたコンポーネントが1つの単位 ● コンポーネント同士の合成もできる 10 VMの定義 ● どういう命令セットがあるか? データフォーマットの定義 ● stringはメモリ上でどう表現されるのか?

Slide 11

Slide 11 text

● データ定義をするためのIDL「WITを提供」 ● WITに対応するABIが定義されている → WITからコードを自動生成できるコンポーネントモデルとは 11 record customer { id: u64, name: string, picture: option>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit 高レイヤーのデータ型を定義できる ProtobufやGraphQLと同じ世界観

Slide 12

Slide 12 text

コンポーネントモデルとは 12 record customer { id: u64, name: string, picture: option>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit インターフェースをexportするためのコードを生成インターフェースをimportするためのコードを生成 Wasmコンポーネントにビルド Wasmコンポーネントにビルド ( ｀・ω・´) COMPOSE!! 　≡⊃C⊂≡ Wasmコンポーネント

Slide 13

Slide 13 text

サーバーサイドだけじゃない

Slide 14

Slide 14 text

コンポーネントモデルとは 14 record customer { id: u64, name: string, picture: option>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit インターフェースをexportするためのコードを生成 Wasmをimportするためのグルーコードを生成 Wasmモジュールにビルド Wasmのimport フロントエンドの実装グルーコードのimport こういうこともできる

Slide 15

Slide 15 text

コンポーネントモデルとは 15 record customer { id: u64, name: string, picture: option>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit インターフェースをexportするためのコードを生成 Wasmをimportするためのグルーコードを生成 Wasmモジュールにビルド Wasmのimport フロントエンドの実装グルーコードのimport Microsoftがwit2tsを作っている https://github.com/microsoft/vscode-wasm

Slide 16

Slide 16 text

技術書典17で同人誌として出します 16 まだ1章しか書いてないのは内緒 WebAssembly Cookbook vol.2 技術書典16 技術書典17

Slide 17

Slide 17 text

最新のWasm事情 2024.10.18 N5T#13