Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
Search
puku0x
October 25, 2023
Technology
0
390
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
https://increments.connpass.com/event/294310/
puku0x
October 25, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
2k
Findyの開発生産性を上げるためにやったこと
puku0x
1
500
Angularコーディングスタイルガイドはいいぞ
puku0x
1
200
Nx CloudでCIを爆速にした話
puku0x
0
640
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.2k
Nxはいいぞ
puku0x
0
690
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
300
Other Decks in Technology
See All in Technology
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
180
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
130
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
340
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
5
930
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
270
The XZ Backdoor Story
fr0gger
0
3.5k
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
150
エンジニア向け会社紹介資料
caddi_eng
15
250k
Agile in Automotive Industry, puzzles and lights.
hiranabe
2
1k
JEP 480: Structured Concurrency
aya_ebata
0
130
サプライチェーン攻撃に備える
ryunen344
0
190
Optuna: a Black-Box Optimization Framework
pfn
PRO
1
110
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
What's in a price? How to price your products and services
michaelherold
242
11k
Adopting Sorbet at Scale
ufuk
73
8.9k
Building Applications with DynamoDB
mza
90
6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Code Review Best Practice
trishagee
62
16k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
The Cult of Friendly URLs
andyhume
76
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Unsuck your backbone
ammeep
667
57k
Being A Developer After 40
akosma
84
590k
Transcript
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~ Qiita Conference 2023 Autumn @puku0x Noriyuki Shinpuku
登録ユーザー 10万人以上 導入企業 1,000社以上
バッジ機能リニューアル! https://findy-code.io/badges
4
Findyの開発生産性は? 5
直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数
PR数 10件/日 超え PRオープン後、即レビュー その日の内にマージ 直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数
以前のFindyはどうだった? 8
2020年のFindy
レビューされるまで6日かかる PR数 1〜2個/日 1件の改修に1週間かかる 2020年のFindy
以前のFindyフロントエンド • Railsモノリス上のReact • バージョンの古いツール・ライブラリ多数 • 型(Flow)はある • テストが無い •
見通しの悪い設計 11
刷新しよう 12
モノリス解体
モノリス解体 • バックエンド: Ruby on Rails • フロントエンド: Next.js •
「Findyがモノリス環境をやめて得られたユーザへの爆速価値提供」 https://note.com/ma3tk/n/na502374b6ad6 ◦ リリース回数: 9倍 ◦ マージ回数: 6倍 ◦ PRクローズまでのスピード : 35倍 ◦ GitHub上のアクティビティ数 : 4倍 14
技術的負債の返済
開発基盤の刷新 • 依存ライブラリのバージョンアップ ◦ Dependabot導入 ◦ メンテされないライブラリの廃止 • モダンな環境に移行 ◦
TypeScript ◦ React 16.8+(現在はReact 18系) ◦ Nx、Jest、ESLint、Prettier ▪ nx migrateコマンドによる自動更新 16
設計の刷新 • 依存の方向を揃える • Container/Presentational Componentベース ◦ データの流入元に合わせた三層構造 17 Page
Component Container Component Presentational Component URLパラメータの解釈 APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
テストの拡充 • 書けそうなところから着手 ◦ ロジックのユニットテスト ◦ コンポーネントのスナップショットテスト など ◦ 慣れてきたら結合テストを増やす
• Wallaby.jsなどの可視化ツールも有用 • テストを書く→テストを書きやすい設計 の好循環 18
現在のFindyフロントエンド • Next.js v13 / React 18 +
TypeScript + GraphQL • Jest, Testing Library, Storybook, Chromatic, Autify • Prettier, ESLint, Stylelint, Commitlint • Nx + Nx Cloud • GitHub Actions 19 モダンな環境に刷新できた
めでたしめでたし 20
完 21
これだけではまだ終わらない 22
新たな課題 • CIが遅い ◦ コード量が増えるとCI時間も増える • CIが遅いとどうなる? ◦ レビューが放置される ◦
ブランチ生存期間が延びる ◦ コンフリクト多発 23 レビューは 後回しでいいや
https://twitter.com/ayamakkie/status/1657279013260525568 時間が 無い!
CIの高速化
CIの高速化 • 変更検知+キャッシュ活用 ◦ その他、ジョブ並列化、仮想マシンのアップグレードなど 26 平均5分で完了 毎月300時間以上のCI時間を削減 https://nx.app/ はいいぞ
2022年 2021年 2023年 一人あたりの開発生産性が約3倍に ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ
まとめ • Findyの開発生産性向上への取り組み ◦ モノリス解体 ◦ 技術的負債の返済 ◦ CIの高速化 •
日々の改善が大事 28 https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70
ご清聴ありがとうございました @puku0x Noriyuki Shinpuku