by zaru

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

zaru

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

こんな気持ちになりませんか？

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

そこで Hotwire ですよ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Hotwire の登場人物は3人 + 1

Slide 15

Slide 15 text

TurboDrive TurboFrame TurboSream Stimulus

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Hotwire 使ったところ

Slide 22

Slide 22 text

一覧の検索と詳細表示

Slide 23

Slide 23 text

編集のライブプレビュー

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Hotwire 感想

Slide 26

Slide 26 text

良いところ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 一覧から、画面遷移せずに詳細情報を表示するタイプのやつ例えば、これを作るとする

Slide 29

Slide 29 text

<%= 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 を指定これだけで、できる

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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 の編集これをクライアント側でやろうとすると、クライアントも状態を持ち、サーバも状態を管理することになる * 実装方法にも依存するので一概には言えないけど

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

微妙なところ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

使うぞ！！

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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