最新のWasm事情

Niigata5分Tech #13　１周年記念
https://niigata-5min-tech.connpass.com/event/332786/

Transcript

1. 最新のWasm事情 2024.10.18 N5T#13
2. asuka (@a_skua) • 株式会社モニクル ◦ SWE / プロダクトSRE • WebAssemblyの同人誌を書いている人 ◦ WebAssemblyでできること ▪ 商業誌：実践入門WebAssembly ◦ ご注文はWASIですか? ◦ ご注文はWASIですか?? ▪ 商業誌：WebAssembly System Interface入門 ◦ WebAssembly Cookbook vol.1 2 WHOIS
3. Niigata 5分 Tech 結構参加している 3 • N5T#5 AssemblyScriptではじめるWebAssembly入門 • N5T#8 技術書典16オフライン振り返り • N5T#10 エンジニアコミュニティ • N5T#12 夏の思い出 • N5T#12 go:wasmexport • N5T#13 祝1周年 東京から飲みにきた
4. 最近発売されたWasmの本
5. 5 9月20日発売． → 著書です．買ってね❤ WASI 0.1と0.2の仕様の紹介をする内容． コンポーネントモデルについても扱っている． 最近発売されたWasmの本
6. 6 10月10日発売． → Wasmの最新事情を扱っている本 コンポーネントモデルを使ったWasmの開発の紹介 をしている． 最近発売されたWasmの本
7. キーワード 「コンポーネントモデル」
8. コンポーネントモデルとは 従来のWasm • モジュールが1つの単位 • 1バイナリ1モジュール • ESモジュールのようなものだと思ってもらってOK これからのWasm • 複数のモジュールを組み合わせたコンポーネントが1つの単位 • コンポーネント同士の合成もできる 8
9. よくわからないよね
10. コンポーネントモデルとは 従来のWasm • モジュールが1つの単位 • 1バイナリ1モジュール • ESモジュールのようなものだと思ってもらってOK これからのWasm • 複数のモジュールを組み合わせたコンポーネントが1つの単位 • コンポーネント同士の合成もできる 10 VMの定義 • どういう命令セットがあるか? データフォーマットの定義 • stringはメモリ上でどう表現されるのか?
11. • データ定義をするためのIDL「WITを提供」 • WITに対応するABIが定義されている → WITからコードを自動生成できる コンポーネントモデルとは 11 record customer { id: u64, name: string, picture: option<list<u8>>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit 高レイヤーのデータ型を定義できる ProtobufやGraphQLと同じ世界観
12. コンポーネントモデルとは 12 record customer { id: u64, name: string, picture: option<list<u8>>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit インターフェースをexportするためのコードを生成 インターフェースをimportするためのコードを生成 Wasmコンポーネントにビルド Wasmコンポーネントにビルド ( ｀・ω・´) COMPOSE!! 　≡⊃C⊂≡ Wasmコンポーネント
13. サーバーサイドだけじゃない
14. コンポーネントモデルとは 14 record customer { id: u64, name: string, picture: option<list<u8>>, account-manager: employee, } enum color { hot-pink, lime-green, navy-blue, } example.wit インターフェースをexportするためのコードを生成 Wasmをimportするためのグルーコードを生成 Wasmモジュールにビルド Wasmのimport フロントエンドの実装 グルーコードのimport こういうこともできる
15. コンポーネントモデルとは 15 record customer { id: u64, name: string, picture: option<list<u8>>, 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
16. 技術書典17で同人誌として出します 16 まだ1章しか書いてないのは内緒 WebAssembly Cookbook vol.2 技術書典16 技術書典17
17. 最新のWasm事情 2024.10.18 N5T#13