Introduction of graph API ~ GraphQL and Falcor ~ @Quramy 2016.05.27

About me Yosuke Kurami
 ǛQuarry TypeScript༻ͷVimϓϥΪϯ։ൃ͕झຯɻ http://vimawesome.com/plugin/tsuquyomi ຊۀ͸Web front-end Developer. 
 Angular (1 and 2)ͰSPAΛ։ൃ͍ͯ͠·͢

SPA

Single Page Application

Single Page Application Ƀ Ȑ {JSON} ɂ Ʌ HTTP

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

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

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” }

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

2. Fat endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph API”, “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ Get /api/v1/articles/123

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

View only knows what values to render Client͕Response಺༰ͷܾఆݖΛ࣋ͯ͹Α͍: • ϨεϙϯεʹͲͷ஋ؚ͕·Ε͍ͯΔ΂͖͔ • ඥ͍ͮͨؔ࿈Ϧιʔε͕ඞཁ͔Ͳ͏͔

Ideal endpoint Ƀ Ȑ { “id”: “123”, “title”: “graph api”, “author”: { “id”: “u0001”, “name”: “quramy” } } ɂ Ʌ { “where”: “/article?id=123”, “properties”: [ “id”, “title”, “author”: { “properties”: [“id”, “name”] }] }

So, graph API

There are 2 major libraries GraphQL powered by Facebook http://graphql.org/ Falcor powered by Netflix http://netflix.github.io/falcor/

GraphQL

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" } } }); });

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

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ʹϩοΫΠϯ͞Εͦ͏ɻ

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

Falcor

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" } } } }); });

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

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ͷܕ৘ใΛऔಘग़དྷͳ͍

Summary

GraphQL v.s. Falcor • GraphQLʹ͸ݫີͳSchemaఆ͕ٛଘࡏ͢ΔҰํ, Falcorʹ͓͚ ΔJSON Graphߏ଄͸҉໧஌(ͦͷ෼, ֶश΍࣮૷ίετ͸௿Ί) • Server-SideͱClient-Sideͷ࣮૷νʔϜ͕෼཭͞Ε͍ͯΔ৔߹͸ GraphQLબΜͩํ͕ྑ͍͸ͣɻ • ٯʹ, Front-End νʔϜ͕Endpointͷ࣮૷·Ͱग़དྷΔͷͰ͋Ε ͹, FalcorͰඞཁॆ෼ͳέʔε͕ଟͦ͏ɻ
 


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


Thank you!