コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
•
1 like•4,030 views
HTML5 CONFERENCEでの発表資料です https://events.html5j.org/conference/2018/11/session/
More Related Content
What's hot
What's hot (20)
Similar to コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
Similar to コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践 (20)
More from LINE Corporation
More from LINE Corporation (20)
Recently uploaded
Recently uploaded (8)
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
- 4. プログラミング⾔語を作る
- 5. ● Wasmのコンパイルターゲット⾔語としての可能性を調査 ● Wasmに直接コンパイルする (v.s. LLVM IR) ● 容量をへらす ● ユースケースを考慮した設計 なぜ作る必要があるのか
- 6. ● https://github.com/utatti/kou ● A minimal language compiled into wasm bytecode The kou Programming Language
- 8. ● 機能と⽂法を決める ● 想定しているユースケース ● 好み プログラミング⾔語の設計
- 10. let fac = fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } Example
- 11. let fac = fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } 好み1: 型安全性
- 12. let fac = fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } 好み2: Braces over indents Easier to parse
- 13. let fac = fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } 好み3: Expression-oriented From Rust
- 14. ● Wasm: 現在仕様で作りやすいように ● WEB上動く: バイトコードの容量を⼩さく ● 想定ユーザー: JS開発者 ユースケース
- 15. let arr = [1, 2, 3, 4, 5]; let i = 0; while i < len(arr) { ... i = i + 1; } ユースケース1: Wasm Smaller bytecode output
- 16. let arr = [1, 2, 3, 4, 5]; let i = 0; while i < len(arr) { ... i = i + 1; } ユースケース2: ⽂法 C-like
- 17. ● ⾔語仕様書を書く ● EBNF (Extended Backus-Naur Form) ● | alternation ● () grouping ● [] option (0 or 1 times) ● {} repetition (0 to n times) ● 他の⾔語の仕様書を参考にすると良い ● The Go Programming Language ● https://golang.org/ref/spec 設計を形にする
- 20. ● The real work starts here... ● 😇 コンパイラを書く
- 23. ● Lexical analyzer ● Source code → Token* stream ● *Token: プログラミング⾔語のalphabet ● e.g. "hello", 1234, if, else, {, } Lexer
- 25. ● Syntactic analyzer ● Token stream → *AST ● *AST: Abstract syntax tree ● コードをツリー化したもの Parser
- 26. Example: AST main Declaration ... Module Identifier Params FunctionExpr let main = fn () void { .. }
- 27. ● Parser generator ● EBNF → Parser ● Parser combinator ● e.g. Parsec in Haskell ● DSL for parser ● kou uses this ● Or just write from scratch How to write parser
- 29. ● Syntactic sugarの解除 ● 難しくいうと: Isomorphismの適⽤ ● 簡単にいうと: あれとこれって同じっしょ、の適⽤ Desugarer
- 30. ● Unary +の解除 ● +1234 == 1234 ● 1-tupleの解除 ● (1234) == 1234 Example: Desugarer
- 32. ● Semantic analyzer ● Hindley-Milner type system Type checker
- 33. ● App for function application let x: A function f(x: A): B f(x): B Example: Hindley-Milner type system
- 35. ● AST → Target code (Wasm bytecode) ● 実際Wasmバイトコードを⽣成する部分 Code generator
- 37. ● Specification ● https://webassembly.github.io/spec/core/ ● Stack machine WebAssembly bytecode
- 38. ● Use stack to pass/return values ● v.s. Register machine ● e.g. WebAssembly VM, JVM Stack machine
- 39. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack
- 40. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1
- 41. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1 2
- 42. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1 2 3
- 43. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1
- 44. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1 6 ← 2 * 3
- 45. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack
- 46. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 7 ← 1 + 6
- 47. Example: Stack machine 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 7
- 48. Example: Value types 1 + 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 7
- 49. ● Integer ● i32, i64 ● Floating-point number ● f32, f64 ● kou uses i32 and f64 ● i64 cannot be used directly in JS WebAssembly value types
- 50. ● Tuple ● (1, true, 1.5) ● Array ● [1, 2, 3, 4, 5] ● WebAssembly Memory Complex types
- 51. ● Linear ● Virtual ● JS⼜はWasmでメモリを宣⾔ ● (memory 1) WebAssembly Memory
- 52. ● Wasm has no high-level support for memory allocation ● ⼿動で管理するしか無い Memory allocation
- 53. Memory allocation 4 … 4 because the pointer itself uses i32 ● Wasm has no high-level support for memory allocation ● ⼿動で管理するしか無い
- 54. Memory allocation 4 … 16バイトください‼ ● Wasm has no high-level support for memory allocation ● ⼿動で管理するしか無い
- 55. Memory allocation 20 16 bytes … ● Wasm has no high-level support for memory allocation ● ⼿動で管理するしか無い
- 56. ● Array Complex type (again!) [1.0, 2.0, 3.0, 4.0, 5.0] ! "###$#######$#######$#######$#######$#######% & 5 & 1.0 & 2.0 & 3.0 & 4.0 & 5.0 & '###(#######(#######(#######(#######(#######) 4 + 8 * 5 = 44 bytes
- 57. ● Tuple Complex type (again!) (9, false, 5.35) ! "###$###$########% & 9 & 0 & 5.35 & '###(###(########) 4 + 4 + 8 = 16 bytes
- 58. ● しない ● Garbage collection: runtime overhead ● Reference counting: memory (and operation) overhead ● Handling memory fragment ● ユースケース: そこまでは必要ない Memory freeing
- 61. ● AssemblyScript ● https://assemblyscript.org ● A TypeScript to WebAssembly compiler ● WebAssembly Studio ● https://webassembly.studio Wasm Code gen. tip
- 62. つづく
- 65. IN 技術調査/実践 内製ツール開発 OUT OSS活動 技術イベント協賛 イベント運営 ブログ執筆 LINE の Front-end Standardization Team における標準化とは WHAT IS STANDARDIZATION 社内だけでやっていること 社内でできていないこと 社内の均⼀化 × 社内外がシームレスな組織になること ○
- 67. ⼤量の演算が必要な時
- 71. ENCODED DATA ENCODER / DECODER ENCODER (WASM) DECODER (WASM) RAW DATA API SERVER (NODE.JS) CLIENT (BROWSER) RAW DATA 圧縮された⼩さいデータ元データ 復元されたデータ
- 73. Step-1 やること X: 4 Y: 1 VALUE: 5 ひとつひとつは x座標, y座標, その座標のtap数のデータ
- 74. Step-1 やること X: 4 Y: 1 VALUE: 5 もしXとYを省略できればデータ量は1/3にできる
- 77. Step-2 やること データを⾏列に埋めていくとデータの⼊らない場所ができる 0 1 2 3 5 5 6 7 8 9 10 1 12 13 14 15 16 17 18 19 20 21 22 23 24
- 78. Step-3 やること 連続したデータは何回連続するかという情報に変換して詰めちゃう(圧縮しちゃう) *4 5 *6 1 *2 14 *4 19 21*1 *3
- 79. Step-4 やること この⼩さいデータをブラウザで受け取って逆の処理をする (decode) 0 1 2 3 5 5 6 7 8 9 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 圧縮済データ ⾏列データ 元データ
- 81. の場合 kou 全79⾏
- 82. let zip = fn (a [int], col int, row int) ([int], int) { ~ 中略 ~ while (i < l) { if (a[i - 1] == a[i]) { ct = ct + 1; } else { res = next(res, a[i - 1], ct); ct = 0; }; if (i == l - 1) { res = next(res, a[i], ct); } else {}; i = i + 1; }; ~ 中略 ~ res } の場合 kou JSerであれば直感的に書ける
- 83. 成果 じゃんじゃかじゃん
- 85. ● ⾼階層な⾔語ではないので中で何をやっているかは想像しやすい ● わからなくても作者が近くにいたので最強になれる ● それは普段あまりない経験 ● wat書くよりはるかに楽で感動すら覚える ● しかしlog関数がないのはしんどい (⾃分で追加しようとした) ● 型の問題があってちゃんとやろうとするとそこそこ⼤変 ● 全てがUint32Array問題 ● ⼤きな動画や画像データなど扱いたい時メモリを⾷いすぎる ● wasm使いたいモチベーションと相反する ● いつも⽂句いいながら書いてたけどJavaScriptって便利だな...なんでもあるやんけ... 所感 kou
- 86. ● LINEでは実験的な社内プロダクトがいくつかありその中では様々な挑戦をしている ● wasmもその中のひとつ ● wasmを直接触ることになるエンジニアの数は少ないと思う ● しかし、間違いなくライブラリやフレームワークで利⽤することになる ● 今後こんなことができるようになるかも と可能性を⾒据えて置くことは⼤事 ● 「これって実現可能なの？」を判断するのは開発者の⼤事な仕事 ● それはwasmで⾔えば今まで扱えなかったような巨⼤なデータや処理を扱うことだっ たりするかもしれない webp, webm ⾔いたいこと⾔う まとめ
- 87. THANK YOU