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
フロントエンドエンジニアも知っておきたいgRPC
Search
Kenta Suzuki
April 24, 2018
Programming
19
11k
フロントエンドエンジニアも知っておきたいgRPC
#roppongijs #2 で話しました
Kenta Suzuki
April 24, 2018
Tweet
Share
More Decks by Kenta Suzuki
See All by Kenta Suzuki
レガシーアプリケーションのリニューアルにNuxt.jsで戦う #vuefes_reject
suusan2go
9
20k
rescue されない例外?! / A Exception not rescue #megurorb
suusan2go
0
2.6k
Rails サービスクラス再考 / have a rethink on Rails service class
suusan2go
6
9.6k
Flutterでアプリ作ってる話
suusan2go
2
2.8k
Nuxt.js + TypeScript = Great!
suusan2go
8
41k
ポストRailsとしてのKotlin + Spring Boot #m3kt
suusan2go
4
1.9k
gRPC on Spring Boot
suusan2go
0
2.6k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.4k
Other Decks in Programming
See All in Programming
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Netty Chicago Java User Group 2024-04-17
sullis
0
170
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
670
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Elm 0.19.0 Changes
bkuhlmann
0
490
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
620
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
120
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
810
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
340
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.1k
Featured
See All Featured
Atom: Resistance is Futile
akmur
258
25k
Building Your Own Lightsaber
phodgson
98
5.7k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Designing for humans not robots
tammielis
248
25k
A Philosophy of Restraint
colly
196
16k
Web development in the modern age
philhawksworth
202
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Side Projects
sachag
451
41k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Transcript
フロントエンドエンジニアも知って おきたいgRPC #Roppongi.js 2018/04/24 @suusan2go
自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software
Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • 半分くらいサーバーサイドエンジニア
みなさんAPIどうやって実装・管理してますか • 前回の#roppongi.jsで聞いたときはSwaggerでやってる人多数 • Swagger Editorで記述してくの結構辛いみたいな話を何人も聞いた • 理想のRESTみたいなの作るのも維持していくのも結構たいへん
gRPC
gRPCとは • HTTP/2を使ったRPCフレームワーク • 2015年にGoogleが公開(ちなみにgRPCのgはGoogleではない) • ProtocolBuffersでインターフェースを定義。そこからクライアント / サーバ の実装を生成出来る
• メルカリさんや、サイバーエージェントさんで事例
Protocol Buffers
gRPCのサーバ(Go Server)
gRPCのクライアント(Node Client)
gRPCの利点 • メソッド名、リクエスト、レスポンスの型だけ決めれば良い ◦ URL、パラメータの渡し方、メソッドどうする?で悩まなくていい • 異なる言語、サーバ間でもType Safeにやり取りできる ◦ Go
/ JS / Java / Ruby / C ++ / Python / Node … https://grpc.io/docs/ • ブラウザでは動かないけどな!
gRPC-Web
• gRPCのクライアントをブラウザで動かせる! • HTTP/*で動く • ブラウザの制限によりgRPCの一部の機能はまだ使えない bidirectional streamingとか https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md gRPC-Web
gRPC-WEBの実装
gRPC-WEBの実装 • improbable社?がgRPCをWEBで使うために 実装した。この実装が本家にも FB。 • TypeScript Generator ◦ (protoファイルからTypeScriptファイル
を作成) • gRPC-Web Client ◦ (Web用のgRPCクライアント実装) • grpcwebproxy ◦ (バックエンドのgRPCの前段に配置) • grpcweb ◦ (Go向けのgRPCサーバwrapper)
gRPC-WEBの実装 • 長らくearly acessということでprivateだった が、2018年の3月頃に再びpublicに? • gRPC公式のWEB実装 • 現在はβリリース! 今日話すのはこっちの話!
(現状の)公式gRPC-Webの構成 • nginxによるproxy ◦ これによりブラウザからのリクエストをgRPCのリクエストに変換して gRPCサーバに送る ◦ 先日envoyというプロキシもgRPC-Webをサポートした • Browserで動作できるJSクライアントを生成するためのモジュール
◦ 最終的にClosure CompilerでJSにコンパイルする
(現状の)公式gRPC-Webの構成 gRPC Server HTTP/* HTTP/2 gRPC-Web gRPC ※独自モジュールを追加 grpc_gateway_module.c
gRPC-Webを使ったアプリケーション • 公式のrepositoryにDockerのサンプルが用意されている • めちゃくちゃ色々ビルドが走るので、ローカル環境で動かすのはなかなか 大変そう ◦ nginxのビルド ◦ protocol
buffersからgRPCコードの生成 C++ / JavaScript ◦ Closure Compilerでのコンパイル ◦ TODO Listくらい作ってやろうと思ってましたがdocker buildが途中で 固まってサンプル動かす所で終わってしまった
None
None
None
今後のgRPC-Webのロードマップ • gRPCで得られるメリットをそのままブラウザにも持ち込める ◦ JSが動かせればよいので、例えばReact Nativeとかでも使えるはず • 現状は素のJSしか生成してくれないのでTypeSafeではないが、 TypeScript supportはWork
In Progress ◦ https://github.com/grpc/grpc-web/blob/master/ROADMAP.md
• binary protobuf encodingなので、Chrome Developer Toolsで確認する のはちょっとしんどい ◦ Non-binary message
encodingがWork In Progress ◦ 上記の解決というよりはパフォーマンスに課題感を感じているらしい ◦ gmailなんかではJSON LIKEなフォーマットが使われているらしい (JSON likeとは・・・) 今後のgRPC-Webのロードマップ
• Proxy層(nginx / envoy)を挟むのがちょっと… ◦ Local Proxyを検討中らしい。要はgRPCのサーバに直接組み込める gRPC-Web用のProxy。nginxなどを立てる必要がなくなる。 • React
/ Vue / Angular でどう使えばいいの? ◦ This is to provide first-class support for gRPC API and gRPC-Web in popular Web frameworks such as Angular. とのこと ◦ メジャーどころは何かしらサポートがありそう 今後のgRPC-Webのロードマップ
ロードマップが全て達成されると… .proto ファイル gRPC Server Local Proxy gRPC Server Local
Proxy HTTP/* HTTP/* HTTP/*
RESTと同じインフラでgRPCが使える! .proto ファイル gRPC Server Local Proxy gRPC Server Local
Proxy HTTP/* HTTP/* HTTP/*
gRPC-Web はオススメ? • TypeScript Support / Non-binary message encoding が実装されたら、か
なりTypeSafeなフロントエンドの開発が実現できそうなので、 結構自分は 期待している • nginxのgRPCサポートなど、周辺のツールやミドルウェアも揃ってきてる印 象ある。Local Proxyが実装されると、REST APIと同じインフラでもgRPCの 恩恵が得られそう!
まとめ • 現状の grpc/grpc-web はβとは言っているものの、なかなかこれでプロダ クト開発していくのはしんどそう • improbable-eng/grpc-web に既に実アプリで使えるツール群が揃ってい るので、プロダクションで使うならまだこちらがオススメという所感です
• 公式?のgrpc-webは The current release is a Beta release, mainly for early adopters to provide feedback on the JS API. とのことなので、みなさん使っ てフィードバックしましょう!
ありがとうございました