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.3k
gRPCとフロントエンド_Connectを添えて
sugar-cat
October 17, 2023
Tweet
Share
More Decks by sugar-cat
See All by sugar-cat
ErrorTrackingとOrchestrion
sugarcat7
0
270
DiscordとCloudflare
sugarcat7
1
290
Cloudflare Workflowsを使いたい倒したい
sugarcat7
6
1.6k
tslogで実現するセキュアなメタデータ管理とロギング
sugarcat7
4
1.3k
最近個人開発が熱い ~モニタリング強化編v0.1.0~
sugarcat7
3
420
Honoで実現するバックエンド開発のイマ
sugarcat7
23
5.5k
GoとWASI~超入門~
sugarcat7
2
240
最近個人開発が熱い ~多言語対応編~
sugarcat7
2
330
ボイラープレート自動生成ツールを使わなくなった話.pdf
sugarcat7
4
650
Other Decks in Technology
See All in Technology
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
無理しない AI 活用サービス / #jazug
koudaiii
0
100
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Statistics for Hackers
jakevdp
799
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
BBQ
matthewcrist
89
9.7k
RailsConf 2023
tenderlove
30
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Visualization
eitanlees
146
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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もアリかも?