Webアプリを高速化する WebAssembly

Monaca UG TOKYO #9 〜先進的Web系技術を学ぶ〜
https://monacaug.connpass.com/event/131671/

の発表資料です。

Transcript

1. PAGE DAY 2019/02/14 # MOONGIFT / 50 Webアプリを高速化する WebAssembly 1
2. PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
3. PAGE # MOONGIFT / 50 DAY 2019/02/14 今日話すこと •WebAssemblyとは何か？ •WebAssemblyで何ができるのか、何ができないのか •WebAssemblyの使いどころ 3
4. PAGE # MOONGIFT / 50 DAY 2019/02/14 今日話さないこと •WebAssemblyの開発方法 4
5. PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyとは？ 5
6. PAGE # MOONGIFT / 50 DAY 2019/02/14 Webブラウザで動作する高速バイナリ •プログラミング言語ではありません •バイナリとテキスト型があります 6
7. PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの歴史 7
8. PAGE # MOONGIFT / 50 DAY 2019/02/14 Ajax登場！（2004年くらい） 8 　 　 　　　＿＿＿_ 　 　　　／⌒　　⌒＼ 　　　／（ •） 　（•）＼ 　 ／::::::⌒（__人__）⌒:::::＼ 　　これからはJavaScriptだお！ 　 |　　　　　|r┬-|　　　　 | 　 ＼ 　　 　 `ー'´ 　 　 ／
9. PAGE # MOONGIFT / 50 DAY 2019/02/14 JavaScriptの苦しみ…（2005年くらい） 9 　 　 　　　＿＿＿_ 　 　　　／　　 　 　＼ 　　　／　 _ノ 　ヽ､_　 ＼ 　 ／ oﾟ(（•）) (（•）)ﾟo ＼ 　ほんとはJavaScriptやりたくないんだお… 　 |　　　　 （__人__）　　　　| 　 ＼　　 　 ｀ ⌒´ 　 　 ／ 型がない APIが圧倒的に不足 HTMLの表現力が貧弱
10. PAGE # MOONGIFT / 50 DAY 2019/02/14 　 　 　　　＿＿＿_ 　 　　　／⌒　　⌒＼ 　　　／（ •） 　（•）＼ 　 ／::::::⌒（__人__）⌒:::::＼ 　　これからは　　　　　　　　　　　だお！ 　 |　　　　　|r┬-|　　　　 | 　 ＼ 　　 　 `ー'´ 　 　 ／ 別な言語の採用 10
11. PAGE # MOONGIFT / 50 DAY 2019/02/14 HTML5の誕生（2008年くらい） 11 　　　　　　　 ,.x ≦三三≧ ｘ、 　　　　　　∠彡''"´^~＾ﾞ｀ヾﾐﾐへ 　　　　　/ｼﾉ´　　　　　　.:..:.ヾjﾐﾍ 　　　　 ﾊⅣ　　　　　　　　 . .:.V小. 　　　　{川l!　　　　　　　　. .: .:.:Vﾉﾊ 　　　　{{川　　　　　　　　　. .: .:.VﾉA 　　　 「:.:V　＝=ミx. 　　 ,x=≦.:.:V:::::} .　　　 !::〈＼_rf込;ﾊ ＿_,rf込;ﾊ_/ﾐ.:::{ 　　　 ｛彡'　乂＿ノ´⌒'乂＿ノ.:.ミ.::ﾘ 　　　　 Xｨｨｘ　　　,' 　 :..〉　　 ,,;ミド’　　　　　　　 .　　　　　Ⅵ彡 　 ;xﾊｰXﾒﾐ､ ﾐﾐYﾘ 　　　　　　V彡彡'‐- - -‐'ﾐﾐﾊⅣ 　　　　　　 ヾ彡ｨxｨ小ﾊV彡ﾊjVヽ. 　　　　　　　 ﾄﾐ彡ｲ川从{ミjシ:::::::::`ｰ- .._ .　　　　　　／＼`'" {＾＼T":::::::::::::::::::::::::::::｀ヽ、 　　　_..-''":::::::::::::::「｀＼　＼:::::::::::::::::::::::::::::::::::: _..-'"::::::::::::::::::::::::r ヽ.　 `　　ヽ::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::∧　 ` 　　　　',:::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::{　　　　　　　　i::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::ヽ.　　　　　　　|::::::::::::::::::::::::::::: Flash？サポートしないよ
12. PAGE # MOONGIFT / 50 DAY 2019/02/14 asm.jsの誕生（2013年くらい） •JavaScriptのサブセット言語 •JavaScriptに制約を加えてコンパイル&キャッシュ •EmscriptenでC/C++からasm.jsに変換 12
13. PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの誕生（現在） 13 　 　 　　　＿＿＿_ 　 　　　／⌒　　⌒＼ 　　　／（ •） 　（•）＼ 　 ／::::::⌒（__人__）⌒:::::＼ 　　Emscriptenがサポートしたお！ 　 |　　　　　|r┬-|　　　　 | 　 ＼ 　　 　 `ー'´ 　 　 ／
14. PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの特徴 14
15. PAGE # MOONGIFT / 50 DAY 2019/02/14 ポジティブな特徴 •高速（数値計算ならJavaScriptの数十倍） •高い難読性 •多彩な言語から作成可能 15
16. PAGE # MOONGIFT / 50 DAY 2019/02/14 テキストとバイナリ 16 (module (func $getAnswer (result i32) i32.const 42) (func (export "getAnswerPlus1") (result i32) call $getAnswer i32.const 1 i32.add))
17. PAGE # MOONGIFT / 50 DAY 2019/02/14 inline-wast 17 const {wastInstructions} = require('inline-wast/lib/interpreter'); function add(a, b) { const fn = wastInstructions` (i32.const ${a}) (i32.const ${b}) (i32.add) `; return fn(); } console.log(add(3, 1)); // 4 https://github.com/xtuc/inline-wast
18. PAGE # MOONGIFT / 50 DAY 2019/02/14 対応ブラウザ 18
19. PAGE # MOONGIFT / 50 DAY 2019/02/14 対応言語 •C / C++ •Rust •C# •Java(TeaVM) 19 •Go •AssemblyScript •Kotlin/Native •walt
20. PAGE # MOONGIFT / 50 DAY 2019/02/14 AssemblyScript •JavaScriptのSuper setであるTypeScript のSub set •JavaScriptライクな記法でWebAssemblyが 書ける 20
21. PAGE # MOONGIFT / 50 DAY 2019/02/14 AssemblyScript 21 declare function sayHello(): void; sayHello(); export function add(x: i32, y: i32): i32 { return x + y; } WebAssembly.instantiateStreaming(
 fetch("../out/main.wasm"), { main: { sayHello() { console.log("Hello from WebAssembly!"); } }, env: { abort(_msg, _file, line, column) { console.error("abort at main.ts:" + line + ":" + column); } }, }).then(result => { const exports = result.instance.exports; document.getElementById("container").textContent = "Result: " + exports.add(19, 23); }).catch(console.error);
22. PAGE # MOONGIFT / 50 DAY 2019/02/14 ネガティブな特徴 •DOM、ネットワークが使えない •要コンパイル 22
23. PAGE # MOONGIFT / 50 DAY 2019/02/14 弱点の克服法 •Canvasのポインターを渡す •Webブラウザ（メインスレッド）と通信する 23
24. PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの使いどころ 24
25. PAGE # MOONGIFT / 50 DAY 2019/02/14 ゲーム 25 https://beta.unity3d.com/jonas/AngryBots/
26. PAGE # MOONGIFT / 50 DAY 2019/02/14 Webアプリケーション •vim.wasm •Squoosh 26 https://rhysd.github.io/vim.wasm/ https://squoosh.app/
27. PAGE # MOONGIFT / 50 DAY 2019/02/14 チャート 27 Perspective
28. PAGE # MOONGIFT / 50 DAY 2019/02/14 他言語実行環境 •Ruby -> https://runrb.io/ •Python -> https://alpha.iodide.io/notebooks/300/ •Swift -> https://swiftwasm.org/ •Perl -> https://webperl.zero-g.net/ •Lua -> https://cdn.rawgit.com/vvanders/wasm_lua/ d68f46a8/main.html 28
29. PAGE # MOONGIFT / 50 DAY 2019/02/14 最近のWebAssembly 29
30. PAGE # MOONGIFT / 50 DAY 2019/02/14 DOM/ネットワークの利用 •Rust + wasm-bindgen •Go + syscall/js 30
31. PAGE # MOONGIFT / 50 DAY 2019/02/14 Rust + wasm-bindgen 31 use wasm_bindgen::prelude::*; #[wasm_bindgen] extern "C" { fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}!", name)); } import { greet } from "./hello_world"; greet("World!");
32. PAGE # MOONGIFT / 50 DAY 2019/02/14 Go + syscall/js 32 package main import "syscall/js" func main() { document := js.Global().Get("document") button := document.Call("getElementById", "btn") cb1 := js.NewCallback(func(args []js.Value) { println("Clicked"); }) button.Call("addEventListener", "click", cb1) <-make(chan struct{}, 0) } <script src="wasm_exec.js"></script> <script> const go = new Go(); WebAssembly.instantiateStreaming( fetch(“main.wasm"), go.importObject ) .then((result) => { go.run(result.instance); }); </script>
33. PAGE # MOONGIFT / 50 DAY 2019/02/14 WASM = ユニバーサルバイナリ •どんな言語であってもWASMに変換すれ ば、別な環境で実行できる 33 }
34. PAGE # MOONGIFT / 50 DAY 2019/02/14 WASM = ユニバーサルバイナリ •どんな言語であってもWASMに変換すれ ば、別な環境で実行できる 34 {
35. PAGE # MOONGIFT / 50 DAY 2019/02/14 https://wasmer.io/ $ curl https://get.wasmer.io -sSfL | sh $ wasmer run nginx.wasm Running Nginx on localhost:8080 Press Ctrl-C to stop...
36. PAGE # MOONGIFT / 50 DAY 2019/02/14 CDNのエッジでWASMを実行 •Cloudflare Workers •Lucet 36
37. PAGE # MOONGIFT / 50 DAY 2019/02/14 WASI •WASMはコンパイル時にターゲットOSが決まらない弱点 •単一バイナリですべての環境で動作するようAPIを策定 37
38. PAGE # MOONGIFT / 50 DAY 2019/02/14 まとめ 38
39. PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyをマスターしよう •多彩な言語から変換可能！ •GoやRustならJavaScriptに触れなくても良い！ •より高機能化するWebアプリケーションにぜひ！ 39
40. PAGE # MOONGIFT / 50 DAY 2019/02/14 ! Thanks! @goofmint fb.me/goofmint ご感想お待ちします！