Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL

 GraphQL

Intro to GraphQL before workshop done with the Guatemala's Facebook Developer Circle (spanish).

Luis Del Aguila

March 21, 2018
Tweet

More Decks by Luis Del Aguila

Other Decks in Technology

Transcript

  1. /usr/bin/whoami

    View full-size slide

  2. /usr/bin/whoami
    # @cocafunes

    View full-size slide

  3. /usr/bin/whoami
    # @cocafunes
    @delaguilaluis

    View full-size slide

  4. Preámbulo
    ● Crecimiento (desde el 2015)

    View full-size slide

  5. Preámbulo
    ● Crecimiento (desde el 2015)
    ● Empezó a trabajarse en 2012 en Facebook

    View full-size slide

  6. Preámbulo
    ● Crecimiento (desde el 2015)
    ● Empezó a trabajarse en 2012 en Facebook
    ● Existe un borrador de la especificación

    View full-size slide

  7. Preámbulo
    ● Crecimiento (desde el 2015)
    ● Empezó a trabajarse en 2012 en Facebook
    ● Existe un borrador de la especificación
    ● Se ha implementado en clientes en más de 10 lenguajes distintos

    View full-size slide

  8. Pero… REST!
    Actualmente RESTful, con formato de intercambio JSON, es la opción
    predeterminada al considerar implementar una web API.

    View full-size slide

  9. El nuevo chavo de la cuadra
    GraphQL es una manera completamente nueva de implementar y consumir Web
    APIs. Y, si se hace bien, se puede construir integraciones maravillosamente
    acopladas que no son posibles con REST.

    View full-size slide

  10. El nuevo chavo de la cuadra
    GraphQL es una manera completamente nueva de implementar y consumir Web
    APIs. Y, si se hace bien, se puede construir integraciones maravillosamente
    acopladas que no son posibles con REST.
    http://graphql.org/

    View full-size slide

  11. GraphQL: Origins

    View full-size slide

  12. GraphQL: Origins
    ● 2012: Facebook quiere re-construir sus apps móviles nativas

    View full-size slide

  13. GraphQL: Origins
    ● 2012: Facebook quiere re-construir sus apps móviles nativas
    ● Existen diferencias entre cómo se guarda el contenido y cómo se desea
    mostrar (news feed?)

    View full-size slide

  14. GraphQL: Origins
    ● 2012: Facebook quiere re-construir sus apps móviles nativas
    ● Existen diferencias entre cómo se guarda el contenido y cómo se desea
    mostrar (news feed?)
    ● ¿Grafos? Así no se almacena ¯\_(ツ)_/¯

    View full-size slide

  15. GraphQL: Origins
    ● 2012: Facebook quiere re-construir sus apps móviles nativas
    ● Existen diferencias entre cómo se guarda el contenido y cómo se desea
    mostrar (news feed?)
    ● ¿Grafos? Así no se almacena ¯\_(ツ)_/¯
    ● ¿Grafos con REST?

    View full-size slide

  16. GraphQL: Origins
    ● 2012: Facebook quiere re-construir sus apps móviles nativas
    ● Existen diferencias entre cómo se guarda el contenido y cómo se desea
    mostrar (news feed?)
    ● ¿Grafos? Así no se almacena ¯\_(ツ)_/¯
    ● ¿Grafos con REST?
    ● ¿En móviles?

    View full-size slide

  17. GraphQL: Origins
    ● 2012: Facebook quiere re-construir sus apps móviles nativas
    ● Existen diferencias entre cómo se guarda el contenido y cómo se desea
    mostrar (news feed?)
    ● ¿Grafos? Así no se almacena ¯\_(ツ)_/¯
    ● ¿Grafos con REST?
    ● ¿En móviles?
    Solución: obtener la data desde la perspectiva de los diseñadores de
    producto y desarrolladores

    View full-size slide

  18. Grafo
    Película
    How to Lose a
    Guy in 10 Days
    Name
    Director
    Director
    Name
    Donald Petrie

    View full-size slide

  19. Grafo + RootQuery
    Película
    How to Lose a
    Guy in 10 Days
    Name
    Director
    Director
    Name
    Donald Petrie
    Root
    Query
    movieById(id: 12345)

    View full-size slide

  20. Principios del diseño

    View full-size slide

  21. Principios del diseño
    ● Es de naturaleza jerárquico, eso quiere decir que podemos seguir las
    relaciones entre objetos de manera natural. Y esto se acerca a como
    comúnmente pensamos en nuestras interfaces.

    View full-size slide

  22. Principios del diseño
    ● Es de naturaleza jerárquico, eso quiere decir que podemos seguir las
    relaciones entre objetos de manera natural. Y esto se acerca a como
    comúnmente pensamos en nuestras interfaces.
    ● Es fuertemente tipado, cada nivel en un query corresponde a un tipo, y cada
    tipo define un set de campos (propiedades). Esto permite dar errores más
    descriptivos antes de ejecutar un query.

    View full-size slide

  23. Principios del diseño
    ● Es de naturaleza jerárquico, eso quiere decir que podemos seguir las
    relaciones entre objetos de manera natural. Y esto se acerca a como
    comúnmente pensamos en nuestras interfaces.
    ● Es fuertemente tipado, cada nivel en un query corresponde a un tipo, y cada
    tipo define un set de campos (propiedades). Esto permite dar errores más
    descriptivos antes de ejecutar un query.
    ● Es libre de versionamiento dado que los clientes hacen en el query
    exactamente la data que necesitan, se pueden añadir campos sin
    preocupación de romper algo o hacer las respuestas más pesadas.

    View full-size slide

  24. Conceptos
    ● Los tipos, y los campos
    (propiedades) en dichos tipos
    ● Los tipos escalares que incluye
    son:
    ○ Int
    ○ Float
    ○ String
    ○ Boolean
    ○ ID
    ● Se pueden definir escalares
    personalizados

    View full-size slide

  25. Pros
    ● Menos “overhead” de red

    View full-size slide

  26. Pros
    ● Menos “overhead” de red
    ● Esquema fuertemente tipado

    View full-size slide

  27. Pros
    ● Menos “overhead” de red
    ● Esquema fuertemente tipado
    ● Encaja muy bien con data “tipo
    grafo”

    View full-size slide

  28. Pros
    ● Menos “overhead” de red
    ● Esquema fuertemente tipado
    ● Encaja muy bien con data “tipo
    grafo”
    ● No obliga a tener un motor de
    almacenamiento en específico

    View full-size slide

  29. Pros
    ● Menos “overhead” de red
    ● Esquema fuertemente tipado
    ● Encaja muy bien con data “tipo
    grafo”
    ● No obliga a tener un motor de
    almacenamiento en específico
    ● Se obtiene lo que se pide

    View full-size slide

  30. Pros
    ● Menos “overhead” de red
    ● Esquema fuertemente tipado
    ● Encaja muy bien con data “tipo
    grafo”
    ● No obliga a tener un motor de
    almacenamiento en específico
    ● Se obtiene lo que se pide
    ● Introspección

    View full-size slide

  31. Pros
    ● Menos “overhead” de red
    ● Esquema fuertemente tipado
    ● Encaja muy bien con data “tipo
    grafo”
    ● No obliga a tener un motor de
    almacenamiento en específico
    ● Se obtiene lo que se pide
    ● Introspección
    ● No hay versionamiento

    View full-size slide

  32. ● Más complejo (que una
    solución REST)
    Cons

    View full-size slide

  33. Cons
    ● Más complejo (que una
    solución REST)
    ● Caching

    View full-size slide

  34. Cons
    ● Más complejo (que una
    solución REST)
    ● Caching
    ● Versioning

    View full-size slide

  35. Cons
    ● Más complejo (que una
    solución REST)
    ● Caching
    ● Versioning
    ● Todavía muy “temprano”

    View full-size slide

  36. Cons
    ● Más complejo (que una
    solución REST)
    ● Caching
    ● Versioning
    ● Todavía muy “temprano”
    ● Expuesto para queries
    arbitrarios

    View full-size slide

  37. Cons
    ● Más complejo (que una
    solución REST)
    ● Caching
    ● Versioning
    ● Todavía muy “temprano”
    ● Expuesto para queries
    arbitrarios
    ● Modelar side-effects (o
    “controllers”)

    View full-size slide

  38. Cons
    ● Más complejo (que una
    solución REST)
    ● Caching
    ● Versioning
    ● Todavía muy “temprano”
    ● Expuesto para queries
    arbitrarios
    ● Modelar side-effects (o
    “controllers”)
    ● Monitoreo con herramientas
    existentes

    View full-size slide