Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

RustでWebAssembly

2019年11月21日(木)に開催しました、エンジニア文化祭~新技術へのチャレンジ~の資料です。

  • Sé el primero en comentar

RustでWebAssembly

  1. 1. RustでWebAssembly 株式会社セレス インフラチーム 樫本直弘
  2. 2. About Me ● 樫本直弘(かしもとなおひろ) ○ GitHub:https://github.com/NaohiroKashimoto ● 株式会社セレスの(中略)インフラチーム所属 ● 業務 ○ 内部統制(IT) ○ バックエンドの管理(プロビジョニング、モニタリング、 etc...) ● バックグラウンド ○ N88-BASIC,80286のアセンブラからPerl,PHP,C/C++,C#,Ruby,Go,ES5,ES2015,Reactあたりま で。 ○ ガラケー開発、サーバー型電子マネー、決済、と来て現職
  3. 3. 目次 ● 自己紹介(済) ● なぜRustか ● なぜWebAssemblyか ● ブラウザから見たWASMの実行フロー ● WASMでの動作確認までのフロー ● 事前準備 ● コードを見ながら実行してみよう ● 結論
  4. 4. なぜRustか
  5. 5. GCないしメモリ管理とかイケてそう ゼロコスト抽象化がかっこいい
  6. 6. Rustの特徴 ● 安全性、速度、並行性にフォーカスした言語 ○ 型安全 ○ メモリセーフ ○ GCがない ○ マルチスレッドを実装しやすい ○ C++と同程度の実行速度 ● コンパイラ言語 ● 静的型付け
  7. 7. Rustの採用事例 ● MozillaのFirefox ● Facebook Libra Core ○ Libraプロトコルのオープンソース実装 ○ Libra:https://developers.libra.org/docs/libra-core-overview ○ GitHub:https://github.com/libra/libra ● Amazon Web ServiceのFirecracker ○ Rustで書かれたKVMを利用するMicroVM ○ AWS:https://aws.amazon.com/jp/blogs/news/firecracker-lightweight-virtualization-for-serverles s-computing/ ○ GitHub:https://github.com/firecracker-microvm/firecracker ● 他にもDropbox,Fastlyなどで活用されている。
  8. 8. なぜWebAssmblyか
  9. 9. 何ができるかわからないから使ってみたい
  10. 10. WebAssemblyの特徴 ● バイナリフォーマット ○ WebAssemblyのテキスト表現もある。 WAST(拡張子:.wast)とWAT(拡張子:.wat)の2つのフォー マットが存在。 ● 異なるプラットフォーム間でネイティブ水準の速度で実行可能 ● 安全に実行できるようにサンドボックス内で実行される。 ● wasm32とwasm64があるがwasm64のコンパイラがないので事実上wasm32の み。
  11. 11. ブラウザからみたWASMの実行フロー 1. ブラウザがHTML読み込み 2. ブラウザがJavaScript読み込み&実行 3. JavaScript内からWASM読み込み&実行
  12. 12. Rustを使ってWASMでの動作確認までのフロー 1. Rust(2パターン) a. wasm-packでビルドする b. rustcでビルドする 2. JavaScript(3パターン) a. 手書きのJavaScript,HTMLでWASM呼び出し b. wasm-packをnpmのローカルインストールで node_modulesにインポートしてwebpackでまとめ る c. create-wasm-appを使う
  13. 13. 事前準備 1. Rustのインストール 2. npmのインストール そこまで複雑ではないので詳しい説明は割愛します
  14. 14. コードみながら実行してみよう 1. Rustの単純なコード(JavaScriptのalertをRustから呼び出す)を書く 2. wasm-packでビルドするとpkgディレクトリが生成される。npm installで取り込める 形になっている。 3. publicディレクトリに移動してnpm initで初期化 4. npm install --save-dev webpack webpack-cli webpack-dev-server 5. package.jsonのscriptsにdev-server起動のコマンド書く 6. index.html,index.jsを用意しておく 7. webpack-dev-serverで確認
  15. 15. まとめ ● RustからWASM,WATを吐き出すまでのフローが煩雑に思えた。 ● JavaScriptとRust間での変数の受け渡しのハードルが高い。個人開発者含めて広 がるには、まだ時間かかると思う(本番環境に適用するという意味で)。 ● Rust/WebAssembly用のUIフレームワークyewを使ってみたい。
  16. 16. 参考資料 ● WebAssembly Specification ○ http://webassembly.github.io/spec/core/index.html ● WebAssembly: 「なぜ」と「どうやって」 [翻訳記事] ○ https://dev.to/nabbisen/webassembly--3385 ● Rust から WebAssembly にコンパイルする ○ https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm ● WebAssembly テキストフォーマットを理解する ○ https://developer.mozilla.org/ja/docs/WebAssembly/Understanding_the_text_format ● WebAssembly JavaScript API を使用する ○ https://developer.mozilla.org/ja/docs/WebAssembly/Using_the_JavaScript_API
  17. 17. 参考資料2 ● wasm-pack ○ rustのコードをいい感じに npmのモジュールにしてくれる。 ○ https://github.com/rustwasm/wasm-pack ● yew ○ UIフレームワーク ○ https://github.com/yewstack/yew
  18. 18. ご静聴ありがとうございました

    Sé el primero en comentar

  • ssuserc39f9c

    Nov. 2, 2020
  • yumios

    Mar. 26, 2021

2019年11月21日(木)に開催しました、エンジニア文化祭~新技術へのチャレンジ~の資料です。

Vistas

Total de vistas

361

En Slideshare

0

De embebidos

0

Número de embebidos

70

Acciones

Descargas

0

Compartidos

0

Comentarios

0

Me gusta

2

×