Introduction to Graph API

Transcript

1. Introduction to graph API ~ GraphQL and Falcor ~ @Quramy 2016.05.27
2. About me Yosuke Kurami
 ǛQuarry TypeScript༻ͷVimϓϥΪϯ։ൃ͕झຯɻ http://vimawesome.com/plugin/tsuquyomi ຊۀ͸Web front-end Developer. 
 Angular (1 and 2)ͰSPAΛ։ൃ͍ͯ͠·͢
3. SPA
4. Single Page Application
5. Single Page Application Ƀ Ȑ {JSON} ɂ Ʌ HTTP
6. Today’s theme: Ƀ Ȑ {JSON} ɂ Ʌ HTTP
7. How to design API? endpointͷཻ౓ɺͲΕ͘Β͍͕ద੾Ͱ͔͢? 1. Resourceʹ͸શͯURLΛৼͬͯlinkͰ઀ଓʁ 2. Request͠қ͍Α͏ؔ࿈Resource͸populateʁ
8. 1. Thin endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph API”, “author”: “/api/v1/users/u0001” } ɂ Ʌ Get /api/v1/articles/123 Get /api/v1/users/u0001 { “id”: “u0001”, “name”: “quramy” }
9. 1. Thin endpoint ֤Resource͸URL LinkͰ݁߹͞Ε͍ͯΔɿ RESTful APIͷݪଇ௨Γ Endpointࣗମͷ࠶ར༻ੑ͸ߴ͍
 Renderingʹෳ਺Request͕ඞཁ
10. 2. Fat endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph API”, “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ Get /api/v1/articles/123
11. 2. Fat endpoint Responseʹଟ͘ͷ৘ใΛωετͤ͞Δ: ը໘ͷ3FOEFSJOH͸ָ ͦͯ͠ߴ଎ . Endpointͷ࠶ར༻ੑ͸௿͍ ը໘ཁ݅ʹҾͬுΒΕͯɺ&OEQPJOUվम͕ඞཁͱͳΔ
12. View only knows what values to render Client͕Response಺༰ͷܾఆݖΛ࣋ͯ͹Α͍: • ϨεϙϯεʹͲͷ஋ؚ͕·Ε͍ͯΔ΂͖͔ • ඥ͍ͮͨؔ࿈Ϧιʔε͕ඞཁ͔Ͳ͏͔
13. Ideal endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph api”, “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ { “where”: “/article?id=123”, “properties”: [ “id”, “title”, “author”: { “properties”: [“id”, “name”] }] }
14. So, graph API
15. There are 2 major libraries GraphQL powered by Facebook http://graphql.org/ Falcor powered by Netflix http://netflix.github.io/falcor/
16. GraphQL
17. GraphQL: GraphQL is a query language import assert from "assert"; import { parse } from "graphql/language"; import { execute } from "graphql/execution"; import { schema } from "./schema"; execute(schema, parse(` { article(id :"123") { id, title, author { id, name } } } `)).then(response => { assert.deepEqual(response.data, { article: { id: "123", title: "graph api", author: { id: "u0001", name: "quramy" } } }); });
18. GrahpQLΛར༻͢Δʹ͸Schemaͷఆ͕ٛඞਢ ʮarticle(id: “123”)͕औಘՄೳʯ౳ͷ৘ใ͸શͯSchemaʹఆ͓ٛͯ͠ ͘ඞཁ͕͋Δ GraphQL: GraphQL has solid Schema Ȑ schema Inquire Implement
19. GraphQL: pros/cons • Pros: • JavaScriptҎ֎Ͱ΋৭ʑͳݴޠ(Java, golang, Ruby, etc…)Ͱར༻Մೳͳlibrary ͕͋Δɻ • GraphiQl౳΍Chrome Extension౳ɺ։ൃิॿπʔϧ͸๛෋ɻ • Cons: • शಘίετ͕ߴ͍. SchemaΛख૊ΈͰ૊ΉͱࢮͶͦ͏. • Relay(React.js + GraphQLͷϑϨʔϜϫʔΫ)͸ߴػೳͰ͋ΔҰํɺGraphQL ࣗମͷRIͰ͋ΔGraphQL.js͸ը໘͔Β࢖͏͜ͱΛߟ͑Δͱ૬౰γϣϘ͍ɻ൒ ڧ੍తʹReact.jsʹϩοΫΠϯ͞Εͦ͏ɻ
20. GraphQL: Tools example e.g. Execution query with GraphiQL:
21. Falcor
22. Falcor: Access as the JSON way import { Model } from "falcor"; import { dataSource } from "./dataSource"; import assert from "assert"; new Model({ source: dataSource, }).get( "article['123']['id', 'title']", "article['123'].author['id', 'name']" ).subscribe(response => { assert.deepEqual(response.json, { article: { "123": { id: "123", title: "graph api", author: { id: "u0001", name: "quramy" } } } }); });
23. Falcor͸ “Virtual JSON Graph” ΛClient, Server૒ํͰڞ༗͢Δ Client͸Virtual JSON Graphͷ෦෼ू߹ΛऔΓग़͢. Falcor: Model as one JSON Object Ȑ JSON Graph
24. Falcor: pros/cons • Pros: • ࢓૊Έ͕୯७Ͱ͋Γɺशಘ͕༰қɻ • ७ਮͳData Fetching Library Ͱ͋ΔͨΊɺClient-Side MVC͕ϩοΫΠϯ͞Ε ͳ͍ɻAngularͩΖ͏ͱVue.jsͩΖ͏ͱԿͰ΋૊Έ߹ΘͤΒΕΔɻ • falcor.jsʹCaching, Batching, onChange౳, ͋Δͱخ͍͠ػೳ͸Ұ௨Γἧͬͯ ͍Δ • Cons: • Server-Side࣮૷͸جຊతʹNode.jsҰ୒(ҰԠC#࣮૷΋͋ΔΒ͍͚͠Ͳ…) • ࣮ߦ͠ͳ͍ͱJSON Graphͷܕ৘ใΛऔಘग़དྷͳ͍
25. Summary
26. GraphQL v.s. Falcor • GraphQLʹ͸ݫີͳSchemaఆ͕ٛଘࡏ͢ΔҰํ, Falcorʹ͓͚ ΔJSON Graphߏ଄͸҉໧஌(ͦͷ෼, ֶश΍࣮૷ίετ͸௿Ί) • Server-SideͱClient-Sideͷ࣮૷νʔϜ͕෼཭͞Ε͍ͯΔ৔߹͸ GraphQLબΜͩํ͕ྑ͍͸ͣɻ • ٯʹ, Front-End νʔϜ͕Endpointͷ࣮૷·Ͱग़དྷΔͷͰ͋Ε ͹, FalcorͰඞཁॆ෼ͳέʔε͕ଟͦ͏ɻ
 

27. Graph API • طଘͷREST endpointΛϥοϓ͢Δ༻్ͷ৔߹ɺͦΕ΄ͲϝϦοτ͸ແ ͍ɻ
 ಛʹViewʹಛԽͨ͠EndpointઃܭΛ͍ͯ͠ΔέʔεͰ͸Ұ౓Graphͷܗࣜ ʹਖ਼نԽ͢Δख͕͔͔ؒΔ͚͔ͩ΋ɻ • MicroServicesͷจ຺ʹ͓͍ͯ, ෳ਺ͷDown Stream ServiceΛଋͶΔ໨త ʹ͸ڧ͍(API Gateway, Backend-For-Fronend ౳) • ʮMonolithic ͳServiceΛෳ਺෼ׂ͢Δ࣌ʹFront͕ઌߦͯ͠ಋೖ͢Δʯͷ Α͏ͳಋೖ͸ݱ࣮త͔
 

28. Thank you!