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
380
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
https://increments.connpass.com/event/294310/
puku0x
October 25, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
730
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Scully: Angular SSG
puku0x
0
170
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AOAI Dev Day - Opening Session
yoshidashingo
2
430
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
140
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
エンジニア向け会社紹介資料
caddi_eng
14
220k
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Unsuck your backbone
ammeep
666
57k
Fireside Chat
paigeccino
25
2.8k
The Invisible Side of Design
smashingmag
294
50k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Thoughts on Productivity
jonyablonski
64
4.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
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