Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webアプリを高速化する WebAssembly
Search
Atsushi Nakatsugawa
PRO
June 12, 2019
Technology
0
180
Webアプリを高速化する WebAssembly
Monaca UG TOKYO #9 〜先進的Web系技術を学ぶ〜
https://monacaug.connpass.com/event/131671/
の発表資料です。
Atsushi Nakatsugawa
PRO
June 12, 2019
Tweet
Share
More Decks by Atsushi Nakatsugawa
See All by Atsushi Nakatsugawa
DevRelに活かせるAIツールの紹介とレビュー
moongift
PRO
0
81
DevRelの基礎と戦略
moongift
PRO
0
46
DevRelの始め方
moongift
PRO
3
640
マンガで分かるDevRelオンライン
moongift
PRO
0
160
DevRel Online with Manga
moongift
PRO
0
88
DevRel 4コマ
moongift
PRO
0
140
DevRel 4 panel Manga
moongift
PRO
0
86
DevRelの基礎〜開発者マーケティング〜
moongift
PRO
0
41
DevRelの基礎〜DevX(開発者体験)〜
moongift
PRO
0
54
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
60k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
380
Share my, our lessons from the road to re:Invent
naospon
0
150
クラウド食堂とは?
hiyanger
0
120
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
2
120
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Active Directory攻防
cryptopeg
PRO
8
5.5k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.1k
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Invisible Side of Design
smashingmag
299
50k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Producing Creativity
orderedlist
PRO
344
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Side Projects
sachag
452
42k
Unsuck your backbone
ammeep
669
57k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Documentation Writing (for coders)
carmenintech
67
4.6k
Done Done
chrislema
182
16k
Transcript
PAGE DAY 2019/02/14 # MOONGIFT / 50 Webアプリを高速化する WebAssembly 1
PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint
fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
PAGE # MOONGIFT / 50 DAY 2019/02/14 今日話すこと •WebAssemblyとは何か? •WebAssemblyで何ができるのか、何ができないのか
•WebAssemblyの使いどころ 3
PAGE # MOONGIFT / 50 DAY 2019/02/14 今日話さないこと •WebAssemblyの開発方法 4
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyとは? 5
PAGE # MOONGIFT / 50 DAY 2019/02/14 Webブラウザで動作する高速バイナリ •プログラミング言語ではありません •バイナリとテキスト型があります
6
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの歴史 7
PAGE # MOONGIFT / 50 DAY 2019/02/14 Ajax登場!(2004年くらい) 8
____ /⌒ ⌒\ /( •) (•)\ /::::::⌒(__人__)⌒:::::\ これからはJavaScriptだお! | |r┬-| | \ `ー'´ /
PAGE # MOONGIFT / 50 DAY 2019/02/14 JavaScriptの苦しみ…(2005年くらい) 9
____ / \ / _ノ ヽ、_ \ / o゚((•)) ((•))゚o \ ほんとはJavaScriptやりたくないんだお… | (__人__) | \ ` ⌒´ / 型がない APIが圧倒的に不足 HTMLの表現力が貧弱
PAGE # MOONGIFT / 50 DAY 2019/02/14 ____
/⌒ ⌒\ /( •) (•)\ /::::::⌒(__人__)⌒:::::\ これからは だお! | |r┬-| | \ `ー'´ / 別な言語の採用 10
PAGE # MOONGIFT / 50 DAY 2019/02/14 HTML5の誕生(2008年くらい) 11
,.x ≦三三≧ x、 ∠彡''"´^~^゙`ヾミミへ /シノ´ .:..:.ヾjミヘ ハⅣ . .:.V小. {川l! . .: .:.:Vノハ {{川 . .: .:.VノA 「:.:V ==ミx. ,x=≦.:.:V:::::} . !::〈\_rf込;ハ __,rf込;ハ_/ミ.:::{ {彡' 乂_ノ´⌒'乂_ノ.:.ミ.::リ Xィィx ,' :..〉 ,,;ミド’ . Ⅵ彡 ;xハーXメミ、 ミミYリ V彡彡'‐- - -‐'ミミハⅣ ヾ彡ィxィ小ハV彡ハjVヽ. トミ彡イ川从{ミjシ:::::::::`ー- .._ . /\`'" {^\T":::::::::::::::::::::::::::::`ヽ、 _..-''":::::::::::::::「`\ \:::::::::::::::::::::::::::::::::::: _..-'"::::::::::::::::::::::::r ヽ. ` ヽ::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::∧ ` ',:::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::{ i::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::ヽ. |::::::::::::::::::::::::::::: Flash?サポートしないよ
PAGE # MOONGIFT / 50 DAY 2019/02/14 asm.jsの誕生(2013年くらい) •JavaScriptのサブセット言語 •JavaScriptに制約を加えてコンパイル&キャッシュ
•EmscriptenでC/C++からasm.jsに変換 12
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの誕生(現在) 13
____ /⌒ ⌒\ /( •) (•)\ /::::::⌒(__人__)⌒:::::\ Emscriptenがサポートしたお! | |r┬-| | \ `ー'´ /
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの特徴 14
PAGE # MOONGIFT / 50 DAY 2019/02/14 ポジティブな特徴 •高速(数値計算ならJavaScriptの数十倍) •高い難読性
•多彩な言語から作成可能 15
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))
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
PAGE # MOONGIFT / 50 DAY 2019/02/14 対応ブラウザ 18
PAGE # MOONGIFT / 50 DAY 2019/02/14 対応言語 •C /
C++ •Rust •C# •Java(TeaVM) 19 •Go •AssemblyScript •Kotlin/Native •walt
PAGE # MOONGIFT / 50 DAY 2019/02/14 AssemblyScript •JavaScriptのSuper setであるTypeScript
のSub set •JavaScriptライクな記法でWebAssemblyが 書ける 20
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);
PAGE # MOONGIFT / 50 DAY 2019/02/14 ネガティブな特徴 •DOM、ネットワークが使えない •要コンパイル
22
PAGE # MOONGIFT / 50 DAY 2019/02/14 弱点の克服法 •Canvasのポインターを渡す •Webブラウザ(メインスレッド)と通信する
23
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyの使いどころ 24
PAGE # MOONGIFT / 50 DAY 2019/02/14 ゲーム 25 https://beta.unity3d.com/jonas/AngryBots/
PAGE # MOONGIFT / 50 DAY 2019/02/14 Webアプリケーション •vim.wasm •Squoosh
26 https://rhysd.github.io/vim.wasm/ https://squoosh.app/
PAGE # MOONGIFT / 50 DAY 2019/02/14 チャート 27 Perspective
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
PAGE # MOONGIFT / 50 DAY 2019/02/14 最近のWebAssembly 29
PAGE # MOONGIFT / 50 DAY 2019/02/14 DOM/ネットワークの利用 •Rust +
wasm-bindgen •Go + syscall/js 30
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!");
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>
PAGE # MOONGIFT / 50 DAY 2019/02/14 WASM = ユニバーサルバイナリ
•どんな言語であってもWASMに変換すれ ば、別な環境で実行できる 33 }
PAGE # MOONGIFT / 50 DAY 2019/02/14 WASM = ユニバーサルバイナリ
•どんな言語であってもWASMに変換すれ ば、別な環境で実行できる 34 {
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...
PAGE # MOONGIFT / 50 DAY 2019/02/14 CDNのエッジでWASMを実行 •Cloudflare Workers
•Lucet 36
PAGE # MOONGIFT / 50 DAY 2019/02/14 WASI •WASMはコンパイル時にターゲットOSが決まらない弱点 •単一バイナリですべての環境で動作するようAPIを策定
37
PAGE # MOONGIFT / 50 DAY 2019/02/14 まとめ 38
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyをマスターしよう •多彩な言語から変換可能! •GoやRustならJavaScriptに触れなくても良い!
•より高機能化するWebアプリケーションにぜひ! 39
PAGE # MOONGIFT / 50 DAY 2019/02/14 ! Thanks! @goofmint
fb.me/goofmint ご感想お待ちします!