connect-webの恩恵

11月24日に開催された「Wantedly x Qiita Meetup #1 フロントエンドのあれこれ」のLT枠登壇資料になります！

Transcript

1. connect-webを使った開発の恩恵🤝
2. 【所属】株式会社サイバー・バズ 【氏名】宮野 奎太朗(みやの けいたろう) 【経歴】 2016年〜 浅草のお寿司屋さんで板前修行🍣 2018年〜 大学入学 2020年〜 マレーシアでコードを書く日々 2021年〜 自転車で日本一周🚲 2022年〜 サイバー・バズ入社 自己紹介 2
3. はじめに 3 1. connect-webの概要と通信方式 2. 導入したプロダクトでの活用例 3. メリットについて(http通信との違い) 4. 導入時につまづいたポイント 5. まとめ 6. 質疑応答
4. connect-webの概要 4 まずはざっくり3行で解説！ ・ブラウザで利用可能なgRPC互換のHTTP通信ライブラリ ・Protocol Buffersを使ったインターフェースの定義をして使う ・サービスごとのリクエスト・レスポンスの型生成が可能
5. connect-webの概要 5 gRPCはHTTP/2の仕様に則った形で 4種類の通信方式を用意しています。
6. connect-webの概要 6 4種類の通信方式の特徴
7. Unary RPC 7 クライアント サーバー リクエスト レスポンス TCP Connection
8. Unary RPC 8 クライアント サーバー リクエスト レスポンス TCP Connection よく見る「1リクエスト1レスポンス」の形式
9. Server streaming RPC 9 クライアント サーバー TCP Connection レスポンス レスポンス リクエスト
10. Server streaming RPC 10 クライアント サーバー TCP Connection レスポンス レスポンス リクエスト 【メリット】サーバーの負担⤵ 初期表示スピード⤴
11. Client streaming RPC 11 クライアント サーバー TCP Connection レスポンス リクエスト リクエスト
12. Client streaming RPC 12 クライアント サーバー TCP Connection レスポンス リクエスト リクエスト 容量の大きなデータを分割してリクエス
13. Bidirectional streaming RPC 13 クライアント サーバー TCP Connection レスポンス リクエスト リクエスト レスポンス
14. Bidirectional streaming RPC 14 クライアント サーバー TCP Connection レスポンス リクエスト リクエスト レスポンス WebSocketのような双方向通信が可能
15. 導入したプロダクトでの活用例 15 フロント側→Next.js(connect-web) サーバー側→Go(connect-go)
16. 導入したプロダクトでの活用例 16 Cytoscape.jsでのグラフ構築 →Server streaming RPCを使用
17. 導入したプロダクトでの活用例 17 1.protoファイル定義
18. 導入したプロダクトでの活用例 18 2.Makefileに定義した内容を実
19. 導入したプロダクトでの活用例 19 3.protoファイルをもとに型ファイルを クライアント&サーバーに生成
20. 導入時につまづいたポイント 20 ドキュメント→target=tsからtarget=js+dtsにする！ (おまじない的なものとして覚えて帰ってください🙆)
21. まとめ 21 connectを利用したスキーマ駆動の開発体験は良かったです 🙆 ぜひ今後の選択肢の一つとして覚えてください！
22. 22 弊社カジュアル面談お待ちしております🙇 DMでもお気軽にご連絡ください！ カジュアル 面談調整URL
23. 23 弊社カジュアル面談お待ちしております🙇 DMでもお気軽にご連絡ください！ Xアカウント (@38ke1)