Tweet
Tweet

Slide 1

Slide 1 text

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~ Qiita Conference 2023 Autumn @puku0x Noriyuki Shinpuku

Slide 2

Slide 2 text

登録ユーザー 10万人以上 導入企業 1,000社以上

Slide 3

Slide 3 text

バッジ機能リニューアル！ https://findy-code.io/badges

Slide 4

Slide 4 text

4


Slide 5

Slide 5 text

Findyの開発生産性は？ 5


Slide 6

Slide 6 text

直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

Slide 7

Slide 7 text

PR数 10件/日 超え PRオープン後、即レビュー その日の内にマージ 直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

Slide 8

Slide 8 text

以前のFindyはどうだった？ 8


Slide 9

Slide 9 text

2020年のFindy

Slide 10

Slide 10 text

レビューされるまで6日かかる PR数 1〜2個/日 1件の改修に1週間かかる 2020年のFindy

Slide 11

Slide 11 text

以前のFindyフロントエンド
 ● Railsモノリス上のReact ● バージョンの古いツール・ライブラリ多数 ● 型（Flow）はある ● テストが無い ● 見通しの悪い設計 11


Slide 12

Slide 12 text

刷新しよう 12


Slide 13

Slide 13 text

モノリス解体

Slide 14

Slide 14 text

モノリス解体
 ● バックエンド: Ruby on Rails ● フロントエンド: Next.js ● 「Findyがモノリス環境をやめて得られたユーザへの爆速価値提供」 https://note.com/ma3tk/n/na502374b6ad6 ○ リリース回数: 9倍 ○ マージ回数: 6倍 ○ PRクローズまでのスピード : 35倍 ○ GitHub上のアクティビティ数 : 4倍 14


Slide 15

Slide 15 text

技術的負債の返済

Slide 16

Slide 16 text

開発基盤の刷新
 ● 依存ライブラリのバージョンアップ ○ Dependabot導入 ○ メンテされないライブラリの廃止 ● モダンな環境に移行 ○ TypeScript ○ React 16.8+（現在はReact 18系） ○ Nx、Jest、ESLint、Prettier ■ nx migrateコマンドによる自動更新 16


Slide 17

Slide 17 text

設計の刷新
 ● 依存の方向を揃える ● Container/Presentational Componentベース ○ データの流入元に合わせた三層構造 17
 Page Component Container Component Presentational Component URLパラメータの解釈 APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook

Slide 18

Slide 18 text

テストの拡充
 ● 書けそうなところから着手 ○ ロジックのユニットテスト ○ コンポーネントのスナップショットテスト など ○ 慣れてきたら結合テストを増やす ● Wallaby.jsなどの可視化ツールも有用 ● テストを書く→テストを書きやすい設計 の好循環 18


Slide 19

Slide 19 text

現在のFindyフロントエンド
 
 
 ● Next.js v13 / React 18 + TypeScript + GraphQL ● Jest, Testing Library, Storybook, Chromatic, Autify ● Prettier, ESLint, Stylelint, Commitlint ● Nx + Nx Cloud ● GitHub Actions 19
 モダンな環境に刷新できた

Slide 20

Slide 20 text

めでたしめでたし 20


Slide 21

Slide 21 text

完 21


Slide 22

Slide 22 text

これだけではまだ終わらない 22


Slide 23

Slide 23 text

新たな課題
 ● CIが遅い ○ コード量が増えるとCI時間も増える ● CIが遅いとどうなる？ ○ レビューが放置される ○ ブランチ生存期間が延びる ○ コンフリクト多発 23
 レビューは 後回しでいいや

Slide 24

Slide 24 text

https://twitter.com/ayamakkie/status/1657279013260525568 時間が 無い！

Slide 25

Slide 25 text

CIの高速化

Slide 26

Slide 26 text

CIの高速化
 ● 変更検知＋キャッシュ活用 ○ その他、ジョブ並列化、仮想マシンのアップグレードなど 26
 平均5分で完了 毎月300時間以上のCI時間を削減 https://nx.app/ はいいぞ

Slide 27

Slide 27 text

2022年 2021年 2023年 一人あたりの開発生産性が約３倍に ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ

Slide 28

Slide 28 text

まとめ
 ● Findyの開発生産性向上への取り組み ○ モノリス解体 ○ 技術的負債の返済 ○ CIの高速化 ● 日々の改善が大事 28
 https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70

Slide 29

Slide 29 text

ご清聴ありがとうございました @puku0x Noriyuki Shinpuku