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
gRPCとフロントエンド_Connectを添えて
Search
sugar
October 17, 2023
Technology
2
1.6k
gRPCとフロントエンド_Connectを添えて
sugar
October 17, 2023
Tweet
Share
More Decks by sugar
See All by sugar
GoとWASI~超入門~
sugarcat7
2
180
最近個人開発が熱い ~多言語対応編~
sugarcat7
1
190
ボイラープレート自動生成ツールを使わなくなった話.pdf
sugarcat7
4
450
Using_Hono_in__B2B_SaaS_Application.pdf
sugarcat7
4
270
Introduction to Database Connection Management Patterns in TypeScript.pdf
sugarcat7
1
310
Azure Container AppsのSecret管理とIaC
sugarcat7
1
170
最近個人開発が熱い
sugarcat7
15
14k
新規サービスの バックエンド開発でBun×Honoを使い始めて 2ヶ月経った話
sugarcat7
2
1.1k
Other Decks in Technology
See All in Technology
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
100
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
180
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
190
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
250
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
130
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.4k
Design by the Numbers
sachag
277
19k
A Modern Web Designer's Workflow
chriscoyier
691
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Designing for Performance
lara
604
68k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Clear Off the Table
cherdarchuk
91
320k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
A Tale of Four Properties
chriscoyier
155
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Transcript
gRPCとフロントエンド ~Connectを添えて~ 2023/10/17 UV Study : フロントエンド LT会 @sugar235711
2 Sugar(@sugar235711) 株式会社AI Shift サーバーサイドエンジニア 普段はGoを書いてます。 フロントエンドはAngularが好きです。 登壇者紹介
3 Agenda 1. スキーマ駆動開発 1.1. スキーマ駆動開発とは 1.2. IDL 2. gRPC
on Web 2.1. gRPCとは 2.2. gRPCをWebブラウザで使う 3. Connect 3.1. 概要 4. Connect-Web 4.1. コード生成 4.2. React/Next.jsにおけるデータフェッチ(Client) 4.3. React/Next.jsにおけるデータフェッチ(Server)
4 スキーマ(仕様書)を最初に定義し、その定義をもとに開発を同時に進めるという開発手法 • クライアントとサーバーを非同期で開発可能 • 型やインターフェースの自動生成が可能 1.1 スキーマ駆動開発とは 1.スキーマ駆動開発 1.
スキーマの定義/認識合わせ 2. スタブの生成 3. 実装・単体テスト 4. 結合テスト 5. リリース
5 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator
6 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator ➢ クライアント - サーバ間通信は大部分が REST
7 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator ➢ クライアント - サーバ間通信は大部分が REST ◦ REST✖スキーマ駆動で開発を進めると YAMLを書くことになる。 ▪ 単純に読みづらい。肥大化しやすい。つらい。
8 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator ➢ クライアント - サーバ間通信は大部分が REST ◦ REST✖スキーマ駆動で開発を進めると Yamlを書くことになる。 ▪ 単純に読みづらい。肥大化しやすい。つらい。 →シンプルにスキーマを定義できる ProtobufでgRPCを定義したい
9 2.1 gRPCとは 2.gRPC on Web • HTTP/2, バイナリベースのRPCフレームワーク(Google産) •
シリアライズによってサーバー間の通信量を削減可能 • 幅広な言語のサポート(Go, Java, Node…) • IDLの定義に沿って言語ごとのコード生成ができる ◦ 生成されたコードは型安全 • 4つの通信方式が利用可能 ◦ Unary RPC ◦ Server streaming RPC ◦ Client streaming RPC ◦ Bidirectional streaming RPC https://grpc.io/
10 2.1 gRPCとは 2.gRPC on Web • HTTP/2, バイナリベースのRPCフレームワーク(Google産) •
シリアライズによってサーバー間の通信量を削減可能 • 幅広な言語のサポート(Go, Java, Node…) • IDLの定義に沿って言語ごとのコード生成ができる ◦ 生成されたコードは型安全 • 4つの通信方式が利用可能 ◦ Unary RPC ◦ Server streaming RPC ◦ Client streaming RPC ◦ Bidirectional streaming RPC ➢ Webブラウザでも使えるの?🧐
11 2.1 gRPCとは 2.gRPC on Web • HTTP/2, バイナリベースのRPCフレームワーク(Google産) •
シリアライズによってサーバー間の通信量を削減可能 • 幅広な言語のサポート(Go, Java, Node…) • IDLの定義に沿って言語ごとのコード生成ができる ◦ 生成されたコードは型安全 • 4つの通信方式が利用可能 ◦ Unary RPC ◦ Server streaming RPC ◦ Client streaming RPC ◦ Bidirectional streaming RPC ➢ Webブラウザでも使えるの?🧐 機能を制限すれば使える
12 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる 2. 何らかの手段で、HTTP APIにマッピングする
13 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる ◦ プロキシ(Envoy等)経由でgRPCが使える様になる → gRPC-Web 2. 何らかの手段で、HTTP APIにマッピングする
14 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる ◦ プロキシ(Envoy等)経由でgRPCが使える様になる → gRPC-Web 2. 何らかの手段で、HTTP APIにマッピングする ◦ RPC定義から自動マッピングする → Connect ◦ 自力でマッピングする →gRPC-Gateway
15 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる ◦ プロキシ(Envoy等)経由でgRPCが使える様になる → gRPC-Web 2. 何らかの手段で、HTTP APIにマッピングする ◦ RPC定義から自動マッピングする → Connect ◦ 自力でマッピングする →gRPC-Gateway
16 3.1 概要 3.Connect ブラウザとgRPC互換のAPIを構築するためのライブラリ群 HTTP/1.1 または HTTP/2 で動作するシンプルな POST
プロトコルをサポート https://connectrpc.com/
17 3.1 概要 3.Connect 各言語のプラグインが用意されており、 Protoベースでコードを生成できる
18 3.1 概要 3.Connect • gRPC, Connect, gRPC-Webの3つのプロトコルをサポート • Webから使用する場合にProxyが不必要
• オリジナルgRPCに比べてコードベースが小さい 詳しくは https://connectrpc.com/docs/introduction/
19 4.1 コード生成 4.Connect-Web スキーマを定義し、各種プラグインを組み合わせることで、リクエストやレスポンスの型やAPI Clientを生 成できる。(ProtoからFE/BE共にコードを自動生成し型安全な開発が可能)
20 4.2 React/Next.jsにおけるデータフェッチ(Client) 4.Connect React等を利用したClientSide fetchの環境では、 API ClientをfethcerとしてTanStack QueryやSWRと組み合わせることで、データのキャッシュも簡単 に行える(公式にTanStack
Queryに対するPluginが開発されている) • Connect WebではAPI Clientの扱いや各種Optionなども詳細にDocumentに記載されている ◦ Ex) API Clientを生成する際は再定義を防ぐために useMemoを使うことが推奨されている
21 4.2 React/Next.jsにおけるデータフェッチ(Client) 4.Connect TanStack Queryの場合: Connect-Query hookを使用することでシンプルに実装可能 (Connect-Query v.1.0までに変更がある可能性あり
) SWRの場合: 生成されたservice名をキーとしてfethcerにAPI Clientをセットする
22 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect RSCの利用を前提としたAppRouter環境ではデータフェッチの戦略が大きく変わった • 標準のfetch APIの利用が前提となっている
23 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect RSCの利用を前提としたAppRouter環境ではデータフェッチの戦略が大きく変わった • 標準のfetch APIの利用が前提となっている • NativeのfetchAPIをサポートしていないサードパティ製の
APIクライアントはAppRouter環境の ServerComponent内で扱いづらくなった ◦ キャッシュと再検証のタイミングの制御が難しい
24 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect RSCの利用を前提としたAppRouter環境ではデータフェッチの戦略が大きく変わった • 標準のfetch APIの利用が前提となっている • NativeのfetchAPIをサポートしていないサードパティ製の
APIクライアントはAppRouter環境の ServerComponent内で扱いづらくなった ◦ キャッシュと再検証のタイミングの制御が難しい ➔ fetch経由でConnect エンドポイントをURLベースのRESTっぽく叩きたい
25 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect fetch を使用しConnect エンドポイントを叩く • methodをPOSTとすることでパスベースのRESTと同じ形式でfetchが可能※ ※nextで拡張されたrevalidate
option等を利用可能 POSTにおける制約を受ける場合がある ▪ fetchリクエストはPOSTメソッドを使用する場合でも自動的にキャッシュされる ▪ RouteHandler内に対して実装した場合はキャッシュされない
26 まとめ • ConnectはgRPCをHTTP APIにマッピングしてくれるライブラリ • 対応言語と主要ライブラリのプラグインが充実しておりお手軽に試せる • AppRouter環境でもRESTfulなAPIとして一応使える •
フロントエンドのスキーマ駆動開発の一つの選択肢としてgRPCもアリかも?