Slide 1

Slide 1 text

© 2024 Wantedly, Inc. スキーマ駆動で加速する フロントエンド開発 Jun. 26 2024 - Tsuyoshi Hara Wantedly Tech Night #2

Slide 2

Slide 2 text

© 2024 Wantedly, Inc. 自己紹介 原 剛士 (Tsuyoshi Hara) @chloe463 Frontend Chapter Leader サービスグロースをしながら、ウォンテッドリー 全体のフロントエンド改善に取り組んでいる。 最近ハマっていること: 朝ジム ずっとハマっていること: BABYMETAL

Slide 3

Slide 3 text

© 2024 Wantedly, Inc. Webアプリケーション開発でのツラ ミ

Slide 4

Slide 4 text

© 2024 Wantedly, Inc. Webアプリケーション開発でのツラミ ● このデータを取得するには、どこのマイクロサービスのどのエンドポイント から取得したらいい? ● どういうパラメータでリクエストしたらいい? ● パラメータは camelCase? snake_case? ● Nullable じゃないと思ったら nullable だった…。 ● バックエンドの開発が完了しないとフロントエンドの開発始められないよ…。 ● etc…

Slide 5

Slide 5 text

© 2024 Wantedly, Inc. 今日話すこと

Slide 6

Slide 6 text

© 2024 Wantedly, Inc. スキーマ駆動開発

Slide 7

Slide 7 text

© 2024 Wantedly, Inc. スキーマ駆動開発 ● WebAPI や Remote Procedure Call (RPC) の定義を 決めから機能開発を行うこと。 ● ウォンテッドリーではバックエンドの RPC 定義を 決めてから開発を進めるようにしている。 ● 今回のトークテーマはスキーマ駆動開発で フロントエンドエンジニアが受ける恩恵について。

Slide 8

Slide 8 text

© 2024 Wantedly, Inc. 目次 1. Wantedly Visit のシステムの概形の紹介 2. システム間の RPC 定義の概要紹介 3. 機能開発時の具体的な進め方 4. フロントエンドでのスキーマの活用方法 5. まとめ

Slide 9

Slide 9 text

© 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介

Slide 10

Slide 10 text

© 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介

Slide 11

Slide 11 text

© 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 Webアプリ (Next.js)

Slide 12

Slide 12 text

© 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 システム。マザー Rails と 各種マイクロサービス。 (Ruby on Rails, Go)

Slide 13

Slide 13 text

© 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 API Gateway (GraphQL)

Slide 14

Slide 14 text

© 2024 Wantedly, Inc. Wantedly Visit のシステムの概形の紹介 ● Webアプリは Next.js を使用。 ● システムはマイクロサービス群からなる。 ● WebアプリはシステムとGraphQL サーバー (API Gateway) を通して通信する。

Slide 15

Slide 15 text

© 2024 Wantedly, Inc. マイクロサービス間の RPC 定義どうしている? 🤔

Slide 16

Slide 16 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介

Slide 17

Slide 17 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 ● マイクロサービス間の通信には gRPC を使用している。 ● 各 RPC のリクエスト・レスポンスにすべて型が定義されてい る。 ● どういうリクエストをしたら、どういうレスポンスで返ってくるか が一目瞭然。

Slide 18

Slide 18 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 ● 中央集権的に(ほぼ)全てのマイクロサービスの RPC 定義を 管理するリポジトリが存在する。 ● そこから生成されたサーバー・クライアントコードを使用して各 マイクロサービスはサービスを実装する。

Slide 19

Slide 19 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 RPC 定義の例 (抜粋)

Slide 20

Slide 20 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介

Slide 21

Slide 21 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 RPC 定義を記述。

Slide 22

Slide 22 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 各言語向けの サーバー・クライアントコード が生成される

Slide 23

Slide 23 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介

Slide 24

Slide 24 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 各言語向けの サーバー・クライアントコードを使用し てアプリケーションの開発を行う。

Slide 25

Slide 25 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 GraphQL サーバーからバックエンドシステムへのリクエストの例

Slide 26

Slide 26 text

© 2024 Wantedly, Inc. システム間の RPC 定義の概要紹介 リクエストのオブジェクトは型が明確 レスポンスも型が定義されている 子フィールドもしっかり型がついている

Slide 27

Slide 27 text

© 2024 Wantedly, Inc. 機能開発時の具体的な進め方

Slide 28

Slide 28 text

© 2024 Wantedly, Inc. 機能開発時の具体的な進め方 1. バックエンドエンジニアが中心となり、RPC 定義を設計する。 2. フロントエンドエンジニアと設計について読み合わせを行う。 3. 合意が取れたら中央集権リポジトリにそれをマージする。 4. 生成されたコードを使い、フロントエンド・バックエンドそれぞれ の開発を進める。

Slide 29

Slide 29 text

© 2024 Wantedly, Inc. 機能開発時の具体的な進め方 RPC 定義を設計 設計の 読み合わせ バックエンド フロントエンド それぞれで開発 を開始 結合してリリー ス Week 1 Week 2

Slide 30

Slide 30 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法

Slide 31

Slide 31 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法

Slide 32

Slide 32 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 ● フロントエンドリポジトリでは GraphQL のスキーマから TypeScript の型を生成して開発している。 ● 型生成には The Guild の GraphQL Code Generator を 使用している。

Slide 33

Slide 33 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 ● RPC 定義を GraphQL スキーマに翻訳して定義。 ● フロントエンドはそのスキーマデータをダウンロード。 ● ダウンロードしたスキーマと、アプリケーションコード中の Query から型定義を生成。

Slide 34

Slide 34 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 gRPC から GraphQL への翻訳 GraphQL スキーマから TypeScript の型を生成 RPC定義の マスター Node.js 用の クライアントコード

Slide 35

Slide 35 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 GraphQL Schema アプリケーション中の Query 生成される TypeScript の型

Slide 36

Slide 36 text

© 2024 Wantedly, Inc. フロントエンドでのスキーマの活用方法 ● TypeScript の型定義が生成できると、モックデータを使用し つつ Storybook で開発ができる。 ● バックエンドの RPC 開発終了を待たずにフロントエンドの開 発をスタートできる。 ● バックエンドの RPC 開発後にスムーズに機能がつながってい く。

Slide 37

Slide 37 text

© 2024 Wantedly, Inc. まとめ

Slide 38

Slide 38 text

© 2024 Wantedly, Inc. Webアプリケーション開発でのツラミ (再掲) ● このデータを取得するには、どこのマイクロサービスのどのエンドポイント から取得したらいい? ● どういうパラメータでリクエストしたらいい? ● パラメータは camelCase? snake_case? ● Nullable じゃないと思ったら nullable だった…。 ● バックエンドの開発が完了しないとフロントエンドの開発始められないよ…。 ● etc…

Slide 39

Slide 39 text

© 2024 Wantedly, Inc. Webアプリケーション開発でのツラミ解決 ● 各マイクロサービスの RPC 定義は中央管理されている。 ● RPC 定義のおかげで Req/Res 定義が明確。 ● 中央管理の RPC から生成されるコードを活用して、 バックエンド・フロントエンド並行で作業可能に。

Slide 40

Slide 40 text

© 2024 Wantedly, Inc. まとめ ● 各マイクロサービス間は gRPC を使用しており、RPC 定義を 明確にしている。 ● RPC 定義は中央集権管理している。 ● 中央管理されている RPC 定義から、型情報をうまく活用して いる。 ● フロントエンドは GraphQL スキーマから TypeScript の型 を活用することで効率的に開発を進めている。

Slide 41

Slide 41 text

© 2024 Wantedly, Inc. ありがとうございました!