Slides of our Devoxx Ukraine 2019 "gRPC-Web: It’s All About Communication" talk

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

3. Yevgen
GOLUBENKO
Anomali
@HalloGene_
@aiborisov
@HalloGene_

4. Alex
BORYSOV
Netflix
@aiborisov
@aiborisov
@HalloGene_

5. YOU?
@aiborisov
@HalloGene_

6. YOU?
@aiborisov
@HalloGene_

7. @aiborisov
@HalloGene_
gRPC BEFORE gRPC-WEB

8. @aiborisov
@HalloGene_
FRONTEND
THINGS

9. DEMO
@aiborisov
@HalloGene_

10. DEMOGORGON
@aiborisov
@HalloGene_

11. @aiborisov
@HalloGene_
DEMO ARCHITECTURE
API
GATEWAY

12. @aiborisov
@HalloGene_
DEMO ARCHITECTURE
FIXTURES
API
GATEWAY

13. @aiborisov
@HalloGene_
DEMO ARCHITECTURE
FIXTURES
TOPSCORES
API
GATEWAY

14. @aiborisov
@HalloGene_
DEMO ARCHITECTURE
FIXTURES
TOPSCORES
UPDATE SCORE
API
GATEWAY

15. @aiborisov
@HalloGene_
DEMO ARCHITECTURE
FIXTURES
TOPSCORES
UPDATE SCORE
API
GATEWAY

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_

18. HOW ABOUT IDL?
@aiborisov
@HalloGene_

19. @aiborisov
@HalloGene_
API FIRST
GATEWAY

20. @aiborisov
@HalloGene_
GATEWAY
GATEWAY.PROTO
API FIRST

21. @aiborisov
@HalloGene_
GATEWAY
gRPC
Stub
gRPC
Service
GATEWAY.PROTO
API FIRST

22. @aiborisov
@HalloGene_
GATEWAY
gRPC
Stub
gRPC
Service
GATEWAY.PROTO
API FIRST

23. @aiborisov
@HalloGene_
GATEWAY
gRPC
Stub
gRPC
Service
GATEWAY.PROTO
API FIRST

24. @aiborisov
@HalloGene_
API CODE REVIEW

25. @aiborisov
@HalloGene_
API CODE REVIEW

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

31. @aiborisov
@HalloGene_
GATEWAY
gRPC
Stub
gRPC
Service
GATEWAY.PROTO
gRPC CODE GEN

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

35. @aiborisov
@HalloGene_
gRPC INTEROP
Java
Service
Python
Service
GoLang
Service
C++
Service
gRPC
Service
gRPC
Stub
gRPC
Stub
gRPC
Stub
gRPC
Service
gRPC
Service
gRPC
Service
gRPC
Stub
gRPC-
Web
Stub

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

40. @aiborisov
@HalloGene_

41. @aiborisov
@HalloGene_

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

43. @aiborisov
@HalloGene_
GATEWAY
gRPC
Web
Stub
gRPC
Service
GATEWAY.PROTO
gRPC-Web
HTTP/2

44. @aiborisov
@HalloGene_
GATEWAY
gRPC
Web
Stub
gRPC
Service
GATEWAY.PROTO
gRPC-Web
HTTP/2HTTP/1*

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

54. gRPC
Service
gRPC
Stub
@aiborisov
@HalloGene_
gRPC over HTTP/*
gRPC
Service
gRPC
Stub
gRPC-
Web
Stub
HTTP/2
HTTP/2
HTTP/2
HTTP/1.1

55. DEMOGORGON
@aiborisov
@HalloGene_

56. TOOLS
@aiborisov
@HalloGene_

57. TOOLS: CLI
@aiborisov
@HalloGene_
grpc_cli
grpcurl
polyglot
grpcc
gcall
Evans

58. TOOLS: CLI
@aiborisov
@HalloGene_
grpc_cli
grpcurl
polyglot
grpcc
gcall
Evans

59. TOOLS: GRPCURL
@aiborisov
@HalloGene_
$ brew install grpcurl
$grpcurl $GATEWAY:8080
gateway.LeaderboardService/
GetTopScores

60. TOOLS: GUI
@aiborisov
@HalloGene_
gRPCox
gRPC-Swagger
BloomRPC
grpcui
letmegrpc
MuninRPC

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_

66. UNCOVER THE TRUTH
@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);
}

75. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
deadline
500ms
gRPC
Service

76. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
deadline
500ms
gRPC
Service

77. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
deadline
500ms
200ms
spent
gRPC
Service

78. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
deadline
500ms
deadline
300ms
200ms
spent
gRPC
Service

79. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
deadline
500ms
deadline
300ms
200ms
spent
gRPC
Service

80. deadline
300ms
gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
deadline
500ms
timeout ?
gRPC
Service

81. Canonical gRPC Status Codes
Deadline Support
Deadline Propagation
@aiborisov
@HalloGene_
gRPC ERROR CODES

82. @aiborisov
@HalloGene_
API

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);
}

87. DEMO: UA.GRPCWEB.COM
@aiborisov
@HalloGene_

88. @aiborisov
@HalloGene_
gRPC: grpc.io
https://github.com
/grpc/grpc-web
/grpc-ecosystem/awesome-grpc
/break-me-if-you-can/services/ui
http://slides-ua.grpcweb.com
http://jobs.grpcweb.com
LEARN MORE

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_

92. SPECIAL THANKS: YOU
@aiborisov
@HalloGene_