Save 37% off PRO during our Black Friday Sale! »

Probablemente Necesites GraphQL

Probablemente Necesites GraphQL

B7f4f73566b6b22ad11f9e1268dfdd62?s=128

Belén Curcio

September 13, 2017
Tweet

Transcript

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

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

  3. @okbel curcio.be/png

  4. @okbel curcio.be/png Diferencias con PNG

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

  6. @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
  7. @okbel curcio.be/png Historia en las APIs Web

  8. @okbel curcio.be/png Historia de tecnologías para APIs Web 1999 2007

    2015 SOAP REST ODATA GraphQL Falcor
  9. @okbel curcio.be/png SOAP (1999) Standard Object Access Protocol * Es

    un protocolo * Está centrado en RPC * Usa XML * Generalmente sobre HTTP o SMTP
  10. @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>
  11. @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/~fielding/pubs/dissertation/top.htm
  12. @okbel curcio.be/png REST (2000) 1. Client-Server 2. Stateless 3. Cacheable

    4. Layered System 5. Uniform Interface 1. Identification of Resources 2. Manipulation of resources through these representations 3. Self-descriptive Messages 4. Hypermedia as the Engine of Application state
  13. @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 }]
  14. @okbel curcio.be/png Users Comments Assets Browser Native Cordova/RN

  15. @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
  16. @okbel curcio.be/png Endpoint Endpoint Endpoint (Mobile) Browser Native

  17. @okbel curcio.be/png Endpoint Endpoint Endpoint (Mobile) Browser Native Pros: *

    Un roundtrip * Exactamente lo que necesitas Cons: * Inflexible * Alto mantenimiento * Alta complejidad dev * Lenta para iterar REST-ish
  18. @okbel curcio.be/png NoSQL Browser SQL Redis API Externa Capa estandarizada

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

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

    GraphQL? Native Requerimientos: * Un roundtrip * Exactamente lo que necesitas * Flexible * Desacoplado * Descubrible
  21. @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 * $filter: Serverside filtering * $metadata: Introspección * descubrimiento
  22. @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 "Russell@example.com",
  23. @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
  24. @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 }
  25. @okbel curcio.be/png

  26. @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
  27. @okbel curcio.be/png GraphQL es una nueva forma de hablar entre

    clientes y servidores
  28. @okbel curcio.be/png { me { firstName } } { "me":

    { "firstName": "Belen" } }
  29. @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 } } }
  30. @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" } ] } } }
  31. @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" } ] } } }
  32. @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" } ] } } }
  33. @okbel curcio.be/png Beneficios

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

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

    { "firstName": "Belen" } }
  36. @okbel curcio.be/png Sistema de Tipos Type System

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

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

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

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

    lastName username } } } type Person { id: String! firstName: String lastName: String username: String email: String friends: [Person] }
  41. @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] }
  42. @okbel curcio.be/png Introspección Introspection

  43. @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 }
  44. @okbel curcio.be/png Cómo trabaja GraphQL ?

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

  46. @okbel curcio.be/png Server Cliente Necesito <forma de la data> Data

    específica para el cliente {id: 1, …}
  47. @okbel curcio.be/png Parsear Validar Ejecutar { me { firstName }

    }
  48. @okbel curcio.be/png Schema Resolvers Loaders

  49. @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 }
  50. @okbel curcio.be/png Schema Resolvers Loaders

  51. @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) }
  52. @okbel curcio.be/png Schema Resolvers Loaders

  53. @okbel curcio.be/png Loaders RootQuery: { person: (obj, args, { loaders

    }) => { return loaders.person.load(args.id) } }
  54. @okbel curcio.be/png Ecosistema GraphQL Implementaciones para Servidores * JavaScript: GraphQL.js

    reference implementation, graphql-tools * Ruby: graphql-ruby * Scala: Sangria * Python: Graphene
  55. @okbel curcio.be/png Ecosistema GraphQL Implementaciones para Clientes * React: React-Apollo,

    Relay * Angular: apollo-angular * Swift/iOS: Apollo iOS * Java/Android: Apollo Android
  56. @okbel curcio.be/png Ecosistema GraphQL Developer Tools y Servicios * GraphiQL

    query IDE * GraphQL Language Service * Optics: GraphQL performance insights * Graphcool: Serverless GraphQL backend
  57. @okbel curcio.be/png Conclusiones GraphQL

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

  59. @okbel curcio.be/png