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
46
全部お見せします!現役エンジニアが開発現場で実際に使っているツールと便利設定集
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
PRレビューのお供にDanger
stoticdev
1
250
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
840
読まないコードリーディング術
hisaju
1
140
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
150
Duke on CRaC with Jakarta EE
ivargrimstad
0
350
Jasprが凄い話
hyshu
0
200
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
770
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
370
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
270
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
430
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
240
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
800
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Six Lessons from altMBA
skipperchong
27
3.6k
The Cost Of JavaScript in 2023
addyosmani
47
7.5k
Building Your Own Lightsaber
phodgson
104
6.3k
Facilitating Awesome Meetings
lara
53
6.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Producing Creativity
orderedlist
PRO
344
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Ace a Technical Interview
jacobian
276
23k
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)