Slide 1

Slide 1 text

N5T / Feb 23 2024 AssemblyScriptではじめる WebAssembly入門 1

Slide 2

Slide 2 text

自己紹介 asuka 今年は仕事でWasm使いたいよね! SNS - X @a_skua - GitHub @a-skua - Zenn @askua - Blog www.askua.dev 2 去年は技術書典14, 15などに参加

Slide 3

Slide 3 text

WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。 なんだか良さそう WebAssembly 3 WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコード です。基本的に直接記述ではなく、C、C++、 Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されていま す。 †1 WebAssembly の概要 †1 😎

Slide 4

Slide 4 text

WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。 コンパイル対象なんて言い出したぞ? WebAssembly 4 WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象 となるように設計されています。 †1 WebAssembly の概要 †1 🤯

Slide 5

Slide 5 text

WebAssembly 5 コンパイル言語から,Wasmにビルドして... JSでWasmをロードして起動 ね?簡単でしょ?

Slide 6

Slide 6 text

Dartの例 6 main.wasm main.mjs deno run --allow-read main.ts dart compile wasm main.dart DartからWasmにビルドして... JSでWasmをロードして起動

Slide 7

Slide 7 text

Dartの例 7 main.wasm main.mjs deno run --allow-read main.ts dart compile wasm main.dart DartからWasmにビルドして... JSでWasmをロードして起動 このJSは何? え,そのまま実行できないの ?

Slide 8

Slide 8 text

WebAssembly 8 コンパイル言語から,Wasmにビルドして... JSでWasmをロードして起動 ね?簡単でしょ? コンパイラ怖いよう Wasmをロードって何??

Slide 9

Slide 9 text

もう少しこう何というか 手心というか 9

Slide 10

Slide 10 text

AssemblyScriptからはじめてみない? 10

Slide 11

Slide 11 text

AssemblyScriptからはじめてみない? 11 AssemblyScript とは TypeScriptの構文でWasmをビルドできる言語. 準備が必要なのはこれだけ †2 AssemblyScript †2

Slide 12

Slide 12 text

AssemblyScript入門 12 asinit を実行すると,assembly/index.ts などのファイルが作成される. build/release.wasm build/release.js npm run asbuild deno run --allow-read main.ts

Slide 13

Slide 13 text

AssemblyScript入門 13 asinit を実行すると,assembly/index.ts などのファイルが作成される. build/release.wasm build/release.js npm run asbuild deno run --allow-read main.ts 知ってる書き方! 知ってる書き方!! 面倒なことは全部ここ (読まなくて良い)

Slide 14

Slide 14 text

AssemblyScriptはTypeScriptで構文解析の処理が書かれている. AssemblyScriptの仕組み 14 assembly/index.ts build/release.wasm build/release.js †3 Binaryen tokenizer.ts parser.ts Binaryen AST Wasm †3 Binaryen IR

Slide 15

Slide 15 text

- 開発は停滞気味だが - ウェブ環境で部分的に Wasmを試してみたいというニーズには応えられそう. - Wasmの制約がASで使える型や構文に影響を与えている - TSではエラーにならないが, ASでは構文エラーになるケースがある. - タイプエイリアスやオブジェクト型に注意. - 構文を確認するには, ASのドキュメントとパーサーテストを見ると良い 😆 AssemblyScriptの現状 15

Slide 16

Slide 16 text

AssemblyScriptの例 16

Slide 17

Slide 17 text

AssemblyScriptの例 17

Slide 18

Slide 18 text

AssemblyScriptの例 18 benchmark time (avg) p75 p99 p995 p999 js n=92 4.864316037 4.625 5.7875 6.0958 19.5542 js(bigint) n=92 18.13722707 18.0625 19.6333 20.1334 20.9333 wasm n=92 22.57033527 22.8042 26.3 28.8375 42.3042 wasm(iterative) n=92 33.56680893 33.6042 36.1875 36.6709 37.25 js(iterative) n=92 112.3810171 112.7625 117.3709 118.0959 118.7458 js(iterative, bigint) n=92 340.2484605 339.7541 385.5333 410.1375 410.1375 wasm(n=92) : 7540113804746346429n js (n=92) : 7540113804746346000 (誤差) js (n=92, bigint): 7540113804746346429n

Slide 19

Slide 19 text

AssemblyScriptの例 19

Slide 20

Slide 20 text

AssemblyScriptの例 20 最速ではないが,安定している

Slide 21

Slide 21 text

AssemblyScriptの例 21 書き方によってパフォーマンスが大 きく異なる

Slide 22

Slide 22 text

数値計算 - 64bitsの整数を扱える - BigIntよりも速い 数値の繰り返し計算はWasmの得意分野 SIMD(v128型)もあるよ! WebでのWasmはすでに実用の域にあるよ !! (すでにWasmCGの関心はWebの外を向いている) WebAssemblyの使い所 22 引用元 実践入門WebAssembly

Slide 23

Slide 23 text

その他 - ユーザー向けプラグインのインターフェースを定義したい - JS以外の言語で書かれたプログラムをウェブ上で動かしたい WebAssemblyの使い所 23

Slide 24

Slide 24 text

Wasmの入門に AssemblyScript 24