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 Slide

  2. zaru

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. そこで
    Hotwire ですよ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. TurboDrive
    TurboFrame
    TurboSream
    Stimulus

    View Slide

  16. TurboDrive
    TurboFrame
    TurboSream
    Stimulus
    昔の Turbolinks

    GET /articles/1

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. View Slide

  21. Hotwire 使ったところ

    View Slide

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

    View Slide

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

    View Slide

  24. View Slide

  25. Hotwire 感 想

    View Slide

  26. 良いところ

    View Slide

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

    View Slide

  28. 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 Slide


  29. <%= 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 Slide

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

    View Slide

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

    View Slide

  32. 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 Slide

  33. 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 Slide

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

    View Slide

  35. 微妙なところ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. 使うぞ!!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide