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

Hotwire を 本番環境で使ってみた感想

zaru
April 07, 2022

Hotwire を 本番環境で使ってみた感想

2022年のRailsの開発現場事情について語ろう! Qiita Night
https://increments.connpass.com/event/241385/

zaru

April 07, 2022
Tweet

More Decks by zaru

Other Decks in Programming

Transcript

  1. Hotwire を
    本番環境で使ってみた感想
    2022.04.07 Qiita Night @zaru

    View full-size slide

  2. @zaru
    株式会社ベーシック CTO
    💓 Ruby, JavaScript
    WebComponents
    ISUCON
    楽しみ

    View full-size slide

  3. Hotwire 使っているよという人✋

    View full-size slide

  4. はい、誰もいませんね
    Hotwire の宣伝に来ました

    View full-size slide

  5. 素朴な Web アプリケーションを
    作っている皆さん…
    not ガチ GUI、not リッチ CMS

    View full-size slide

  6. こんな気持ちになりませんか?

    View full-size slide

  7. こんな気持ちになりませんか?
    SPA 風味な体験や
    UI を楽に実装したい
    React か Vue か Svelte
    か Angular か永遠に技
    術選定している
    Rails と React で
    ステートの
    多重管理めんどう…
    ERB と JSX
    混じっててカオス

    View full-size slide

  8. そこで
    Hotwire ですよ

    View full-size slide

  9. Hotwire とは
    JavaScript を極力書かずにモダンな Web アプ
    リケーションを作れるよ。SPA 風味な実装が
    サクッとできるよ。しかも JSON ではなく
    HTML をサーバとやり取りするよ。View 生成
    をサーバに全部任せるよ。クライアントは何
    もしなくて良いんだよ。最高なんだよ。知ら
    んけど。それが Hotwire だよ。という感じ。

    View full-size slide

  10. Hotwire とは
    JavaScript を極力書かずにモダンな Web アプ
    リケーションを作れるよ。SPA 風味な実装が
    サクッとできるよ。しかも JSON ではなく
    HTML をサーバとやり取りするよ。View 生成
    をサーバに全部任せるよ。クライアントは何
    もしなくて良いんだよ。最高なんだよ。知ら
    んけど。それが Hotwire だよ。という感じ。
    暗黙的で、魔術的で、裏で何
    やっているか把握しにくくて、
    嫌なにおいがするぞ

    View full-size slide

  11. Hotwire とは
    JavaScript を極力書かずにモダンな Web アプ
    リケーションを作れるよ。SPA 風味な実装が
    サクッとできるよ。しかも JSON ではなく
    HTML をサーバとやり取りするよ。View 生成
    をサーバに全部任せるよ。クライアントは何
    もしなくて良いんだよ。最高なんだよ。知ら
    んけど。それが Hotwire だよ。という感じ。
    SPA って構築コスト高いでしょ
    …しかも中途半端なものしかで
    きなそう

    View full-size slide

  12. Hotwire とは
    JavaScript を極力書かずにモダンな Web アプ
    リケーションを作れるよ。SPA 風味な実装が
    サクッとできるよ。しかも JSON ではなく
    HTML をサーバとやり取りするよ。View 生成
    をサーバに全部任せるよ。クライアントは何
    もしなくて良いんだよ。最高なんだよ。知ら
    んけど。それが Hotwire だよ。という感じ。
    知らんけど、
    パフォーマンス悪そう〜
    時代逆行してる感

    View full-size slide

  13. Hotwire の
    登場人物は3人 + 1

    View full-size slide

  14. TurboDrive
    TurboFrame
    TurboSream
    Stimulus

    View full-size slide

  15. TurboDrive
    TurboFrame
    TurboSream
    Stimulus
    昔の Turbolinks

    GET /articles/1

    GET /articles/2
    特に何もせずとも大雑把な意味で SPA っぽい挙動になる
    体感速度は分かる程度には向上する
    Turbolinks 時代には、嫌われていた印象…
    画面遷移時に を fetch してきて入れ替える
    jQuery 時代は pjax とか呼ばれていたやつ

    View full-size slide

  16. TurboDrive
    TurboFrame
    TurboSream
    Stimulus
    iframe のように使える iframe じゃないやつ
    GET /articles/1
    サーバの各種リソースを
    コンポーネントのように
    単一のページに結合して扱える
    GET /articles
    GET /ranking
    前へ 1 2 .. 5 次へ
    GET /lazyload
    リンクのスコープが閉じているので
    frame 内部で遷移が可能
    遅延表示も可能

    View full-size slide

  17. TurboDrive
    TurboFrame
    TurboSream
    Stimulus
    非同期アクションを WebSocket でやる
    GET /mailbox
    ・・・
    新着メールタイトル
    📩
    モデルを subscribe して更新内容を受け取る
    View の partial HTML を WebSocket で送ったりする
    💻
    💼
    🏻 ♂
    モデル
    PubSub のように
    複数人に同一の更新内容を
    送ることもできる
    * WebSocket じゃなくてもできる

    View full-size slide

  18. TurboDrive
    TurboFrame
    TurboSream
    Stimulus
    データバインディング中心の控えめな JS ライブラリ
    描画とか、そういうのは一切やらない

    View full-size slide

  19. Hotwire 使ったところ

    View full-size slide

  20. 一覧の検索と詳細表示

    View full-size slide

  21. 編集のライブプレビュー

    View full-size slide

  22. Hotwire 感 想

    View full-size slide

  23. 良いところ

    View full-size slide

  24. 数行足すだけで本当に
    SPA 風味な体験を作れる

    View full-size slide

  25. GET /articles/2
    GET /articles
    ID: 1 show
    ID: 2 show
    ID: 3 show
    ID: 4 show
    GET /articles/1
    ID: 1 show
    ID: 2 show
    ID: 3 show
    ID: 4 show
    ID: 1 の詳細
    fetch
    HTML
    一覧から、画面遷移せずに
    詳細情報を表示するタイプのやつ
    例えば、これを作るとする

    View full-size slide


  26. <%= link_to 'Article 1', article_path(1), data: { turbo_frame: 'article' } %>
    <%= link_to 'Article 2', article_path(2), data: { turbo_frame: 'article' } %>

    <%= turbo_frame_tag 'article' %>
    TurboFrame 対象外
    <%= turbo_frame_tag 'article' do %>
    <%= @article.title %>
    <%= @article.content %>
    <% end %>
    show.html.erb
    index.html.erb
    TurboFrame で読み込んだ
    ものを表示する場所を定義
    TurboFrame で読み込んだ
    ものを表示する場所を定義
    反映先の Frame を指定
    これだけで、できる

    View full-size slide

  27. turbo_frame_tag で囲むだけで
    素朴な Web アプリケーションが
    SPA 風味に変身…!!
    すごいぞ?!

    View full-size slide

  28. 状態管理がサーバのみになる

    View full-size slide

  29. ID: 1 タイトル1 show
    ID: 2 タイトル2 show
    ID: 3 タイトル3 show
    ID: 4 タイトル4 show
    更新内容を画面全体の要素
    に反映させたい
    タイトル1更新
    update
    Title
    ID: 1 の編集
    ID: 1 タイトル1更新 show
    ID: 2 タイトル2 show
    ID: 3 タイトル3 show
    ID: 4 タイトル4 show
    更新完了しました
    ID: 1 の編集
    これをクライアント側でや
    ろうとすると、クライアン
    トも状態を持ち、サーバも
    状態を管理することになる
    * 実装方法にも依存するので一概には言えないけど

    View full-size slide

  30. ID: 1 タイトル1 show
    ID: 2 タイトル2 show
    ID: 3 タイトル3 show
    ID: 4 タイトル4 show
    タイトル1更新
    update
    Title
    ID: 1 の編集
    ID: 1 タイトル1更新 show
    ID: 2 タイトル2 show
    ID: 3 タイトル3 show
    ID: 4 タイトル4 show
    更新完了しました
    ID: 1 の編集
    状態も描画もサーバに任せ
    て、クライアントは渡され
    たものを描画するだけ
    Article
    モデルが変更を検知して、変
    更箇所を WebSocket 使って
    View を publish する
    HTML
    PUT

    View full-size slide

  31. SPA で課題になりがちな
    状態管理をサーバで素朴にできるよ
    すごいぞ?!

    View full-size slide

  32. 微妙なところ

    View full-size slide

  33. ERB と React なら
    書き味はReact が圧倒的に良い
    * React の部分はお好きな JS ライブラリにしてください
    Hotwire というよりも Rails/Ruby の話

    View full-size slide

  34. 描画パフォーマンスは
    Better 止まり、最速ではない
    必ずサーバのレスポンスを待つ特性
    Optimistic Updates(楽観的更新) できない
    ページ編集など変更要素が多いエディタの
    ライブプレビューにはあまり向いてない…

    View full-size slide

  35. Turbo は良いけど
    Stimulus がつらい
    Turbo を使うのに Stimulus は必須ではない
    けれど、軽量なデータバインディングとして
    採用したい…だけど…

    View full-size slide

  36. 普通の HTML の data 属性に書くの
    で、エディタで補完がされないし、
    テストもしにくい
    DOM 依存している割に DOM 構造を知らな
    い。振る舞いのみに分離して分かりにくい
    TypeScript で declare すればコード上では確定できるけども

    View full-size slide

  37. ぶっちゃけ今後も使いますか?
    想定質問

    View full-size slide

  38. 使うぞ!!

    View full-size slide

  39. - Web アプリケーションの要件に依存すると思う
    - またはチームのスキル特性と規模
    - スモールチームで素朴な Web アプリケーションならマッチする
    - 物足りなくなったら気軽に捨てられる
    Rails 使っていて、素朴な
    Web アプリケーションなら
    普通に採用して良いと思う

    View full-size slide

  40. Hotwire よりも
    React の方が
    良いんじゃないですか?
    * React の部分はお好きな JS ライブラリにしてください
    想定質問

    View full-size slide

  41. - ただ React 使うなら Next とか
    Apollo, Nest, Firebase などでサーバも JS にしたい気持ち
    - Rails with React みたいなハイブリッド構成は個人的には重い
    * React の部分はお好きな JS ライブラリにしてください
    はい、React とても良いです!

    View full-size slide

  42. Enjoy Hotwire !
    聞いてくれて、ありがとう :)

    View full-size slide