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
98
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
React × Tailwind × v0で始める コンポーネント開発をしてみよう!
miyakei1225
0
45
全部お見せします!現役エンジニアが開発現場で実際に使っているツールと便利設定集
miyakei1225
0
29
【初学者向け】Honoを使ったREST APIを構築してみよう!
miyakei1225
0
240
React勉強会
miyakei1225
0
220
初学者歓迎!Go言語でWebサーバー構築ハンズオン!
miyakei1225
0
29
お手軽環境構築!はじめてのDocker講座
miyakei1225
0
300
Expo SDK 50について&早速アップデートしてみた
miyakei1225
0
97
Webエンジニアが スマホアプリを個人開発した話📱
miyakei1225
0
54
Other Decks in Programming
See All in Programming
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
2
680
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
270
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
210
Jakarta EE meets AI
ivargrimstad
0
750
iOSでQRコード生成奮闘記
ktcryomm
2
140
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
170
バイセルでの AI を用いた開発の取り組み ~ Devin, Cursor の活用事例・知見共有 ~
umaidashi
0
110
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
250
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
2k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
1.9k
Scaling GitHub
holman
459
140k
BBQ
matthewcrist
87
9.5k
Thoughts on Productivity
jonyablonski
69
4.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Language of Interfaces
destraynor
156
24k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Music & Morning Musume
bryan
46
6.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Pragmatic Product Professional
lauravandoore
32
6.4k
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)