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