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
connect-webの恩恵
Search
Keitaro Miyano
November 24, 2023
Programming
0
61
connect-webの恩恵
11月24日に開催された「Wantedly x Qiita Meetup #1 フロントエンドのあれこれ」のLT枠登壇資料になります!
Keitaro Miyano
November 24, 2023
Tweet
Share
More Decks by Keitaro Miyano
See All by Keitaro Miyano
【初学者向け】Honoを使ったREST APIを構築してみよう!
miyakei1225
0
68
React勉強会
miyakei1225
0
150
初学者歓迎!Go言語でWebサーバー構築ハンズオン!
miyakei1225
0
16
お手軽環境構築!はじめてのDocker講座
miyakei1225
0
270
Expo SDK 50について&早速アップデートしてみた
miyakei1225
0
76
Webエンジニアが スマホアプリを個人開発した話📱
miyakei1225
0
41
Other Decks in Programming
See All in Programming
Namespace on read
tagomoris
2
370
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
小さな開発会社を作った理由
polidog
0
1.9k
Temporalを取り巻く仕様を整理する
sajikix
0
120
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Done Done
chrislema
179
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
The Pragmatic Product Professional
lauravandoore
29
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Code Review Best Practice
trishagee
58
16k
Become a Pro
speakerdeck
PRO
15
4.8k
In The Pink: A Labor of Love
frogandcode
139
22k
GitHub's CSS Performance
jonrohan
1026
450k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Transcript
connect-webを使った開発の恩恵🤝
【所属】株式会社サイバー・バズ 【氏名】宮野 奎太朗(みやの けいたろう) 【経歴】 2016年〜 浅草のお寿司屋さんで板前修行🍣 2018年〜 大学入学 2020年〜
マレーシアでコードを書く日々 2021年〜 自転車で日本一周🚲 2022年〜 サイバー・バズ入社 自己紹介 2
はじめに 3 1. connect-webの概要と通信方式 2. 導入したプロダクトでの活用例 3. メリットについて(http通信との違い) 4. 導入時につまづいたポイント
5. まとめ 6. 質疑応答
connect-webの概要 4 まずはざっくり3行で解説! ・ブラウザで利用可能なgRPC互換のHTTP通信ライブラリ ・Protocol Buffersを使ったインターフェースの定義をして使う ・サービスごとのリクエスト・レスポンスの型生成が可能
connect-webの概要 5 gRPCはHTTP/2の仕様に則った形で 4種類の通信方式を用意しています。
connect-webの概要 6 4種類の通信方式の特徴
Unary RPC 7 クライアント サーバー リクエスト レスポンス TCP Connection
Unary RPC 8 クライアント サーバー リクエスト レスポンス TCP Connection よく見る「1リクエスト1レスポンス」の形式
Server streaming RPC 9 クライアント サーバー TCP Connection レスポンス レスポンス
リクエスト
Server streaming RPC 10 クライアント サーバー TCP Connection レスポンス レスポンス
リクエスト 【メリット】サーバーの負担⤵ 初期表示スピード⤴
Client streaming RPC 11 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト
Client streaming RPC 12 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト 容量の大きなデータを分割してリクエス
Bidirectional streaming RPC 13 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト レスポンス
Bidirectional streaming RPC 14 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト レスポンス WebSocketのような双方向通信が可能
導入したプロダクトでの活用例 15 フロント側→Next.js(connect-web) サーバー側→Go(connect-go)
導入したプロダクトでの活用例 16 Cytoscape.jsでのグラフ構築 →Server streaming RPCを使用
導入したプロダクトでの活用例 17 1.protoファイル定義
導入したプロダクトでの活用例 18 2.Makefileに定義した内容を実
導入したプロダクトでの活用例 19 3.protoファイルをもとに型ファイルを クライアント&サーバーに生成
導入時につまづいたポイント 20 ドキュメント→target=tsからtarget=js+dtsにする! (おまじない的なものとして覚えて帰ってください🙆)
まとめ 21 connectを利用したスキーマ駆動の開発体験は良かったです 🙆 ぜひ今後の選択肢の一つとして覚えてください!
22 弊社カジュアル面談お待ちしております🙇 DMでもお気軽にご連絡ください! カジュアル 面談調整URL
23 弊社カジュアル面談お待ちしております🙇 DMでもお気軽にご連絡ください! Xアカウント (@38ke1)