Hotwire よもやま話

Anecdotes on
Hotwire

経験したこと、感じたこと、Hotwireのこと

概要

  1. このサイトについて
  2. Hotwireとは何か？
  3. Hotwireはどいういう時に向いているか？
  4. あなたはHotwireを採用するべきか？
  5. Hotwireは管理画面限定？

コード例

  1. トグル
  2. アコーディオン
  3. ドロップダウン
  4. リアルタイム検索
  5. サイドバーメニュー
  6. カルーセル
  7. 引き出し
  8. トースト
  9. モーダル
  10. 「いいね」ボタン
  11. Apple Store模写（複雑なステート）
  12. Chart.js埋め込み

考える手順

  1. HotwireはMVPのMPAから作る
  2. TurboとStimulus: どっちを使う？
  3. Hotwire, React, jQueryのアプローチ

コンセプト

  1. JavaScriptは使おう！
  2. Stimulus中のHTML生成を避ける理由
  3. サーバから見たTurbo FramesとTurbo Streamsの違い
  4. Stimulusのコア・コンセプト
  5. Stimulus Controllerの構造
  6. なるべく<a>や<form>を使用すること
  7. POST/Redirect/GETパターンと高速化
  8. Turboのアキレス腱はネットワーク

他ライブラリとの組み合わせ

  1. Sprockets, Webpacker後の世界
  2. Chart.jsをStimulusから使う
  3. Reactと一緒に使う

意見

  1. HotwireのJavaScriptは簡単
  2. Reactが難しい要因はJavaScript
  3. Stimulus controllerの再利用性
  4. Stimulus ControllerはCSS classを変更するべきか？
  5. モーダルダイアログは使うべきか？
  6. Hotwireはもっと簡単にならないのか？

付録