Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"gRPC-Web: It’s All About Communication": Devoxx Belgium 2019

522 views

Published on

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

Published in: Software
  • Be the first to comment

"gRPC-Web: It’s All About Communication": Devoxx Belgium 2019

  1. 1. gRPC-Web: It’s All About Communication DEVOXX, NOVEMBER 7, 2019 Alex BORYSOV Yevgen GOLUBENKO
  2. 2. @aiborisov @HalloGene_ Images contained in this presentation are the property of Netflix Inc. and cannot be reused
  3. 3. Yevgen GOLUBENKO Anomali @HalloGene_ @aiborisov @HalloGene_
  4. 4. Alex BORYSOV Netflix @aiborisov @aiborisov @HalloGene_
  5. 5. YOU? @aiborisov @HalloGene_
  6. 6. YOU? @aiborisov @HalloGene_
  7. 7. @aiborisov @HalloGene_ gRPC BEFORE gRPC-WEB
  8. 8. @aiborisov @HalloGene_ FRONTEND THINGS
  9. 9. DEMO @aiborisov @HalloGene_
  10. 10. DEMOGORGON @aiborisov @HalloGene_
  11. 11. @aiborisov @HalloGene_ DEMO ARCHITECTURE API GATEWAY
  12. 12. @aiborisov @HalloGene_ DEMO ARCHITECTURE FIXTURES API GATEWAY
  13. 13. @aiborisov @HalloGene_ DEMO ARCHITECTURE FIXTURES TOPSCORES API GATEWAY
  14. 14. @aiborisov @HalloGene_ DEMO ARCHITECTURE FIXTURES TOPSCORES UPDATE SCORE API GATEWAY
  15. 15. @aiborisov @HalloGene_ DEMO ARCHITECTURE FIXTURES TOPSCORES UPDATE SCORE API GATEWAY
  16. 16. @aiborisov @HalloGene_ HANDMADE JSON?
  17. 17. “DOCS ARE UP TO DATE” THEY SAID @aiborisov @HalloGene_
  18. 18. HOW ABOUT IDL? @aiborisov @HalloGene_
  19. 19. @aiborisov @HalloGene_ API FIRST GATEWAY
  20. 20. @aiborisov @HalloGene_ GATEWAY GATEWAY.PROTO API FIRST
  21. 21. @aiborisov @HalloGene_ GATEWAY gRPC Stub gRPC Service GATEWAY.PROTO API FIRST
  22. 22. @aiborisov @HalloGene_ GATEWAY gRPC Stub gRPC Service GATEWAY.PROTO API FIRST
  23. 23. @aiborisov @HalloGene_ GATEWAY gRPC Stub gRPC Service GATEWAY.PROTO API FIRST
  24. 24. @aiborisov @HalloGene_ API CODE REVIEW
  25. 25. @aiborisov @HalloGene_ API CODE REVIEW
  26. 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. 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. 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. 29. APIs code reviews Language-neutral contract @aiborisov @HalloGene_ PROTO API FIRST
  30. 30. APIs code reviews Language-neutral contract APIs DON’T LIE @aiborisov @HalloGene_ PROTO API FIRST
  31. 31. @aiborisov @HalloGene_ GATEWAY gRPC Stub gRPC Service GATEWAY.PROTO gRPC CODE GEN
  32. 32. @aiborisov @HalloGene_ ● Java ● Go ● C/C++ ● C# ● Node.js ● PHP ● Ruby ● Python ● Dart ● Objective-C gRPC SPEAKS YOUR LANGUAGE
  33. 33. @aiborisov @HalloGene_ ● Linux ● MacOS ● Windows ● Android ● iOS ● Web gRPC CODE GEN
  34. 34. @aiborisov @HalloGene_ ● Linux ● MacOS ● Windows ● Android ● iOS ● Web gRPC CODE GEN
  35. 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. 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. 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. 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. 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. 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. 41. @aiborisov @HalloGene_ GATEWAY gRPC Web Stub gRPC Service GATEWAY.PROTO gRPC-Web HTTP/2
  42. 42. @aiborisov @HalloGene_ GATEWAY gRPC Web Stub gRPC Service GATEWAY.PROTO gRPC-Web HTTP/2HTTP/1*
  43. 43. @aiborisov @HalloGene_ WE NEED A GATE!
  44. 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. 45. @aiborisov @HalloGene_ GATEWAY gRPC Web Stub gRPC Service GATEWAY.PROTO gRPC-Web HTTP/2HTTP/1* PROXY
  46. 46. @aiborisov @HalloGene_ GATEWAY gRPC Web Stub gRPC Service GATEWAY.PROTO gRPC-Web HTTP/2HTTP/1* PROXY
  47. 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. 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. 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. 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. 51. @aiborisov @HalloGene_ ENVOY PROXY Fault Tolerance Service Discovery Load Balancing Health Checking
  52. 52. gRPC Service gRPC Stub @aiborisov @HalloGene_ gRPC over HTTP/* gRPC Service gRPC Stub gRPC- Web Stub
  53. 53. DEMOGORGON @aiborisov @HalloGene_
  54. 54. TOOLS @aiborisov @HalloGene_
  55. 55. TOOLS: CLI @aiborisov @HalloGene_ grpc_cli grpcurl polyglot grpcc gcall Evans
  56. 56. TOOLS: CLI @aiborisov @HalloGene_ grpc_cli grpcurl polyglot grpcc gcall Evans
  57. 57. TOOLS: GRPCURL @aiborisov @HalloGene_
  58. 58. TOOLS: GUI @aiborisov @HalloGene_ gRPCox gRPC-Swagger BloomRPC grpcui letmegrpc MuninRPC
  59. 59. CLI tools GUI tools Testing tools and more @aiborisov @HalloGene_ gRPC ECOSYSTEM
  60. 60. API CHANGES @aiborisov @HalloGene_ message repeated repeated
  61. 61. API CHANGES @aiborisov @HalloGene_ message repeated repeated message int32
  62. 62. API CHANGES @aiborisov @HalloGene_ message repeated repeated message int32 + GooseType goose_type = 2;
  63. 63. API CHANGES: SAFELY ADD/REMOVE FIELDS @aiborisov @HalloGene_
  64. 64. UNCOVER THE TRUTH @aiborisov @HalloGene_
  65. 65. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API syntax = "proto3"; service ServerReflection { rpc ListApis (ListApisRequest) returns (ListApisResponse); rpc GetMethod (GetMethodRequest) returns (GetMethodResponse); }
  66. 66. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API val grpcServer = ServerBuilder.forPort(SERVER_PORT) .addService(fixtureService) .addService(leaderboardService) .addService(ProtoReflectionService.newInstance()) .build();
  67. 67. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API val grpcServer = ServerBuilder.forPort(SERVER_PORT) .addService(fixtureService) .addService(leaderboardService) .addService(ProtoReflectionService.newInstance()) .build();
  68. 68. @aiborisov @HalloGene_ UNCOVER THE TRUTH: SERVER REFLECTION API $ grpcurl -plaintext $GATEWAY:8080 list game.FixtureService game.LeaderboardService grpc.reflection.v1alpha.ServerReflection
  69. 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. 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. 71. @aiborisov @HalloGene_ gRPC TIMEOUT generatePlayerId = () => { const request = new GeneratePlayerIdRequest(); const metadata = {}; return playerIdServicePromiseClient.generatePlayerId(request, metadata); }
  72. 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. 73. gRPC Service @aiborisov @HalloGene_ gRPC DEADLINE gRPC- Web Stub gRPC Service
  74. 74. gRPC Service @aiborisov @HalloGene_ gRPC DEADLINE gRPC- Web Stub gRPC Service
  75. 75. gRPC Service @aiborisov @HalloGene_ gRPC DEADLINE gRPC- Web Stub gRPC Service
  76. 76. gRPC Service @aiborisov @HalloGene_ gRPC DEADLINE gRPC- Web Stub gRPC Service
  77. 77. gRPC Service @aiborisov @HalloGene_ gRPC DEADLINE gRPC- Web Stub gRPC Service
  78. 78. gRPC Service @aiborisov @HalloGene_ gRPC DEADLINE gRPC- Web Stub gRPC Service
  79. 79. Canonical gRPC Status Codes Deadline Support Deadline Propagation @aiborisov @HalloGene_ gRPC ERROR CODES
  80. 80. @aiborisov @HalloGene_ API
  81. 81. @aiborisov @HalloGene_ One request, one response Requests can be redundant Polling interval? API: UNARY
  82. 82. @aiborisov @HalloGene_ One request, multiple responses Real-time updates gRPC-Web: supports server-side streaming API: STREAMING
  83. 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. 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. 85. DEMO: DEVOXX.GRPCWEB.COM @aiborisov @HalloGene_
  86. 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. 87. @aiborisov @HalloGene_ gRPC-WEB THINGS Canonical proto APIs No more handcrafted JSONs Canonical status codes Server streaming Well-defined domain methods
  88. 88. SPECIAL THANKS: MYKYTA PROTSENKO @aiborisov @HalloGene_
  89. 89. SPECIAL THANKS: THE STRANGER THINGS CREW @aiborisov @HalloGene_
  90. 90. SPECIAL THANKS: YOU @aiborisov @HalloGene_

×