Introduction to Graph API

Transcript

1. 1.

   Introduction to graph API ~ GraphQL and Falcor ~ @Quramy

   2016.05.27
2. 2.

   About me Yosuke Kurami
 ǛQuarry TypeScript༻ͷVimϓϥΪϯ։ൃ͕झຯɻ http://vimawesome.com/plugin/tsuquyomi ຊۀ͸Web front-end Developer.

   
 Angular (1 and 2)ͰSPAΛ։ൃ͍ͯ͠·͢
3. 3.

   SPA

4. 4.

   Single Page Application

5. 5.

   Single Page Application Ƀ Ȑ {JSON} ɂ Ʌ HTTP

6. 6.

   Today’s theme: Ƀ Ȑ {JSON} ɂ Ʌ HTTP

7. 7.

   How to design API? endpointͷཻ౓ɺͲΕ͘Β͍͕ద੾Ͱ͔͢? 1. Resourceʹ͸શͯURLΛৼͬͯlinkͰ઀ଓʁ 2. Request͠қ͍Α͏ؔ࿈Resource͸populateʁ

8. 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. 9.

   1. Thin endpoint ֤Resource͸URL LinkͰ݁߹͞Ε͍ͯΔɿ RESTful APIͷݪଇ௨Γ Endpointࣗମͷ࠶ར༻ੑ͸ߴ͍
 Renderingʹෳ਺Request͕ඞཁ

10. 10.

    2. Fat endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph

    API”, “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ Get /api/v1/articles/123
11. 11.

    2. Fat endpoint Responseʹଟ͘ͷ৘ใΛωετͤ͞Δ: ը໘ͷ3FOEFSJOH͸ָ ͦͯ͠ߴ଎ . Endpointͷ࠶ར༻ੑ͸௿͍ ը໘ཁ݅ʹҾͬுΒΕͯɺ&OEQPJOUվम͕ඞཁͱͳΔ

12. 12.

    View only knows what values to render Client͕Response಺༰ͷܾఆݖΛ࣋ͯ͹Α͍: • ϨεϙϯεʹͲͷ஋ؚ͕·Ε͍ͯΔ΂͖͔

    • ඥ͍ͮͨؔ࿈Ϧιʔε͕ඞཁ͔Ͳ͏͔
13. 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. 14.

    So, graph API

15. 15.

    There are 2 major libraries GraphQL powered by Facebook http://graphql.org/

    Falcor powered by Netflix http://netflix.github.io/falcor/
16. 16.

    GraphQL

17. 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. 18.

    GrahpQLΛར༻͢Δʹ͸Schemaͷఆ͕ٛඞਢ ʮarticle(id: “123”)͕औಘՄೳʯ౳ͷ৘ใ͸શͯSchemaʹఆ͓ٛͯ͠ ͘ඞཁ͕͋Δ GraphQL: GraphQL has solid Schema Ȑ

    schema Inquire Implement
19. 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. 20.

    GraphQL: Tools example e.g. Execution query with GraphiQL:

21. 21.

    Falcor

22. 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. 23.

    Falcor͸ “Virtual JSON Graph” ΛClient, Server૒ํͰڞ༗͢Δ Client͸Virtual JSON Graphͷ෦෼ू߹ΛऔΓग़͢. Falcor:

    Model as one JSON Object Ȑ JSON Graph
24. 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. 25.

    Summary

26. 26.

    GraphQL v.s. Falcor • GraphQLʹ͸ݫີͳSchemaఆ͕ٛଘࡏ͢ΔҰํ, Falcorʹ͓͚ ΔJSON Graphߏ଄͸҉໧஌(ͦͷ෼, ֶश΍࣮૷ίετ͸௿Ί) •

    Server-SideͱClient-Sideͷ࣮૷νʔϜ͕෼཭͞Ε͍ͯΔ৔߹͸ GraphQLબΜͩํ͕ྑ͍͸ͣɻ • ٯʹ, Front-End νʔϜ͕Endpointͷ࣮૷·Ͱग़དྷΔͷͰ͋Ε ͹, FalcorͰඞཁॆ෼ͳέʔε͕ଟͦ͏ɻ
 

27. 27.

    Graph API • طଘͷREST endpointΛϥοϓ͢Δ༻్ͷ৔߹ɺͦΕ΄ͲϝϦοτ͸ແ ͍ɻ
 ಛʹViewʹಛԽͨ͠EndpointઃܭΛ͍ͯ͠ΔέʔεͰ͸Ұ౓Graphͷܗࣜ ʹਖ਼نԽ͢Δख͕͔͔ؒΔ͚͔ͩ΋ɻ • MicroServicesͷจ຺ʹ͓͍ͯ,

    ෳ਺ͷDown Stream ServiceΛଋͶΔ໨త ʹ͸ڧ͍(API Gateway, Backend-For-Fronend ౳) • ʮMonolithic ͳServiceΛෳ਺෼ׂ͢Δ࣌ʹFront͕ઌߦͯ͠ಋೖ͢Δʯͷ Α͏ͳಋೖ͸ݱ࣮త͔
 

28. 28.

    Thank you!