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

1. gRPC-Web:
It’s All About Communication
DEVOXX, NOVEMBER 7, 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. @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_
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

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

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

43. @aiborisov
@HalloGene_
WE NEED A GATE!

44. @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!

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

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

47. @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

48. @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

49. @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

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 PROXY
Fault
Tolerance
Service
Discovery
Load
Balancing
Health
Checking

52. gRPC
Service
gRPC
Stub
@aiborisov
@HalloGene_
gRPC over HTTP/*
gRPC
Service
gRPC
Stub
gRPC-
Web
Stub

53. DEMOGORGON
@aiborisov
@HalloGene_

54. TOOLS
@aiborisov
@HalloGene_

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

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

57. TOOLS: GRPCURL
@aiborisov
@HalloGene_

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

59. CLI tools
GUI tools
Testing tools and more
@aiborisov
@HalloGene_
gRPC ECOSYSTEM

60. API CHANGES
@aiborisov
@HalloGene_
message
repeated
repeated

61. API CHANGES
@aiborisov
@HalloGene_
message
repeated
repeated
message
int32

62. API CHANGES
@aiborisov
@HalloGene_
message
repeated
repeated
message
int32
+ GooseType goose_type = 2;

63. API CHANGES: SAFELY ADD/REMOVE FIELDS
@aiborisov
@HalloGene_

64. UNCOVER THE TRUTH
@aiborisov
@HalloGene_

65. @aiborisov
@HalloGene_
UNCOVER THE TRUTH: SERVER REFLECTION API
syntax = "proto3";
service ServerReflection {
rpc ListApis (ListApisRequest) returns (ListApisResponse);
rpc GetMethod (GetMethodRequest)
returns (GetMethodResponse);
}

66. @aiborisov
@HalloGene_
UNCOVER THE TRUTH: SERVER REFLECTION API
val grpcServer = ServerBuilder.forPort(SERVER_PORT)
.addService(fixtureService)
.addService(leaderboardService)
.addService(ProtoReflectionService.newInstance())
.build();

67. @aiborisov
@HalloGene_
UNCOVER THE TRUTH: SERVER REFLECTION API
val grpcServer = ServerBuilder.forPort(SERVER_PORT)
.addService(fixtureService)
.addService(leaderboardService)
.addService(ProtoReflectionService.newInstance())
.build();

68. @aiborisov
@HalloGene_
UNCOVER THE TRUTH: SERVER REFLECTION API
$ grpcurl -plaintext $GATEWAY:8080 list
game.FixtureService
game.LeaderboardService
grpc.reflection.v1alpha.ServerReflection

69. @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 );
}

70. @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;
}

71. @aiborisov
@HalloGene_
gRPC TIMEOUT
generatePlayerId = () => {
const request = new GeneratePlayerIdRequest();
const metadata = {};
return playerIdServicePromiseClient.generatePlayerId(request, metadata);
}

72. @aiborisov
@HalloGene_
gRPC DEADLINE
generatePlayerId = () => {
const request = new GeneratePlayerIdRequest();
const deadline = (new Date()).getTime() + timeoutInMillis;
const metadata = { deadline };
return playerIdServicePromiseClient.generatePlayerId(request, metadata);
}

73. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
gRPC
Service

74. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
gRPC
Service

75. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
gRPC
Service

76. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
gRPC
Service

77. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
gRPC
Service

78. gRPC
Service
@aiborisov
@HalloGene_
gRPC DEADLINE
gRPC-
Web
Stub
gRPC
Service

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

80. @aiborisov
@HalloGene_
API

81. @aiborisov
@HalloGene_
One request, one response
Requests can be redundant
Polling interval?
API: UNARY

82. @aiborisov
@HalloGene_
One request, multiple responses
Real-time updates
gRPC-Web: supports
server-side streaming
API: STREAMING

83. @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);
}

84. @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);
}

85. DEMO: DEVOXX.GRPCWEB.COM
@aiborisov
@HalloGene_

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

87. @aiborisov
@HalloGene_
gRPC-WEB
THINGS
Canonical proto APIs
No more handcrafted JSONs
Canonical status codes
Server streaming
Well-defined domain methods

88. SPECIAL THANKS: MYKYTA PROTSENKO
@aiborisov
@HalloGene_

89. SPECIAL THANKS: THE STRANGER THINGS CREW
@aiborisov
@HalloGene_

90. SPECIAL THANKS: YOU
@aiborisov
@HalloGene_