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-cat
October 17, 2023
Technology
4
2.4k
gRPCとフロントエンド_Connectを添えて
sugar-cat
October 17, 2023
Tweet
Share
More Decks by sugar-cat
See All by sugar-cat
ErrorTrackingとOrchestrion
sugarcat7
0
280
DiscordとCloudflare
sugarcat7
1
320
Cloudflare Workflowsを使いたい倒したい
sugarcat7
6
1.6k
tslogで実現するセキュアなメタデータ管理とロギング
sugarcat7
4
1.4k
最近個人開発が熱い ~モニタリング強化編v0.1.0~
sugarcat7
3
440
Honoで実現するバックエンド開発のイマ
sugarcat7
23
5.6k
GoとWASI~超入門~
sugarcat7
2
250
最近個人開発が熱い ~多言語対応編~
sugarcat7
2
340
ボイラープレート自動生成ツールを使わなくなった話.pdf
sugarcat7
4
670
Other Decks in Technology
See All in Technology
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
580
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
270
モダンフロントエンド 開発研修
recruitengineers
PRO
2
310
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.3k
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
1
180
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
320
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
株式会社ARAV 採用案内
maqui
0
340
Featured
See All Featured
KATA
mclloyd
32
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Done Done
chrislema
185
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Practical Orchestrator
shlominoach
190
11k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Navigating Team Friction
lara
189
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Invisible Side of Design
smashingmag
301
51k
Code Reviewing Like a Champion
maltzj
525
40k
Speed Design
sergeychernyshev
32
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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もアリかも?