Probablemente Necesites GraphQL

GraphQL charla - https://www.youtube.com/watch?v=MqIw9-39rnU

Transcript

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

   View Slide

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

   View Slide

3. @okbel
   curcio.be/png
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
    10 11 xmlns:soap="http://www.w3.org/2003/05/soap-
    12 envelope"
    13 xmlns:m="http://curcio.be/comments">
    14
    15
    16
    17
    18 okbel
    19
    20
    21
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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",
    

    View Slide

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
    

    View Slide

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 }
    

    View Slide

25. @okbel
    curcio.be/png
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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"
    }
    ]
    }
    }
    }
    

    View Slide

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"
    }
    ]
    }
    }
    }
    

    View Slide

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"
    }
    ]
    }
    }
    }
    

    View Slide

33. @okbel
    curcio.be/png
    Beneficios
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. @okbel
    curcio.be/png
    Introspección
    Introspection
    

    View Slide

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
    }
    

    View Slide

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

    View Slide

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

    View Slide

46. @okbel
    curcio.be/png
    Server Cliente
    Necesito
    
    Data específica
    para el cliente
    {id: 1, …}
    

    View Slide

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

    View Slide

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

    View Slide

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
    }
    

    View Slide

50. @okbel
    curcio.be/png
    Schema
    Resolvers
    Loaders
    

    View Slide

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

    View Slide

52. @okbel
    curcio.be/png
    Schema
    Resolvers
    Loaders
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

57. @okbel
    curcio.be/png
    Conclusiones GraphQL
    

    View Slide

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

    View Slide

59. @okbel
    curcio.be/png
    

    View Slide