2022年のRailsの開発現場事情について語ろう! Qiita Night https://increments.connpass.com/event/241385/
Hotwire を本番環境で使ってみた感想2022.04.07 Qiita Night @zaru
View Slide
zaru
@zaru株式会社ベーシック CTO💓 Ruby, JavaScriptWebComponentsISUCON楽しみ
Hotwire 使っているよという人✋
はい、誰もいませんねHotwire の宣伝に来ました
素朴な Web アプリケーションを作っている皆さん…not ガチ GUI、not リッチ CMS
こんな気持ちになりませんか?
こんな気持ちになりませんか?SPA 風味な体験やUI を楽に実装したいReact か Vue か Svelteか Angular か永遠に技術選定しているRails と React でステートの多重管理めんどう…ERB と JSX混じっててカオス
そこでHotwire ですよ
Hotwire とはJavaScript を極力書かずにモダンな Web アプリケーションを作れるよ。SPA 風味な実装がサクッとできるよ。しかも JSON ではなくHTML をサーバとやり取りするよ。View 生成をサーバに全部任せるよ。クライアントは何もしなくて良いんだよ。最高なんだよ。知らんけど。それが Hotwire だよ。という感じ。
Hotwire とはJavaScript を極力書かずにモダンな Web アプリケーションを作れるよ。SPA 風味な実装がサクッとできるよ。しかも JSON ではなくHTML をサーバとやり取りするよ。View 生成をサーバに全部任せるよ。クライアントは何もしなくて良いんだよ。最高なんだよ。知らんけど。それが Hotwire だよ。という感じ。暗黙的で、魔術的で、裏で何やっているか把握しにくくて、嫌なにおいがするぞ
Hotwire とはJavaScript を極力書かずにモダンな Web アプリケーションを作れるよ。SPA 風味な実装がサクッとできるよ。しかも JSON ではなくHTML をサーバとやり取りするよ。View 生成をサーバに全部任せるよ。クライアントは何もしなくて良いんだよ。最高なんだよ。知らんけど。それが Hotwire だよ。という感じ。SPA って構築コスト高いでしょ…しかも中途半端なものしかできなそう
Hotwire とはJavaScript を極力書かずにモダンな Web アプリケーションを作れるよ。SPA 風味な実装がサクッとできるよ。しかも JSON ではなくHTML をサーバとやり取りするよ。View 生成をサーバに全部任せるよ。クライアントは何もしなくて良いんだよ。最高なんだよ。知らんけど。それが Hotwire だよ。という感じ。知らんけど、パフォーマンス悪そう〜時代逆行してる感
Hotwire の登場人物は3人 + 1
TurboDriveTurboFrameTurboSreamStimulus
TurboDriveTurboFrameTurboSreamStimulus昔の TurbolinksGET /articles/1GET /articles/2特に何もせずとも大雑把な意味で SPA っぽい挙動になる体感速度は分かる程度には向上するTurbolinks 時代には、嫌われていた印象…画面遷移時に を fetch してきて入れ替えるjQuery 時代は pjax とか呼ばれていたやつ
TurboDriveTurboFrameTurboSreamStimulusiframe のように使える iframe じゃないやつGET /articles/1サーバの各種リソースをコンポーネントのように単一のページに結合して扱えるGET /articlesGET /ranking前へ 1 2 .. 5 次へGET /lazyloadリンクのスコープが閉じているのでframe 内部で遷移が可能遅延表示も可能
TurboDriveTurboFrameTurboSreamStimulus非同期アクションを WebSocket でやるGET /mailbox・・・新着メールタイトル📩モデルを subscribe して更新内容を受け取るView の partial HTML を WebSocket で送ったりする 💻 💼🏻 ♂モデルPubSub のように複数人に同一の更新内容を送ることもできる* WebSocket じゃなくてもできる
TurboDriveTurboFrameTurboSreamStimulusデータバインディング中心の控えめな JS ライブラリ描画とか、そういうのは一切やらない
Hotwire 使ったところ
一覧の検索と詳細表示
編集のライブプレビュー
Hotwire 感 想
良いところ
数行足すだけで本当にSPA 風味な体験を作れる
GET /articles/2GET /articlesID: 1 showID: 2 showID: 3 showID: 4 showGET /articles/1ID: 1 showID: 2 showID: 3 showID: 4 showID: 1 の詳細fetchHTML一覧から、画面遷移せずに詳細情報を表示するタイプのやつ例えば、これを作るとする
<%= 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.erbindex.html.erbTurboFrame で読み込んだものを表示する場所を定義TurboFrame で読み込んだものを表示する場所を定義反映先の Frame を指定これだけで、できる
turbo_frame_tag で囲むだけで素朴な Web アプリケーションがSPA 風味に変身…!!すごいぞ?!
状態管理がサーバのみになる
ID: 1 タイトル1 showID: 2 タイトル2 showID: 3 タイトル3 showID: 4 タイトル4 show更新内容を画面全体の要素に反映させたいタイトル1更新updateTitleID: 1 の編集ID: 1 タイトル1更新 showID: 2 タイトル2 showID: 3 タイトル3 showID: 4 タイトル4 show更新完了しましたID: 1 の編集これをクライアント側でやろうとすると、クライアントも状態を持ち、サーバも状態を管理することになる* 実装方法にも依存するので一概には言えないけど
ID: 1 タイトル1 showID: 2 タイトル2 showID: 3 タイトル3 showID: 4 タイトル4 showタイトル1更新updateTitleID: 1 の編集ID: 1 タイトル1更新 showID: 2 タイトル2 showID: 3 タイトル3 showID: 4 タイトル4 show更新完了しましたID: 1 の編集状態も描画もサーバに任せて、クライアントは渡されたものを描画するだけArticleモデルが変更を検知して、変更箇所を WebSocket 使ってView を publish するHTMLPUT
SPA で課題になりがちな状態管理をサーバで素朴にできるよすごいぞ?!
微妙なところ
ERB と React なら書き味はReact が圧倒的に良い* React の部分はお好きな JS ライブラリにしてくださいHotwire というよりも Rails/Ruby の話
描画パフォーマンスはBetter 止まり、最速ではない必ずサーバのレスポンスを待つ特性Optimistic Updates(楽観的更新) できないページ編集など変更要素が多いエディタのライブプレビューにはあまり向いてない…
Turbo は良いけどStimulus がつらいTurbo を使うのに Stimulus は必須ではないけれど、軽量なデータバインディングとして採用したい…だけど…
普通の HTML の data 属性に書くので、エディタで補完がされないし、テストもしにくいDOM 依存している割に DOM 構造を知らない。振る舞いのみに分離して分かりにくいTypeScript で declare すればコード上では確定できるけども
ぶっちゃけ今後も使いますか?想定質問
使うぞ!!
- Web アプリケーションの要件に依存すると思う- またはチームのスキル特性と規模- スモールチームで素朴な Web アプリケーションならマッチする- 物足りなくなったら気軽に捨てられるRails 使っていて、素朴なWeb アプリケーションなら普通に採用して良いと思う
Hotwire よりもReact の方が良いんじゃないですか?* React の部分はお好きな JS ライブラリにしてください想定質問
- ただ React 使うなら Next とかApollo, Nest, Firebase などでサーバも JS にしたい気持ち- Rails with React みたいなハイブリッド構成は個人的には重い* React の部分はお好きな JS ライブラリにしてくださいはい、React とても良いです!
Enjoy Hotwire !聞いてくれて、ありがとう :)