"gRPC-Web: It’s All About Communication": Devoxx Ukraine 2019
•
1 like•1,128 views
This document summarizes a presentation about gRPC-Web given by Alex Borysov and Yevgen Golubenko. The presentation introduces gRPC-Web as a way to enable gRPC communication between web clients and backend services. It demonstrates how to generate gRPC-Web code from protocol buffer definitions, use an Envoy proxy to handle communication over HTTP/1.x, and implement server-side streaming of responses. The presentation also discusses API design with gRPC, tooling for testing and debugging gRPC services, and error handling in gRPC.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to "gRPC-Web: It’s All About Communication": Devoxx Ukraine 2019
Similar to "gRPC-Web: It’s All About Communication": Devoxx Ukraine 2019 (20)
More from Alex Borysov
More from Alex Borysov (6)
Recently uploaded
Recently uploaded (20)
"gRPC-Web: It’s All About Communication": Devoxx Ukraine 2019
- 1. gRPC-Web: It’s All About Communication DEVOXX UKRAINE NOVEMBER 2, 2019 Alex BORYSOV Yevgen GOLUBENKO
- 2. @aiborisov @HalloGene_ Images contained in this presentation are the property of Netflix Inc. and cannot be reused
- 16. const method = 'POST'; const headers = { 'Content-Type': 'application/json' }; const playerId = 'Traktorist'; const score = 300; const data = { playerId, score }; const body = JSON.stringify(data); fetch('http://nativegoo.se/setScore', {method, headers, body}) .then(response => response.json()); @aiborisov @HalloGene_ HANDMADE JSON?
- 17. “DOCS ARE UP TO DATE” THEY SAID @aiborisov @HalloGene_
- 26. @aiborisov @HalloGene_ API DEFINITIONS syntax = "proto3"; service FixtureService { // Return next line of geese and clouds rpc GetFixture (GetFixtureRequest) returns (FixtureResponse); } service LeaderboardService { // Returns current top scores rpc GetTopScores (TopScoresRequest) returns (TopScoresResponse); // Updates a single player's score rpc UpdateScore (UpdateScoreRequest) returns (UpdateScoreResponse); }
- 27. @aiborisov @HalloGene_ API DEFINITIONS syntax = "proto3"; service FixtureService { // Return next line of geese and clouds rpc GetFixture (GetFixtureRequest) returns (FixtureResponse); } service LeaderboardService { // Returns current top scores rpc GetTopScores (TopScoresRequest) returns (TopScoresResponse); // Updates a single player's score rpc UpdateScore (UpdateScoreRequest) returns (UpdateScoreResponse); }
- 28. @aiborisov @HalloGene_ API DEFINITIONS syntax = "proto3"; service FixtureService { // Return next line of geese and clouds rpc GetFixture (GetFixtureRequest) returns (FixtureResponse); } service LeaderboardService { // Returns current top scores rpc GetTopScores (TopScoresRequest) returns (TopScoresResponse); // Updates a single player's score rpc UpdateScore (UpdateScoreRequest) returns (UpdateScoreResponse); }
- 29. APIs code reviews Language-neutral contract @aiborisov @HalloGene_ PROTO API FIRST
- 30. APIs code reviews Language-neutral contract APIs DON’T LIE @aiborisov @HalloGene_ PROTO API FIRST
- 32. @aiborisov @HalloGene_ ● Java ● Go ● C/C++ ● C# ● Node.js ● PHP ● Ruby ● Python ● Dart ● Objective-C gRPC SPEAKS YOUR LANGUAGE
- 33. @aiborisov @HalloGene_ ● Linux ● MacOS ● Windows ● Android ● iOS ● Web gRPC CODE GEN
- 34. @aiborisov @HalloGene_ ● Linux ● MacOS ● Windows ● Android ● iOS ● Web gRPC CODE GEN
- 36. @aiborisov @HalloGene_ gRPC-WEB CODE GEN $ protoc -I=$DIR gateway.proto --js_out=import_style=commonjs:$OUT_DIR --grpc-web_out=import_style=commonjs, mode=grpcwebtext:$OUT_DIR
- 37. @aiborisov @HalloGene_ gRPC-WEB CODE GEN $ protoc -I=$DIR gateway.proto --js_out=import_style=commonjs:$OUT_DIR --grpc-web_out=import_style=commonjs, mode=grpcwebtext:$OUT_DIR
- 38. @aiborisov @HalloGene_ gRPC-WEB CODE GEN $ protoc -I=$DIR gateway.proto --js_out=import_style=commonjs:$OUT_DIR --grpc-web_out=import_style=commonjs, mode=grpcwebtext:$OUT_DIR
- 39. @aiborisov @HalloGene_ gRPC-WEB CODE GEN $ protoc -I=$DIR gateway.proto --js_out=import_style=commonjs:$OUT_DIR --grpc-web_out=import_style=commonjs, mode=grpcwebtext:$OUT_DIR Supported import styles: closure, commonjs, commonjs+dts, typescript
- 42. @aiborisov @HalloGene_ https://github.com/grpc/grpc/blob/ master/doc/PROTOCOL-HTTP2.md Requests / Responses HTTP/2 Transport Mapping Connection Management Security Error Handling gRPC over HTTP/2
- 45. @aiborisov @HalloGene_ WE NEED A GATE!
- 46. @aiborisov @HalloGene_ gRPC-Web Spec https://github.com/grpc/grpc/blob/ master/doc/PROTOCOL-WEB.md Support any HTTP/* Support web-specific features Can became optional with WHATWG Streams Standard (future) WE NEED A GATE!
- 47. @aiborisov @HalloGene_ GATEWAY gRPC Web Stub gRPC Service GATEWAY.PROTO gRPC-Web HTTP/2HTTP/1* PROXY
- 48. @aiborisov @HalloGene_ GATEWAY gRPC Web Stub gRPC Service GATEWAY.PROTO gRPC-Web HTTP/2HTTP/1* PROXY
- 49. @aiborisov @HalloGene_ ENVOY CONFIG (envoy.yaml) static_resources: listeners: filter_chains: - filters: - name: envoy.http_connection_manager config: route_config: virtual_hosts: - name: local_service cors: allow_origin: - "*" allow_methods: GET, PUT, DELETE, POST, OPTIONS allow_headers: … , x-grpc-web, grpc-timeout, x-accept-response-streaming expose_headers: grpc-status,grpc-message,custom-header-1 http_filters: - name: envoy.grpc_web - name: envoy.cors - name: envoy.router
- 50. @aiborisov @HalloGene_ ENVOY CONFIG (envoy.yaml) cors: allow_origin: - "*" allow_methods: GET, PUT, DELETE, POST, OPTIONS allow_headers: … , x-grpc-web, grpc-timeout, x-accept-response-streaming expose_headers: grpc-status,grpc-message,custom-header-1 http_filters: - name: envoy.grpc_web - name: envoy.cors - name: envoy.router
- 51. @aiborisov @HalloGene_ ENVOY CONFIG (envoy.yaml) cors: allow_origin: - "*" allow_methods: GET, PUT, DELETE, POST, OPTIONS allow_headers: … , x-grpc-web, grpc-timeout, x-accept-response-streaming expose_headers: grpc-status,grpc-message,custom-header-1 http_filters: - name: envoy.grpc_web - name: envoy.cors - name: envoy.router
- 52. @aiborisov @HalloGene_ ENVOY CONFIG (envoy.yaml) cors: allow_origin: - "*" allow_methods: GET, PUT, DELETE, POST, OPTIONS allow_headers: … , x-grpc-web, grpc-timeout, x-accept-response-streaming expose_headers: grpc-status,grpc-message,custom-header-1 http_filters: - name: envoy.grpc_web - name: envoy.cors - name: envoy.router
- 53. @aiborisov @HalloGene_ ENVOY PROXY Fault Tolerance Service Discovery Load Balancing Health Checking
- 59. TOOLS: GRPCURL @aiborisov @HalloGene_ $ brew install grpcurl $grpcurl $GATEWAY:8080 gateway.LeaderboardService/ GetTopScores
- 61. CLI tools GUI tools Testing tools and more @aiborisov @HalloGene_ gRPC ECOSYSTEM
- 62. API CHANGES @aiborisov @HalloGene_ message FixtureLine { repeated GooseLocator geese = 1; repeated CloudLocator clouds = 2; }
- 63. API CHANGES @aiborisov @HalloGene_ message FixtureLine { repeated GooseLocator geese = 1; repeated CloudLocator clouds = 2; } message GooseLocator { int32 goose_position = 1; }
- 64. API CHANGES @aiborisov @HalloGene_ message FixtureLine { repeated GooseLocator geese = 1; repeated CloudLocator clouds = 2; } message GooseLocator { int32 goose_position = 1; + GooseType goose_type = 2; }
- 65. API CHANGES: SAFELY ADD/REMOVE FIELDS @aiborisov @HalloGene_
- 67. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API syntax = "proto3"; service ServerReflection { rpc ListApis (ListApisRequest) returns (ListApisResponse); rpc GetMethod (GetMethodRequest) returns (GetMethodResponse); }
- 68. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API val grpcServer = ServerBuilder.forPort(SERVER_PORT) .addService(fixtureService) .addService(leaderboardService) .addService(ProtoReflectionService.newInstance()) .build();
- 69. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API val grpcServer = ServerBuilder.forPort(SERVER_PORT) .addService(fixtureService) .addService(leaderboardService) .addService(ProtoReflectionService.newInstance()) .build();
- 70. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API $ grpcurl -plaintext $GATEWAY:8080 list game.FixtureService game.LeaderboardService grpc.reflection.v1alpha.ServerReflection
- 71. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API $ grpcurl -plaintext $GATEWAY:8080 describe game.FixtureService game.FixtureService is a service: service FixtureService { rpc GetFixture ( .game.GetFixtureRequest ) returns ( .game.FixtureResponse ); }
- 72. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API $ grpcurl -plaintext $GATEWAY:8080 describe game.FixtureResponse game.FixtureResponse is a message: message FixtureResponse { repeated .game.FixtureLine lines = 1; }
- 73. @aiborisov @HalloGene_ gRPC TIMEOUT generatePlayerId = () => { const request = new GeneratePlayerIdRequest(); const metadata = {}; return playerIdServicePromiseClient.generatePlayerId(request, metadata); }
- 74. @aiborisov @HalloGene_ gRPC DEADLINE generatePlayerId = () => { const request = new GeneratePlayerIdRequest(); const deadline = (new Date()).getTime() + timeoutInMillis; const metadata = { deadline }; return playerIdServicePromiseClient.generatePlayerId(request, metadata); }
- 81. Canonical gRPC Status Codes Deadline Support Deadline Propagation @aiborisov @HalloGene_ gRPC ERROR CODES
- 83. @aiborisov @HalloGene_ One request, one response Requests can be redundant Polling interval? API: UNARY
- 84. @aiborisov @HalloGene_ One request, multiple responses Real-time updates gRPC-Web: supports server-side streaming API: STREAMING
- 85. @aiborisov @HalloGene_ gRPC-WEB STREAMING syntax = "proto3"; service LeaderboardService { // Returns current top scores rpc GetTopScores (TopScoresRequest) returns (TopScoresResponse); // Updates a single player's score rpc UpdateScore (UpdateScoreRequest) returns (UpdateScoreResponse); }
- 86. @aiborisov @HalloGene_ gRPC-WEB STREAMING syntax = "proto3"; service LeaderboardService { // Returns current top scores rpc GetTopScores (TopScoresRequest) returns (TopScoresResponse); // Subscribes to top scores updates rpc StreamTopScores (TopScoresRequest) returns (stream TopScoresResponse); // Updates a single player's score rpc UpdateScore (UpdateScoreRequest) returns (UpdateScoreResponse); }
- 89. @aiborisov @HalloGene_ gRPC-WEB THINGS Canonical proto APIs No more handcrafted JSONs Canonical status codes Server streaming Well-defined domain methods
- 90. SPECIAL THANKS: MYKYTA PROTSENKO @aiborisov @HalloGene_
- 91. SPECIAL THANKS: THE STRANGER THINGS CREW @aiborisov @HalloGene_