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
入門wasm
Search
TajimaTheMemer
November 13, 2019
0
75
入門wasm
TajimaTheMemer
November 13, 2019
Tweet
Share
More Decks by TajimaTheMemer
See All by TajimaTheMemer
事業成長を加速させるGoのコード品質改善の取り組み / Code quality improvement for Go language
tajimathememer
5
2.1k
CronJobがschedule通りにJobを生成しない時
tajimathememer
0
1.1k
ふわっと理解する類似画像検索技術
tajimathememer
0
130
Machine Learning As Software
tajimathememer
0
58
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
RailsConf 2023
tenderlove
29
900
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Docker and Python
trallard
40
3.1k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Designing for humans not robots
tammielis
250
25k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
The Language of Interfaces
destraynor
154
24k
GraphQLとの向き合い方2022年版
quramy
43
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Transcript
入門wasm Makuake LT By Tajima Taichi 2019/11/23
https://twitter.com/YuG1224/status/1173194238139363329
※というジョークがありますが
None
フロントエンドの歴史(雑) 動的にHTML,cssを処理 ↓ ajax ↓ SPA, グラフィック処理, 機械学習..
javascriptに求められる 実行速度は増していく
javascriptではしんどくなってきた 動的型付け インタプリタ
そこで登場したのがwasm
wasmとは
wasmとは Web Assembly
wasmとは フロントエンドの処理の 高速化のために作られた
wasmとは Webブラウザ用のアセンブリ
wasmとは Webブラウザ上で実行できるハイパ フォーマンスなバイナリコード
wasmとは Webブラウザ上でネイティブに 近い実行速度
wasmとは 高速起動、高速動作、省容量
wasmとは asm.jsの代替として作られた
wasmとは 任意の言語からコンパイルして生成
wasmとは C, C++, Rustなどのコンパイラ言語を ブラウザで実行できる
wasmが目指すもの
wasmが目指すもの 高速・高効率・ポータブル https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmが目指すもの 可読性・デバックしやすさ https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmが目指すもの 安全 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmが目指すもの ウェブを破壊しないこと https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmの使い方
wasmの使い方 C/C++, Rust, ... Compiler .wasm Browser .js
wasmの使い方 C/C++, LLVM IR emscripten .wasm コンパイラ emscripten: コンパイラツールチェーン ※emscriptten以外の選択肢もある
wasmの使い方 .wasm ・javascriptより軽量なバイナリコード ・機械語ではない ・抽象構文木を内包している
wasmの使い方 ※ブラウザが動くマシンのプロセッサに対応させるため再コンパイルする javascript API
wasmの使いどころ
wasmの使いどころ ・C/C++, Rust..などの資産の流用 ・C/C++, Rust..などのアプリの移植 ・重たい処理の部分だけ高速化 ※DOM操作も一応できる
wasmの使いどころ ※javascriptを置き換えるものではなく補完 するもの
wasmの使いどころ ※wasmによって必ずしもパフォーマン スが向上するとも限らない (適材適所)
ユースケース
ユースケース ・ゲーム ・VR ・暗号化 ・画像・動画編集 ・P2P ...
採用事例
採用事例 Google Earthのwasm移植版。chrome以外のブラウザに対応。 https://blog.chromium.org/2019/06/webassembly-brings-google-earth-to-m ore.html
採用事例 Wav形式の音声ファイルをwasmでmp3に変換しデータ圧縮。 https://developers.cyberagent.co.jp/blog/archives/20506/
ちなみに
wasmはブラウザだけに 留まらない
つい1週間前...
エッジ環境で使える汎用なWebAssembly実行環境「Lucet」 https://www.fastly.com/blog/join-the-beta-new-serverless-compute-enviro nment-at-the-edge
本日付の最新ニュース
https://bytecodealliance.org/articles/announcing-the-bytecode-alliance wasmの進化が加速
最後に
最後に wasmはまだまだ発展途上
最後に wasmの未来に乞うご期待!