Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

puku0x
October 25, 2023

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

puku0x

October 25, 2023
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. モノリス解体
 • バックエンド: Ruby on Rails • フロントエンド: Next.js •

    「Findyがモノリス環境をやめて得られたユーザへの爆速価値提供」 https://note.com/ma3tk/n/na502374b6ad6 ◦ リリース回数: 9倍 ◦ マージ回数: 6倍 ◦ PRクローズまでのスピード : 35倍 ◦ GitHub上のアクティビティ数 : 4倍 14

  2. 開発基盤の刷新
 • 依存ライブラリのバージョンアップ ◦ Dependabot導入 ◦ メンテされないライブラリの廃止 • モダンな環境に移行 ◦

    TypeScript ◦ React 16.8+(現在はReact 18系) ◦ Nx、Jest、ESLint、Prettier ▪ nx migrateコマンドによる自動更新 16

  3. 設計の刷新
 • 依存の方向を揃える • Container/Presentational Componentベース ◦ データの流入元に合わせた三層構造 17
 Page

    Component Container Component Presentational Component URLパラメータの解釈 APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
  4. 現在のFindyフロントエンド
 
 
 • Next.js v13 / React 18 +

    TypeScript + GraphQL • Jest, Testing Library, Storybook, Chromatic, Autify • Prettier, ESLint, Stylelint, Commitlint • Nx + Nx Cloud • GitHub Actions 19
 モダンな環境に刷新できた
  5. 新たな課題
 • CIが遅い ◦ コード量が増えるとCI時間も増える • CIが遅いとどうなる? ◦ レビューが放置される ◦

    ブランチ生存期間が延びる ◦ コンフリクト多発 23
 レビューは 後回しでいいや
  6. まとめ
 • Findyの開発生産性向上への取り組み ◦ モノリス解体 ◦ 技術的負債の返済 ◦ CIの高速化 •

    日々の改善が大事 28
 https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70