Remix Way を外れる自由

フレームワークに縛られない開発を実現する Remix

https://offers-jp.connpass.com/event/324745/
での発表資料です。

https://user-first.ikyu.co.jp/entry/2024/08/05/142626
もあわせてご覧ください。

Transcript

1. フレームワークに縛られない開発を実現する Remix Remix Way を外れる自由 株式会社一休 CTO室 恩田 崇
2. 2 自己紹介 株式会社一休 CTO室 恩田 崇 2023年4月入社 OAuth/OIDC 基盤導入、領収書・請求書発行マイクロ サービス導入の技術支援、基盤マイクロサービスの Google Cloud 移行などを手がける。 同年9月より一休レストランでフロントエンドを中心に 今後の機能拡張のためのリアーキテクト着手。
3. 3 Remix Philosophy Web 標準 API の尊重 サーバー/クライアントモデル プログレッシブエンハンスメント 基盤技術の抽象化は最小限 規約が最小限で、黒魔術が使われていない！
4. 4 Remix Way Action, Loaders, Component PESPA - Progressively Enhanced Single Page Apps MPA (Rails) のようなメンタルモデルと SSR / CDN Progressive Enhancement は奥が深いので割愛 React 19 でも標準 form への回帰 Server Actions と FormData useActionState Remix の推奨する方式 = opinionated な部分
5. 5 Remix Way から外れる Remix Way に乗る選択肢は間違いではない Opinionated だけど王道 Remix と疎結合にする選択肢が取れる 詳しくは React / Remix への依存を最小にするフロントエンド設計 で ユースケースや要件を見極めた上で…
6. 6 特別なユースケース Cache-Control （決して特別ではないが…) Fastly を CDN として使っている Back Forward Cache が効かない history state を使った URL を変えないクライアントサイドナビゲーション モーダルダイアログ 無限スクロール フレームワークをそのまま使うだけでは実現が難しい UI/UX 要件があった ` `
7. 7 Web 標準 API, 最小限の抽象化, Escape Hatch loader, action は Request, Response を返す useNavigate, useLocation で history state が扱える shouldRevalidate による loader のスキップ 余計なことをしないフレームワークだからこそ
8. 8 持って返って欲しいこと Remix は間口が広い 特殊なユースケースでも受け止めてくれる 痒いところに手が届くよう escape hatch が各所に用意されている サービスの性質を鑑みて、うまく Remix と付き合っていきましょう！ 将来に選択肢を残すために
9. 9 エンジニア募集中！ 一休では、よりよいサービスを届ける仲間を募集しています。