スキーマ駆動で加速するフロントエンド開発

Wantedly Tech Night #2 で発表した資料です。
https://wantedly.connpass.com/event/321747/

ウォンテッドリーのフロントエンドエンジニア・バックエンドエンジニアが機能開発時にどう協働しているかを説明したものです。

Transcript

1. © 2024 Wantedly, Inc. スキーマ駆動で加速する フロントエンド開発 Jun. 26 2024 - Tsuyoshi Hara Wantedly Tech Night #2
2. © 2024 Wantedly, Inc. 自己紹介 原 剛士 (Tsuyoshi Hara) @chloe463 Frontend Chapter Leader サービスグロースをしながら、ウォンテッドリー 全体のフロントエンド改善に取り組んでいる。 最近ハマっていること: 朝ジム ずっとハマっていること: BABYMETAL
3. © 2024 Wantedly, Inc. Webアプリケーション開発でのツラ ミ
4. © 2024 Wantedly, Inc. Webアプリケーション開発でのツラミ • このデータを取得するには、どこのマイクロサービスのどのエンドポイント から取得したらいい？ • どういうパラメータでリクエストしたらいい？ • パラメータは camelCase? snake_case? • Nullable じゃないと思ったら nullable だった…。 • バックエンドの開発が完了しないとフロントエンドの開発始められないよ…。 • etc…
5. © 2024 Wantedly, Inc. 今日話すこと
6. © 2024 Wantedly, Inc. スキーマ駆動開発
7. © 2024 Wantedly, Inc. スキーマ駆動開発 • WebAPI や Remote Procedure Call (RPC) の定義を 決めから機能開発を行うこと。 • ウォンテッドリーではバックエンドの RPC 定義を 決めてから開発を進めるようにしている。 • 今回のトークテーマはスキーマ駆動開発で フロントエンドエンジニアが受ける恩恵について。
8. © 2024 Wantedly, Inc. 目次 1. Wantedly Visit のシステムの概形の紹介 2. システム間の RPC 定義の概要紹介 3. 機能開発時の具体的な進め方 4. フロントエンドでのスキーマの活用方法 5. まとめ
9. © 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介
10. © 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介
11. © 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 Webアプリ (Next.js)
12. © 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 システム。マザー Rails と 各種マイクロサービス。 (Ruby on Rails, Go)
13. © 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 API Gateway (GraphQL)
14. © 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 • Webアプリは Next.js を使用。 • システムはマイクロサービス群からなる。 • WebアプリはシステムとGraphQL サーバー (API Gateway) を通して通信する。
15. © 2024 Wantedly, Inc. マイクロサービス間の RPC 定義どうしている？ 🤔
16. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介
17. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 • マイクロサービス間の通信には gRPC を使用している。 • 各 RPC のリクエスト・レスポンスにすべて型が定義されてい る。 • どういうリクエストをしたら、どういうレスポンスで返ってくるか が一目瞭然。
18. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 • 中央集権的に(ほぼ)全てのマイクロサービスの RPC 定義を 管理するリポジトリが存在する。 • そこから生成されたサーバー・クライアントコードを使用して各 マイクロサービスはサービスを実装する。
19. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 RPC 定義の例 (抜粋)
20. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介
21. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 RPC 定義を記述。
22. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 各言語向けの サーバー・クライアントコード が生成される
23. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介
24. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 各言語向けの サーバー・クライアントコードを使用し てアプリケーションの開発を行う。
25. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 GraphQL サーバーからバックエンドシステムへのリクエストの例
26. © 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 リクエストのオブジェクトは型が明確 レスポンスも型が定義されている 子フィールドもしっかり型がついている
27. © 2024 Wantedly, Inc. 機能開発時の具体的な進め方
28. © 2024 Wantedly, Inc. 機能開発時の具体的な進め方 1. バックエンドエンジニアが中心となり、RPC 定義を設計する。 2. フロントエンドエンジニアと設計について読み合わせを行う。 3. 合意が取れたら中央集権リポジトリにそれをマージする。 4. 生成されたコードを使い、フロントエンド・バックエンドそれぞれ の開発を進める。
29. © 2024 Wantedly, Inc. 機能開発時の具体的な進め方 RPC 定義を設計 設計の 読み合わせ バックエンド フロントエンド それぞれで開発 を開始 結合してリリー ス Week 1 Week 2
30. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法
31. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法
32. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 • フロントエンドリポジトリでは GraphQL のスキーマから TypeScript の型を生成して開発している。 • 型生成には The Guild の GraphQL Code Generator を 使用している。
33. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 • RPC 定義を GraphQL スキーマに翻訳して定義。 • フロントエンドはそのスキーマデータをダウンロード。 • ダウンロードしたスキーマと、アプリケーションコード中の Query から型定義を生成。
34. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 gRPC から GraphQL への翻訳 GraphQL スキーマから TypeScript の型を生成 RPC定義の マスター Node.js 用の クライアントコード
35. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 GraphQL Schema アプリケーション中の Query 生成される TypeScript の型
36. © 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 • TypeScript の型定義が生成できると、モックデータを使用し つつ Storybook で開発ができる。 • バックエンドの RPC 開発終了を待たずにフロントエンドの開 発をスタートできる。 • バックエンドの RPC 開発後にスムーズに機能がつながってい く。
37. © 2024 Wantedly, Inc. まとめ
38. © 2024 Wantedly, Inc. Webアプリケーション開発でのツラミ (再掲) • このデータを取得するには、どこのマイクロサービスのどのエンドポイント から取得したらいい？ • どういうパラメータでリクエストしたらいい？ • パラメータは camelCase? snake_case? • Nullable じゃないと思ったら nullable だった…。 • バックエンドの開発が完了しないとフロントエンドの開発始められないよ…。 • etc…
39. © 2024 Wantedly, Inc. Webアプリケーション開発でのツラミ解決 • 各マイクロサービスの RPC 定義は中央管理されている。 • RPC 定義のおかげで Req/Res 定義が明確。 • 中央管理の RPC から生成されるコードを活用して、 バックエンド・フロントエンド並行で作業可能に。
40. © 2024 Wantedly, Inc. まとめ • 各マイクロサービス間は gRPC を使用しており、RPC 定義を 明確にしている。 • RPC 定義は中央集権管理している。 • 中央管理されている RPC 定義から、型情報をうまく活用して いる。 • フロントエンドは GraphQL スキーマから TypeScript の型 を活用することで効率的に開発を進めている。
41. © 2024 Wantedly, Inc. ありがとうございました！