Upgrade to Pro — share decks privately, control downloads, hide ads and more …

gRPC-webのここがすごい という話がしたかった

9ec2ceee3f782e64fd67fa7d82b6c1b4?s=47 Hazumi Ichijo
November 19, 2018

gRPC-webのここがすごい という話がしたかった

Roppongi.js #7

9ec2ceee3f782e64fd67fa7d82b6c1b4?s=128

Hazumi Ichijo

November 19, 2018
Tweet

More Decks by Hazumi Ichijo

Other Decks in Programming

Transcript

  1. ©2018 Wantedly, Inc. gRPC-web ͷ͕͍͜͜͢͝ʂ 19.Nov.2018 - Hazumi Ichijo ͱ͍͏࿩͕͔ͨͬͨ͠

  2. ©2018 Wantedly, Inc. ࣗݾ঺հ Ұᑍ୺੅!IB[VNJSS!SFSPTU 4FSWFS4JEF&OHJOFFSJO8BOUFEMZ (P 3BJMT 3FBDUʜ ग़਎๺ւಓ

  3. ©2018 Wantedly, Inc. ࣗݾ঺հ Ұᑍ୺੅!IB[VNJSS!SFSPTU 4FSWFS4JEF&OHJOFFSJO8BOUFEMZ (P 3BJMT 3FBDUʜ ग़਎๺ւಓ

  4. ©2018 Wantedly, Inc. ͋͘·ͰɺαʔόʔαΠυΤϯδχΞ͔ΒΈͨ gRPC-Webͷ࿩Λ͍ͨ͠ͱࢥ͍·͢

  5. ©2018 Wantedly, Inc. grpc/grpc-web͕ϦϦʔε͞Ε·ͨ͠ Description

  6. ©2018 Wantedly, Inc.

  7. ©2018 Wantedly, Inc. gRPC-Web Λ࢖͏ϝϦοτ

  8. ©2018 Wantedly, Inc. API Call \ lJEz  lOBNFzlH31$Λಋೖ͢Δz 

    lBVUIPSzlSFSPTUz  lEFBEMJOFzlz  lBQQMJDBUJPO@UZQFzl1$8FCz ^ Server Frontend
  9. ©2018 Wantedly, Inc. API Call \ lJEz  lOBNFzlH31$Λಋೖ͢Δz 

    lBVUIPSzlSFSPTUz  lEFBEMJOFzlz  lBQQMJDBUJPO@UZQFzl1$8FCz ^ Server Frontend ͜͜ͷϑΥʔϚοτ͸Կʁ
  10. ©2018 Wantedly, Inc. API Call \ lJEz  lOBNFzlH31$Λಋೖ͢Δz 

    lBVUIPSzlSFSPTUz  lEFBEMJOFzlz  lBQQMJDBUJPO@UZQFzl1$8FCz ^ Server Frontend ͜͜͸Կ͕ೖΔʁԿΛೖΕ͍͍ͯʁ - PC-Web or pc-web - iOS, Android, …?
  11. ©2018 Wantedly, Inc.  ΤϯδχΞಉ࢜ͷίϛϡχέʔγϣϯΛͲ͏͢Δʁ  "1*ͷޓ׵ੑ͸ʁ

  12. ©2018 Wantedly, Inc. gRPC Call Server Frontend message Todolist {

    int64 id = 1; string name = 2; string author = 3; google.protobuf.Timestamp deadline = 4; enum ApplicationType { PC_WEB = 0; MOBILE_WEB = 1; PC_APP = 2; IOS_APP = 3; ANDROID_APP = 4; } ApplicationType application_type = 5; }
  13. ©2018 Wantedly, Inc. gRPC Call Server Frontend service TodolistService {

    rpc ListTasks (ListTasksRequest) returns (ListTasksResponse) {} rpc GetTask (GetTaskRequest) returns (Todolist) {} rpc CreateTask (CreateTaskRequest) returns (Todolist) {} }
  14. ©2018 Wantedly, Inc. ࢼ͢

  15. ©2018 Wantedly, Inc. Frontend Envoy(reverse proxy) API Server http gRPC

  16. ©2018 Wantedly, Inc. https://grpc.io/docs/quickstart/web.html#what-is-happening

  17. ©2018 Wantedly, Inc. service TaskService { rpc ListTasks (ListTasksRequest) returns

    (ListTasksResponse) {} rpc GetTask (GetTaskRequest) returns (Task) {} rpc CreateTask (CreateTaskRequest) returns (Task) {} rpc UpdateTask (UpdateTaskRequest) returns (Task) {} rpc DeleteTask (DeleteTaskRequest) returns (google.protobuf.Empty) {} rpc StreamTask(CreateTaskRequest) returns (stream Task){} } message Task { int64 task_id = 1; string title = 2; google.protobuf.Timestamp created_at = 3; google.protobuf.Timestamp deadline = 4; google.protobuf.StringValue note = 5; } ϝοηʔδͷఆٛ αʔϏεͷఆٛ
  18. ©2018 Wantedly, Inc. https://github.com/rerost/todolist-server https://github.com/rerost/todolist-frontend2

  19. ©2018 Wantedly, Inc.  ϋϚΓ΍͍͢ w H31$ FOWPZ ʜ 

    ৘ใ͕গͳ͍ɾ୳ͮ͠Β͍ w JNQSPCBCMFFOHHSQDXFC͕ઌʹग़͍ͯͨͷͰݕࡧͯ͠΋͕ͬͪ͜Ҿ͔͔ͬΓ΍͍͢  ੜ੒͞ΕΔίʔυ͕ಡΊͳ͍ʢݸਓࠩ͋Γʣ
  20. ©2018 Wantedly, Inc. let req = new ListTasksRequest(); this.client.listTasks(req, {},

    (err, res) => { if (err != null) { // ԿΒ͔ͷΤϥʔॲཧ console.log(err); return; } this.setState({ tasks: res.getTasksList() }); }); let req = new CreateTaskRequest(); let task = new Task(); task.setTitle(this.state.text); req.setTask(task); this.client.createTask(req, {}, (err, res) => { if (err != null) { console.log(err); return; } this.setState({ tasks: [res, ...this.state.tasks] }); }); ίϯετϥΫλ͔ΒͰ͸ͳ͘ɺ`setXX`Ͱ౉͢ getterϝιου͕ࣗಈͰఆٛ͞Ε͍ͯΔ
  21. ©2018 Wantedly, Inc. /** * @fileoverview * @enhanceable * @suppress

    {messageConventions} JS Compiler reports an error if a variable or * field starts with 'MSG_' and isn't a translatable message. * @public */ // GENERATED CODE -- DO NOT EDIT! /* eslint-disable */ var jspb = require("google-protobuf"); var goog = jspb; var global = Function("return this")(); var google_protobuf_empty_pb = require("google-protobuf/google/protobuf/empty_pb.js"); var google_protobuf_timestamp_pb = require("google-protobuf/google/protobuf/timestamp_pb.js"); var google_protobuf_wrappers_pb = require("google-protobuf/google/protobuf/wrappers_pb.js"); var google_protobuf_field_mask_pb = require("google-protobuf/google/protobuf/field_mask_pb.js"); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.CreateTaskRequest", null, global ); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.DeleteTaskRequest", null, global ); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.GetTaskRequest", null, global ); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.ListTasksRequest", null, global ); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.ListTasksResponse", null, global ); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.Task", null, global ); goog.exportSymbol( "proto.com.github.rerost.todolist_server.api.UpdateTaskRequest", null, global ); ϝοηʔδͷఆٛ /** * @fileoverview gRPC-Web generated client stub for com.github.rerost.todolist_server.api * @enhanceable * @public */ // GENERATED CODE -- DO NOT EDIT! const grpc = {}; grpc.web = require("grpc-web"); var google_protobuf_empty_pb = require("google-protobuf/google/protobuf/empty_pb.js"); var google_protobuf_timestamp_pb = require("google-protobuf/google/protobuf/timestamp_pb.js"); var google_protobuf_wrappers_pb = require("google-protobuf/google/protobuf/wrappers_pb.js"); var google_protobuf_field_mask_pb = require("google-protobuf/google/protobuf/field_mask_pb.js"); const proto = {}; proto.com = {}; proto.com.github = {}; proto.com.github.rerost = {}; proto.com.github.rerost.todolist_server = {}; proto.com.github.rerost.todolist_server.api = require("./todo_pb.js"); /** * @param {string} hostname * @param {?Object} credentials * @param {?Object} options * @constructor * @struct * @final */ proto.com.github.rerost.todolist_server.api.TaskServiceClient = function( hostname, credentials, options ) { if (!options) options = {}; options["format"] = "text"; /** * @private @const {!grpc.web.GrpcWebClientBase} The client */ this.client_ = new grpc.web.GrpcWebClientBase(options); /** * @private @const {string} The hostname */ this.hostname_ = hostname; /** * @private @const {?Object} The credentials to be used to connect * to the server αʔϏεͷఆٛ
  22. ©2018 Wantedly, Inc.  H31$8FCͰ"1*पΓָ͕ʹͳΔ  ͨͩ͠ɺϋϚΓϙΠϯτ͸݁ߏ͋Δ