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

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

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

Nobuhito Ibaraki

May 22, 2018
Tweet

More Decks by Nobuhito Ibaraki

Other Decks in Technology

Transcript

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

    View Slide

  2. Rustとは

    Mozilla
    が開発
    ● 高速
    ● 安全

    2016
    年、
    2017
    年の
    Stack
    Overflow Developer
    Survey
    で「最も愛されて
    いるプログラミング言語」
    で一位
    (Wikipedia)

    View Slide

  3. Rustとは

    WebAssembly
    と連携

    WebAssembly
    への
    コンパイルをサポート

    emscripten
    不要

    cargo web

    簡単にビルドできる
    (https://github.com/kout
    e/cargo-web)

    View Slide

  4. これだけじゃないんです

    View Slide

  5. 強力なマクロ
    ● パターンマッチングを使いながら
    自在に構文を拡張可能
    ● マクロでテンプレートエンジン
    を作れたりする!
    (maud
    とか
    )
    maud
    (https://maud.lambda.xyz/)
    マクロ
    言語の機能で
    JSX
    のような構文拡張が可能

    View Slide

  6. Client Sideを扱う強力な
    ライブラリ:stdweb

    Rust
    の中に
    JavaScript
    風のマクロを
    記述できる

    JavaScript

    API
    を扱う
    インターフェース
    (alert
    とか
    query selector
    とか
    )
    簡単に
    DOM
    やイベントを扱える

    View Slide

  7. JSXのような
    構文拡張
    DOMの
    操作

    View Slide

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

    View Slide

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

    View Slide

  10. そう甘くはなかった
    ● 変数のライフタイムとの戦い
    (
    コールバック実行時に変数の
    生存を保証させるのが難しい
    )

    DOM
    のレンダリングと状態更新は
    なんとか出来た

    Component

    Virtual DOM
    までは
    実装できなかった
    rju(龍)
    (https://github.com/niba1122/rju)

    View Slide

  11. 自作フレームワークの実装で
    四苦八苦している中・・・

    View Slide

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

    View Slide

  13. yewとは

    Elm

    ReactJS
    の影響を受けた
    Rust
    フレームワーク
    (
    名前は
    Vue.js
    に似てる?
    )

    Virtual DOM
    による差分更新

    Component

    HTML
    ライクな記法
    (
    ちょっと癖はある
    )

    View Slide

  14. Model
    状態を持つ構造体
    これに
    Renderable

    Component
    トレイトを実装することで
    コンポーネントとしてレンダリング
    できる。

    View Slide

  15. Template

    View Slide

  16. Handle Event
    API Request
    Update State

    View Slide

  17. Componentの
    呼び出し

    View Slide

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

    View Slide

  19. まとめ

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

    JSer

    Rust
    のライブラリをいきなり作るのはハード

    View Slide

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

    View Slide

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

    View Slide