Probablemente Necesites GraphQL

Probablemente Necesitás GraphQL @okbel curcio.be/png

Belén Curcio @okbel Mozilla - The Coral Project @okbel curcio.be/png

@okbel curcio.be/png

@okbel curcio.be/png Diferencias con PNG

@okbel curcio.be/png Problemas Cliente - Servidor?

@okbel curcio.be/png Backend Frontend Transferir estado en ambas direcciones Backend
tiene acceso a toda la data Frontend opera sobre un subset de data

@okbel curcio.be/png Historia en las APIs Web

@okbel curcio.be/png Historia de tecnologías para APIs Web 1999 2007
2015 SOAP REST ODATA GraphQL Falcor

@okbel curcio.be/png SOAP (1999) Standard Object Access Protocol * Es
un protocolo * Está centrado en RPC * Usa XML * Generalmente sobre HTTP o SMTP

@okbel curcio.be/png SOAP (1999) 1 POST /comments HTTP/1.1 2 Host:
curcio.be 3 Content-Type: application/soap+xml; charset=utf-8 4 5 Content-Length: 299 6 SOAPAction: "http://www.w3.org/2003/05/soap- 7 envelope" 8 9 <?xml version="1.0"?> 10 <soap:Envelope 11 xmlns:soap="http://www.w3.org/2003/05/soap- 12 envelope" 13 xmlns:m="http://curcio.be/comments"> 14 <soap:Header> 15 </soap:Header> 16 <soap:Body> 17 <m:GetComments> 18 <m:UserName>okbel</m:Username> 19 </m:GetComments> 20 </soap:Body> 21 </soap:Envelope>

@okbel curcio.be/png REST (2000) Representational State Transfer * Estilo de
Arquitectura presentada por Roy Fielding * Centrada alrededor de recursos * Generalmente usa JSON y XML * Sobre HTTP http://www.ics.uci.edu/~ﬁelding/pubs/dissertation/top.htm

@okbel curcio.be/png REST (2000) 1. Client-Server 2. Stateless 3. Cacheable
4. Layered System 5. Uniform Interface 1. Identiﬁcation of Resources 2. Manipulation of resources through these representations 3. Self-descriptive Messages 4. Hypermedia as the Engine of Application state

@okbel curcio.be/png REST (2000) 1 GET /comments HTTP/1.1 2 Date:
Wed, 06 Sep 2017 01:30:41 GMT 3 Host: curcio.be 4 Content-Type: application/json;charset=UTF-8 5 HTTP/1.1 200 OK 6 7 [{ 8 "id": "adgh12f3h12j3k", 9 "body": "GraphQL is the potato" 10 "author": "okbel" 11 },{ 12 ... 13 }]

@okbel curcio.be/png Users Comments Assets Browser Native Cordova/RN

@okbel curcio.be/png Users Comments Assets Browser Native Cordova/RN Pros: *
Flexible * Desacoplado Cons: * Muchos rountrips * Overfetching * Clientes complejos * Duplicacion de data REST puro

@okbel curcio.be/png Endpoint Endpoint Endpoint (Mobile) Browser Native

@okbel curcio.be/png Endpoint Endpoint Endpoint (Mobile) Browser Native Pros: *
Un roundtrip * Exactamente lo que necesitas Cons: * Inﬂexible * Alto mantenimiento * Alta complejidad dev * Lenta para iterar REST-ish

@okbel curcio.be/png NoSQL Browser SQL Redis API Externa Capa estandarizada
Native

@okbel curcio.be/png NoSQL Browser SQ Redis API Externa Capa estandarizada
Native Requerimientos: * Un roundtrip * Exactamente lo que necesitas * Flexible * Desacoplado * Descubrible

@okbel curcio.be/png NoSQL Browser SQ Redis API Externa ODATA? Falcor?
GraphQL? Native Requerimientos: * Un roundtrip * Exactamente lo que necesitas * Flexible * Desacoplado * Descubrible

@okbel curcio.be/png ODATA (2007) “The best way to REST" *
$select: Elegis los campos que quieras * $expand: Fetch recursos relacionados * $top $skip: Paginación * $ﬁlter: Serverside ﬁltering * $metadata: Introspección * descubrimiento

@okbel curcio.be/png ODATA (2007) 1 { 2 "@odata.context": 3 "serviceRoot/$metadata#People",
4 "@odata.nextLink": 5 "serviceRoot/People?%24skiptoken=8", 6 "value": [ 7 { 8 "@odata.id": "serviceRoot/People('ru 9 sse 10 llw 11 hyt 12 e') 13 ", 14 "@odata.etag": 15 "W/"08D1694BD49A0F11"", 16 "@odata.editLink": 17 "serviceRoot/People('russellwhyte') 18 ", 19 "UserName": "russellwhyte", 20 "FirstName": "Russell", 21 "LastName": "Whyte", 22 "Emails": [ 23 "[email protected]",

@okbel curcio.be/png Falcor (2015) * Toda la data está modelada
con JSON Object con referencias * Todos los valores se resuelven asíncronamente * Rutas determinan como la data se consigue * Data es tratada como un graph no como un árbol * Fácil de aprender y usar * No hay sistema de tipos ni argumentos

@okbel curcio.be/png Falcor (2015) 1 model.get("users[5]['name', 'age']"); 2 3 {
4 "users": { 5 "5": { 6 "name": "Juan", 7 "age": "33" 8 } 9 } 10 }

@okbel curcio.be/png GraphQL (2015) * Fácil de usar query language
* Trae exactamente lo que necesitás * Type System * Advanced Tooling * Resolver Routine * Single endpoint

@okbel curcio.be/png GraphQL es una nueva forma de hablar entre
clientes y servidores

@okbel curcio.be/png { me { firstName } } { "me":
{ "firstName": "Belen" } }

@okbel curcio.be/png { "me": { "name": "Belen Curcio" "friends": [
{ "firstName": "Dan", "lastName": "Zajdband", }, { "firstName": "Guido", "lastName": "Vilariño", }, { "firstName": "Lele", "lastName": "Lester", }, { "firstName": "Karen", "lastName": "Serfaty", } ] } } { me { firstName lastName friends { firstName lastName } } }

@okbel curcio.be/png { me { firstName lastName username friends {
firstName lastName username } } } { "data": { "me": { "firstName": "Belen", "lastName": "Curcio", "username": "@okbel", "friends": [ { "firstName": "Dan", "lastName": "Zajdband", "username": "@impronunciable" }, { "firstName": "Guido", "lastName": "Vilariño", "username": "@gvilarino" }, { "firstName": "Lele", "lastName": "Lester", "username": "@lele_lester" }, { "firstName": "Karen", "lastName": "Serfaty", "username": "@keyserfaty" } ] } } }

@okbel curcio.be/png query Me { me { ...Details friends {
...Details } } } fragment Details on Person { firstName lastName username } { "data": { "me": { "firstName": "Belen", "lastName": "Curcio", "username": "@okbel", "friends": [ { "firstName": "Dan", "lastName": "Zajdband", "username": "@impronunciable" }, { "firstName": "Guido", "lastName": "Vilariño", "username": "@gvilarino" }, { "firstName": "Lele", "lastName": "Lester", "username": "@lele_lester" }, { "firstName": "Karen", "lastName": "Serfaty", "username": "@keyserfaty" } ] } } }

@okbel curcio.be/png query Me { me { ...Details friends(first: 1)
{ ...Details } } } { "data": { "me": { "firstName": "Belen", "lastName": "Curcio", "username": "@okbel", "friends": [ { "firstName": "Dan", "lastName": "Zajdband", "username": "@impronunciable" } ] } } }

@okbel curcio.be/png Beneﬁcios

@okbel curcio.be/png Poder al Cliente Power to the client

@okbel curcio.be/png { me { firstName } } { "me":
{ "firstName": "Belen" } }

@okbel curcio.be/png Sistema de Tipos Type System

@okbel curcio.be/png { me { firstName friends(first: 1) { firstName
lastName username } } }

lastName username } } } type Query { me: Person }

lastName username } } } type Person { id: String! firstName: String lastName: String username: String email: String friends: [Person] }

@okbel curcio.be/png { me { name friends(first: 1) { firstName
lastName username } } } type Person { id: String! firstName: String lastName: String username: String email: String friends: [Person] }

@okbel curcio.be/png Introspección Introspection

@okbel curcio.be/png { __schema { types { name fields {
name type { name } } } } } type Person { id: String! firstName: String lastName: String username: String email: String friends: [Person] } type Query { me: Person }

@okbel curcio.be/png Cómo trabaja GraphQL ?

@okbel curcio.be/png Server Cliente /resource {id: 1, […]…}

@okbel curcio.be/png Server Cliente Necesito <forma de la data> Data
específica para el cliente {id: 1, …}

@okbel curcio.be/png Parsear Validar Ejecutar { me { firstName }
}

@okbel curcio.be/png Schema Resolvers Loaders

@okbel curcio.be/png Schema type Person { id: String! firstName: String
lastName: String username: String email: String friends: [Person] } type RootQuery { me: Person } schema { query: RootQuery }

@okbel curcio.be/png Resolvers getPerson(_, args){ return sql.raw(` SELECT * FROM
people WHERE id = ${args.id}` ); } getPerson(id) { return request(` https://api.curcio.be/person/${id} `); } getPerson(id) { return Person.find(id) }

@okbel curcio.be/png Loaders RootQuery: { person: (obj, args, { loaders
}) => { return loaders.person.load(args.id) } }

@okbel curcio.be/png Ecosistema GraphQL Implementaciones para Servidores * JavaScript: GraphQL.js
reference implementation, graphql-tools * Ruby: graphql-ruby * Scala: Sangria * Python: Graphene

@okbel curcio.be/png Ecosistema GraphQL Implementaciones para Clientes * React: React-Apollo,
Relay * Angular: apollo-angular * Swift/iOS: Apollo iOS * Java/Android: Apollo Android

@okbel curcio.be/png Ecosistema GraphQL Developer Tools y Servicios * GraphiQL
query IDE * GraphQL Language Service * Optics: GraphQL performance insights * Graphcool: Serverless GraphQL backend

@okbel curcio.be/png Conclusiones GraphQL

@okbel curcio.be/png Live coding / Demo! https://launchpad.graphql.com/

Probablemente Necesites GraphQL

Probablemente Necesites GraphQL

More Decks by Belén Curcio

Other Decks in Programming

Featured

Transcript