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

Roppongi.js #7

Transcript

1. ©2018 Wantedly, Inc. gRPC-web ͷ͕͍͜͜͢͝ʂ 19.Nov.2018 - Hazumi Ichijo ͱ͍͏࿩͕͔ͨͬͨ͠
2. ©2018 Wantedly, Inc. ࣗݾ঺հ Ұᑍ
   ୺੅
   !IB[VNJSS!SFSPTU
   4FSWFS
   4JEF
   &OHJOFFS
   JO
   8BOUFEMZ
   (P
   3BJMT
   3FBDUʜ
   ग़਎
   ๺ւಓ
3. ©2018 Wantedly, Inc. ࣗݾ঺հ Ұᑍ
   ୺੅
   !IB[VNJSS!SFSPTU
   4FSWFS
   4JEF
   &OHJOFFS
   JO
   8BOUFEMZ
   (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
   
   lOBNFz
   lH31$Λಋೖ͢Δz
   lBVUIPSz
   
   lSFSPTUz
   lEFBEMJOFz
   lz
   lBQQMJDBUJPO@UZQFz
   l1$8FCz
   ^ Server Frontend
9. ©2018 Wantedly, Inc. API Call \
   lJEz
   
   lOBNFz
   lH31$Λಋೖ͢Δz
   lBVUIPSz
   
   lSFSPTUz
   lEFBEMJOFz
   lz
   lBQQMJDBUJPO@UZQFz
   l1$8FCz
   ^ Server Frontend ͜͜ͷϑΥʔϚοτ͸Կʁ
10. ©2018 Wantedly, Inc. API Call \
    lJEz
    
    lOBNFz
    lH31$Λಋೖ͢Δz
    lBVUIPSz
    
    lSFSPTUz
    lEFBEMJOFz
    lz
    lBQQMJDBUJPO@UZQFz
    l1$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*पΓָ͕ʹͳΔ
     ͨͩ͠ɺϋϚΓϙΠϯτ͸݁ߏ͋Δ