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
120
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
Amebaブログにおけるbobの活用術
miyakei1225
0
3
React × Tailwind × v0で始める コンポーネント開発をしてみよう!
miyakei1225
0
75
全部お見せします!現役エンジニアが開発現場で実際に使っているツールと便利設定集
miyakei1225
0
36
【初学者向け】Honoを使ったREST APIを構築してみよう!
miyakei1225
0
320
React勉強会
miyakei1225
0
260
初学者歓迎!Go言語でWebサーバー構築ハンズオン!
miyakei1225
0
36
お手軽環境構築!はじめてのDocker講座
miyakei1225
1
390
Expo SDK 50について&早速アップデートしてみた
miyakei1225
0
100
Webエンジニアが スマホアプリを個人開発した話📱
miyakei1225
0
61
Other Decks in Programming
See All in Programming
CSC509 Lecture 04
javiergs
PRO
0
300
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.6k
株式会社 Sun terras カンパニーデック
sunterras
0
320
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
140
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
400
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.7k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
190
Serena MCPのすすめ
wadakatu
4
1k
What's new in Spring Modulith?
olivergierke
1
150
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Producing Creativity
orderedlist
PRO
347
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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)