入門wasm

入門wasm Makuake LT By Tajima Taichi 2019/11/23

https://twitter.com/YuG1224/status/1173194238139363329

※というジョークがありますが

フロントエンドの歴史(雑) 動的に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はブラウザだけに留まらない

つい１週間前...

エッジ環境で使える汎用な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の未来に乞うご期待！

入門wasm

入門wasm

More Decks by TajimaTheMemer

Featured

Transcript