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

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