Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hotwire を 本番環境で使ってみた感想
Search
zaru
April 07, 2022
Programming
7
6.5k
Hotwire を 本番環境で使ってみた感想
2022年のRailsの開発現場事情について語ろう! Qiita Night
https://increments.connpass.com/event/241385/
zaru
April 07, 2022
Tweet
Share
More Decks by zaru
See All by zaru
Next.js App Router セキュリティ
zaru_sakuraba
13
4.2k
失敗から学ぶ個人開発
zaru_sakuraba
18
5.4k
伝わらない Issue の書き方
zaru_sakuraba
0
730
とあるプロジェクトでコードを書き始めた僕がつまづいた石たち
zaru_sakuraba
0
150
Ruby との対話 : pry を使い pry をデバッグし pry のバグを直す話
zaru_sakuraba
4
550
もう「クレデンシャルください」なんて言わせない
zaru_sakuraba
5
1.5k
個人プロジェクト現状報告会
zaru_sakuraba
0
110
僕と契約して、メソッドになってよ!
zaru_sakuraba
0
160
Other Decks in Programming
See All in Programming
Design Pressure
hynek
0
1.4k
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
150
Cache Strategies with Redisson & Exposed
debop
0
120
AWS診断200件の分析から見る頻出指摘と対策
shoodagiri
0
100
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
130
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
590
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
540
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
1.6k
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
140
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.3k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
150
Duke on CRaC with Jakarta EE
ivargrimstad
1
550
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
730
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
51
Product Roadmaps are Hard
iamctodd
PRO
53
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
KATA
mclloyd
29
14k
Fireside Chat
paigeccino
37
3.5k
Transcript
Hotwire を 本番環境で使ってみた感想 2022.04.07 Qiita Night @zaru
zaru
@zaru 株式会社ベーシック CTO 💓 Ruby, JavaScript WebComponents ISUCON 楽しみ
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
TurboDrive TurboFrame TurboSream Stimulus
TurboDrive TurboFrame TurboSream Stimulus 昔の Turbolinks <body> GET /articles/1 <body>
GET /articles/2 特に何もせずとも大雑把な意味で SPA っぽい挙動になる 体感速度は分かる程度には向上する Turbolinks 時代には、嫌われていた印象… 画面遷移時に <body> を fetch してきて入れ替える jQuery 時代は pjax とか呼ばれていたやつ
TurboDrive TurboFrame TurboSream Stimulus iframe のように使える iframe じゃないやつ GET /articles/1
サーバの各種リソースを コンポーネントのように 単一のページに結合して扱える GET /articles GET /ranking 前へ 1 2 .. 5 次へ GET /lazyload リンクのスコープが閉じているので frame 内部で遷移が可能 遅延表示も可能
TurboDrive TurboFrame TurboSream Stimulus 非同期アクションを WebSocket でやる GET /mailbox ・・・
新着メールタイトル 📩 モデルを subscribe して更新内容を受け取る View の partial HTML を WebSocket で送ったりする 💻 💼 🏻 ♂ モデル PubSub のように 複数人に同一の更新内容を 送ることもできる * WebSocket じゃなくてもできる
TurboDrive TurboFrame TurboSream Stimulus データバインディング中心の控えめな JS ライブラリ 描画とか、そういうのは一切やらない
None
Hotwire 使ったところ
一覧の検索と詳細表示
編集のライブプレビュー
None
Hotwire 感 想
良いところ
数行足すだけで本当に SPA 風味な体験を作れる
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 一覧から、画面遷移せずに 詳細情報を表示するタイプのやつ 例えば、これを作るとする
<ul> <li><%= link_to 'Article 1', article_path(1), data: { turbo_frame: 'article'
} %></li> <li><%= link_to 'Article 2', article_path(2), data: { turbo_frame: 'article' } %></li> </ul> <%= turbo_frame_tag 'article' %> <p>TurboFrame 対象外</p> <%= turbo_frame_tag 'article' do %> <h1><%= @article.title %></h1> <p><%= @article.content %></p> <% end %> show.html.erb index.html.erb TurboFrame で読み込んだ ものを表示する場所を定義 TurboFrame で読み込んだ ものを表示する場所を定義 反映先の Frame を指定 これだけで、できる
turbo_frame_tag で囲むだけで 素朴な Web アプリケーションが SPA 風味に変身…!! すごいぞ?!
状態管理がサーバのみになる
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 の編集 これをクライアント側でや ろうとすると、クライアン トも状態を持ち、サーバも 状態を管理することになる * 実装方法にも依存するので一概には言えないけど
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
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 ! 聞いてくれて、ありがとう :)