Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rust+WebAssemblyでWebアプリは作れるのか

 Rust+WebAssemblyでWebアプリは作れるのか

162b7b9b7aa85f5248a9979a688f9601?s=128

Nobuhito Ibaraki

May 22, 2018
Tweet

Transcript

  1. Rust+WebAssemblyで Webアプリは作れるのか Meguro.es #15 Nobuhito Ibaraki @niba1122

  2. Rustとは • Mozilla が開発 • 高速 • 安全 • 2016

    年、 2017 年の Stack Overflow Developer Survey で「最も愛されて いるプログラミング言語」 で一位 (Wikipedia)
  3. Rustとは • WebAssembly と連携 ◦ WebAssembly への コンパイルをサポート → emscripten

    不要 ◦ cargo web で 簡単にビルドできる (https://github.com/kout e/cargo-web)
  4. これだけじゃないんです

  5. 強力なマクロ • パターンマッチングを使いながら 自在に構文を拡張可能 • マクロでテンプレートエンジン を作れたりする! (maud とか )

    maud (https://maud.lambda.xyz/) マクロ 言語の機能で JSX のような構文拡張が可能
  6. Client Sideを扱う強力な ライブラリ:stdweb • Rust の中に JavaScript 風のマクロを 記述できる •

    JavaScript の API を扱う インターフェース (alert とか query selector とか ) 簡単に DOM やイベントを扱える
  7. JSXのような 構文拡張 DOMの 操作 +

  8. Rust+WebAssemblyの フレームワークを作れるのでは?

  9. 世界初かもしれない・・・

  10. そう甘くはなかった • 変数のライフタイムとの戦い ( コールバック実行時に変数の 生存を保証させるのが難しい ) • DOM のレンダリングと状態更新は

    なんとか出来た • Component や Virtual DOM までは 実装できなかった rju(龍) (https://github.com/niba1122/rju)
  11. 自作フレームワークの実装で 四苦八苦している中・・・

  12. yew https://github.com/DenisKolodin/yew/

  13. yewとは • Elm や ReactJS の影響を受けた Rust フレームワーク ( 名前は

    Vue.js に似てる? ) • Virtual DOM による差分更新 • Component • HTML ライクな記法 ( ちょっと癖はある )
  14. Model 状態を持つ構造体 これに Renderable や Component トレイトを実装することで コンポーネントとしてレンダリング できる。

  15. Template

  16. Handle Event API Request Update State

  17. Componentの 呼び出し

  18. サンプルアプリ https://github.com/niba1122/rust_app

  19. まとめ • yew を使えば Rust+WebAssembly でインタラクティブなアプリを作れる! • パフォーマンスもいいらしい https://github.com/DenisKolodin/yew/issues/5#issuecomment-354777076 •

    JSer が Rust のライブラリをいきなり作るのはハード
  20. Rust+WebAssemblyは • 型安全 • ビルドツール不要 • ハイパフォーマンス の素敵な世界です。 どなたか一緒にRustを書きましょう!

  21. ご清聴ありがとうございました