Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

SPA

Slide 4

Slide 4 text

Single Page Application

Slide 5

Slide 5 text

Single Page Application Ƀ Ȑ {JSON} ɂ Ʌ HTTP

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

So, graph API

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

GraphQL

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Falcor

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Summary

Slide 26

Slide 26 text

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


Slide 27

Slide 27 text

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


Slide 28

Slide 28 text

Thank you!