Slide 1

Slide 1 text

実質無料で GraphQL Gateway を手に入れる GraphQL Gateway を実質無料で手に入れる Yuta Wada, 株式会社リクルート BuySell Dev Study フロントエンド勉強会

Slide 2

Slide 2 text

実質無料で GraphQL Gateway を手に入れる 自己紹介 ➔ 和田 祐汰 (@ywada526) ➔ Web Engineer at スタディサプリ ➔ Typescript / Node.js / Prisma / React / GraphQL あたりの技術を使って 仕事しています 2

Slide 3

Slide 3 text

実質無料で GraphQL Gateway を手に入れる Agenda | 01 02 03 frontend engineer のマイクロサービス疲れの整理 マイクロサービス疲れを解消する GraphQL Gateway GraphQL Gateway 利用したスタディサプリ中学講座の アーキテクチャの紹介 3

Slide 4

Slide 4 text

実質無料で GraphQL Gateway を手に入れる frontend engineer のマイクロ サービス疲れの整理 01 4

Slide 5

Slide 5 text

実質無料で GraphQL Gateway を手に入れる マイクロサービス、好きですか? 5

Slide 6

Slide 6 text

実質無料で GraphQL Gateway を手に入れる マイクロサービスに対するそれぞれの視点 ● backend engineer ○ モノリス辛いからマイクロサービスに移行したい ○ サービス毎に技術選定できるの good ○ マイクロサービス自体にチャレンジしたい ● frontend engineer ○ どっちにしても UI はモノリシック... ○ backend との通信はどうなるんだろう... ■ A: 通信は基本的にモノリスより複雑 6

Slide 7

Slide 7 text

実質無料で GraphQL Gateway を手に入れる マイクロサービスに対するそれぞれの視点 ● backend engineer ○ モノリス辛いからマイクロサービスに移行したい ○ サービス毎に技術選定できるの good ○ マイクロサービス自体にチャレンジしたい ● frontend engineer ○ どっちにしても UI はモノリシック... ○ backend との通信はどうなるんだろう... ■ A: 通信は基本的にモノリスより複雑 ➔ frontend engineer としては受ける恩恵があまりない一方で通信が複雑 になって辛いことが多い 7

Slide 8

Slide 8 text

実質無料で GraphQL Gateway を手に入れる マイクロサービスに対するそれぞれの視点 8 > A: 通信は基本的にモノリスより複雑 ここを深堀りたい

Slide 9

Slide 9 text

実質無料で GraphQL Gateway を手に入れる マイクロサービスの client - server 間通信パターン 1. 直接通信 2. Gateway パターン 3. BFF パターン 9

Slide 10

Slide 10 text

実質無料で GraphQL Gateway を手に入れる 1. 直接通信 ➔ client app が直接 backend services と通 信する ➔ 課題 ◆ backend services が UI と密結合し やすい ◆ 通信回数が多い ◆ 認証などの横断の関心事をどうする か ◆ client で通信の管理やデータのマー ジをする必要がある 10 web iOS Android backend service A backend service B backend service C

Slide 11

Slide 11 text

実質無料で GraphQL Gateway を手に入れる 2. Gateway パターン ➔ frontend と backend の中間に gateway を導入して通信を集約 ➔ 直接通信パターンの課題を解決できる ◆ backend と UI を疎にする ◆ 通信回数を集約 ◆ 認証などの横断の関心事を集約して backend を簡素化する ➔ 課題 ◆ client 毎の差分の扱い ◆ Gateway に多くのロジックが実装され る ◆ Gateway 担当チームとの調整コスト がある 11 web iOS Android backend service A backend service B backend service C gateway

Slide 12

Slide 12 text

実質無料で GraphQL Gateway を手に入れる 3. BFF パターン ➔ 各 frontend 用の backend (Backend For Frontend) を用意して backend との通信を 集約 ➔ Gateway パターン課題を解決 ◆ クライアント毎の差分を BFF が吸収で きる ◆ 各 frontend の engineer が BFF に オーナーシップを持つ ➔ 課題 ◆ client と server (BFF) の両方を開 発することが負担 ◆ トータルの実装コスト高い 12 web iOS Android backend service A backend service B backend service C web BFF iOS BFF Android BFF

Slide 13

Slide 13 text

実質無料で GraphQL Gateway を手に入れる どれをとっても辛い... ➔ frontend engineer の目線で見ると ◆ 直接通信 ● client で通信の管理やデータのマージをする必要がある ◆ Gateway パターン ● Gateway 担当チームとの調整コストが発生する ◆ BFF パターン ● client と server (BFF) の両方を開発することが負担 13

Slide 14

Slide 14 text

実質無料で GraphQL Gateway を手に入れる GraphQL Gateway パターン 14

Slide 15

Slide 15 text

実質無料で GraphQL Gateway を手に入れる マイクロサービス疲れを解消する GraphQL Gateway 02 15

Slide 16

Slide 16 text

実質無料で GraphQL Gateway を手に入れる ● 特徴 ○ client が欲しいデータの形を決定する ● 身近な例では SQL ● よいところ ○ オーバーフェッチ/アンダーフェッチを回避できる GraphQL の特徴 16

Slide 17

Slide 17 text

実質無料で GraphQL Gateway を手に入れる GraphQL の仕組み ➔ type によって schema を定義 ➔ schema に対して client が query を発行する 17 client server query { me { name posts { title } } } { "data": { "me": { "name": "Yuta Wada", "posts": [{ "title": "hi" }] } } }

Slide 18

Slide 18 text

実質無料で GraphQL Gateway を手に入れる ➔ GraphQL の「client が取得する データの形を決定する」という特徴 を活かしたパターン ◆ Gateway パターンの課題 「client 毎の差分の扱い」を 解決 ◆ BFF パターンの課題「実装コ スト」を解決 GraphQL Gateway パターン 18 web iOS Android backend service A backend service B backend service C GraphQL Gateway

Slide 19

Slide 19 text

実質無料で GraphQL Gateway を手に入れる 本当にこれでいいのか? 19

Slide 20

Slide 20 text

実質無料で GraphQL Gateway を手に入れる ➔ backend の通信プロトコルが REST/gRPC の場合、gateway で REST/gRPC から GraphQL への 変換を実装する必要がある GraphQL Gateway パターン 20 frontend backend service A backend service B GraphQL Gateway GraphQL REST/gRPC REST/gRPC

Slide 21

Slide 21 text

実質無料で GraphQL Gateway を手に入れる ➔ ポイント ◆ backend services にも GraphQL を採用 ◆ GraphQL Gateway Framework を利用する ➔ 結果 aggregation layer の実装コ ストがほぼ無料 GraphQL Gateway パターン (実質無料) 21 frontend backend service A backend service B GraphQL Gateway GraphQL GraphQL GraphQL

Slide 22

Slide 22 text

実質無料で GraphQL Gateway を手に入れる ● backend services の Schema を合成する ● 今回は Schema Stitching を例にどのくらい無料なのかを説明 ○ 各 backend services で独立した Type の合成 ○ 各 backend services をまたいだ Type の合成 GraphQL Gateway Framework とは 22

Slide 23

Slide 23 text

実質無料で GraphQL Gateway を手に入れる ケース1: 独立した Type の合成 23 frontend User Service Post Service GraphQL Gateway

Slide 24

Slide 24 text

実質無料で GraphQL Gateway を手に入れる ケース1: 独立した Type の合成 24

Slide 25

Slide 25 text

実質無料で GraphQL Gateway を手に入れる ケース1: 独立した Type の合成 25 frontend User Service Post Service GraphQL Gateway

Slide 26

Slide 26 text

実質無料で GraphQL Gateway を手に入れる ケース1: 独立した Type の合成 26 frontend User Service Post Service GraphQL Gateway query { userById(id: "foo") { name } postById(id: "bar") { body } }

Slide 27

Slide 27 text

実質無料で GraphQL Gateway を手に入れる ケース1: 独立した Type の合成 27 frontend User Service Post Service GraphQL Gateway query { userById(id: "foo") { name } postById(id: "bar") { body } } query { userById(id: "foo") { name } } query { postById(id: "bar") { body } }

Slide 28

Slide 28 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 28 frontend User Service Post Service GraphQL Gateway Post Type に author を追加したい

Slide 29

Slide 29 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 29 frontend User Service Post Service GraphQL Gateway

Slide 30

Slide 30 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 30

Slide 31

Slide 31 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 31 frontend User Service Post Service GraphQL Gateway

Slide 32

Slide 32 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 32 frontend User Service Post Service GraphQL Gateway 1. query { postById(id: "bar") { author { email } } }

Slide 33

Slide 33 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 33 frontend User Service Post Service GraphQL Gateway 1. query { postById(id: "bar") { author { email } } } 2. query { postById(id: "bar") { author { id } } }

Slide 34

Slide 34 text

実質無料で GraphQL Gateway を手に入れる ケース2: service をまたいだ Type の合成 34 frontend User Service Post Service GraphQL Gateway 3. query { userById(id: "foo") { email } } 1. query { postById(id: "bar") { author { email } } } 2. query { postById(id: "bar") { author { id } } }

Slide 35

Slide 35 text

実質無料で GraphQL Gateway を手に入れる ● REST ○ 枯れてる (安定) ● gRPC ○ パフォーマンス ○ schema の強制 ● GraphQL ○ client が response を決定 (= 1 request でデータの過不足がない) ○ schema の強制 internal 通信プロトコルの選定再考 35

Slide 36

Slide 36 text

実質無料で GraphQL Gateway を手に入れる ● REST ○ 枯れてる (安定) ● gRPC ○ パフォーマンス ○ schema の強制 ● GraphQL ○ client が response を決定 (= 1 request でデータの過不足がない) ○ schema の強制 ○ aggregation layer の実装コスパのよさ internal 通信プロトコルの選定再考 36

Slide 37

Slide 37 text

実質無料で GraphQL Gateway を手に入れる GraphQL Gateway を利用したス タディサプリ中学講座のアーキテク チャの紹介 03 37

Slide 38

Slide 38 text

実質無料で GraphQL Gateway を手に入れる スタディサプリ中学講座のアーキテクチャ 38 frontend (web/iOS/Android) main content monolith (legacy) gateway auth GraphQL GraphQL GraphQL REST REST GraphQL REST ➔ 2020年4月から新規サービスとし て開発スタート ➔ 2022年2月にリリースして現在運 用中

Slide 39

Slide 39 text

実質無料で GraphQL Gateway を手に入れる スタディサプリ中学講座のアーキテクチャ 39 frontend (web/iOS/Android) main content monolith (legacy) gateway auth GraphQL GraphQL GraphQL REST REST GraphQL REST ➔ 実質無料 GraphQL Gateway ➔ Schema Stitching を利用

Slide 40

Slide 40 text

実質無料で GraphQL Gateway を手に入れる ➔ だれがオーナーシップを持っているのか? ➔ 開発フロー (実際のところどのくらい無料なのか?) 実質無料 GraphQL Gateway の実態 40

Slide 41

Slide 41 text

実質無料で GraphQL Gateway を手に入れる ➔ schema stitching の実装ファイルの commit 数を backend/frontend engineer 毎に集計 ◆ backend: 124 ◆ frontend: 95 ● web: 35 ● iOS: 33 ● Android: 27 ➔ プロダクトに関わるエンジニアみんながオーナーシップを持っている ◆ 専任チームが発生してボトルネックになっていない だれがオーナーシップを持っているのか? 41

Slide 42

Slide 42 text

実質無料で GraphQL Gateway を手に入れる 1. 既存の schema が利用できる場合 2. 新たに schema 定義が必要な場合 (service 独立の type) 3. 新たに schema 定義が必要な場合 (service またぎの type) 開発フロー (実際のところどのくらい無料なのか?) 42

Slide 43

Slide 43 text

実質無料で GraphQL Gateway を手に入れる ➔ 既存の schema に対して query を発行すればよい ➔ backend および gateway の開発 が不要 1. 既存の schema が利用できる場合 43 要求整理 動作確認 frontend 開発

Slide 44

Slide 44 text

実質無料で GraphQL Gateway を手に入れる ➔ schema 定義は backend/frontend engineer ど ちらが行う場合もある ◆ 先に開発に着手する方 ◆ => "待ち" が発生しない ➔ gateway 開発不要 2. 新たに schema 定義が必要 (service 独立の type) 44 要求整理 動作確認 schema 定義 frontend 開発 backend 開発

Slide 45

Slide 45 text

実質無料で GraphQL Gateway を手に入れる ➔ この場合のみ gateway の開発が 必要になる ◆ schema stitching の設定の み 3. 新たに schema 定義が必要 (service またぎの type) 45 要求整理 動作確認 schema 定義 frontend 開発 backend 開発 gateway 開発

Slide 46

Slide 46 text

実質無料で GraphQL Gateway を手に入れる まとめ ➔ frontend engineer のマイクロサービス疲れを解消するアーキテクチャとし て GraphQL Gateway を紹介 ➔ アーキテクチャによっては実質無料で GraphQL Gateway が手に入る ◆ backend services が GraphQL をしゃべる ◆ GraphQL Gateway Framework の利用 ➔ backend services の通信プロトコルの選定では aggregation layer の実 装コスパにもっと注目したい ➔ 個人的な課題: GraphQL Mesh も試してみたい ◆ 低コストで REST/gRPC も aggregate できそう 46

Slide 47

Slide 47 text

実質無料で GraphQL Gateway を手に入れる We are hiring! ➔ frontend engineer 募集しています ➔ カジュアル面談歓迎です! ➔ 採用ページ: https://brand.studysapuri.jp/career/ 47

Slide 48

Slide 48 text

実質無料で GraphQL Gateway を手に入れる ご清聴ありがとうございました 48