Hotwire入門 Part1 / Introduction to Hotwire Part 1

Transcript

1. Hotwire入門 Part1 Introduction to Hotwire Part 1
2. f 「HTML over the wire」のe f 非同期でJSON の代わりに HTML をネットワーク経由で送信する技E f バックエンドの知識のみでSPA風の画面を作成できo f Rails 7.0からRailsのフロントエンドのデフォルトになっ f Hotwire自体はJSのフレームワークのためRailsには依存しておらず、別の言語でも使用可Å f Railsから使用する場合は以下のgemを入れo f turbo-railu f stimulus-rails Hotwireって何？
3. Hotwireの特徴 Turbo 画面を置き換えるための機能で以下の 3つの技術で構成されていv t‰ Turbo Drivi h body内のHTMLを置き換えるこ とで高速な画面遷移を実A h 昔あったTurbolinksの後C 9‰ Turbo Frame0 h Turbo Driveの部分置換8 h 一部のDOM要素のみ置き換え が可i &‰ Turbo Stream0 h 複数箇所のDOM要素の同時更 @ h Turbo Framesの複数版 Stimulus Turboだけでは実現できない複雑な DOM更新をJSを使わずに行う技˜ h アコーディオンの開閉等のUIの持 つstateに応じたDOM更@ h onloadやonclick等のイベントに応 じたDOM更新 Native (Strada) Turbo対応のWebアプリをネイティブ 化（iOS/Android）するための技˜ h Turbo Nativeで作成したネイティ ブアプリは基本的にWebView上で 動作するイメージ Hotwireは以下の3つの技術で構成されている ※React+Next.js+ReactNativeを合わせたような技術
4. s バックエンドの技術のみで完結するため学習コストが低m ƒ Reactを学ぶ必要がなd ƒ JSの知識もそこまで必要なd s 開発コストが低m ƒ Reactに比べて少ないコードでSPA風の画面を作成できV s Railsの資産をそのまま活かせƒ ƒ フロントエンド用にビューモデル等の実装をしなくて良d ƒ ページネーションでkaminari等、Railsのgemをそのまま使えV s フロント側でstateの管理をしなくて良m ƒ バックエンドとフロントエンドで同じデータのやり取りをしてstate管理をしなくて良い Hotwireのメリット
5. m DOM更新時にレスポンスを待たないといけなe D アコーディオンの開閉等のReactではフロントだけで完結するようなDOM更新もHotwireでは バックエンドへのリクエストが都度発生す‡ D 特にネットワークのレイテンシーが低い場合はUXにも影響す‡ m 楽観的更新ができなe D バックエンドの処理を待たずにUIを更新するようなUXが実現できなt m バックエンドとフロントエンドの分業がやりづらe D バックエンドとフロントエンドが密結合するため分業はしづらt D 後々React化したいとなった際にHotwireを剥がすのが大変 Hotwireのデメリット
6. Q UI/UXに強いこだわりがないプロダク6 Q そこまでリッチなUI/UXが必要ない画B Q 管理画面の実r Q バックエンド(Rails)の経験のみでフロントエンドの経験が少ないチー Q Webと同じ画面をそのままWebViewでネイティブアプリ化したいケーÃ Q フロントエンドの実装にそこまで工数を掛けられないケース Hotwireの使いどころ