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. GraphQL

    View Slide

  2. /usr/bin/whoami

    View Slide

  3. /usr/bin/whoami
    # @cocafunes

    View Slide

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

    View Slide

  5. Preámbulo

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. 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 Slide

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

    View Slide

  11. 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 Slide

  12. 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 Slide

  13. Hello World

    View Slide

  14. Query

    View Slide

  15. GraphQL: Origins

    View Slide

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

    View 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?)

    View Slide

  18. 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 Slide

  19. 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 Slide

  20. 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 Slide

  21. 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 Slide

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

    View Slide

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

    View Slide

  24. Principios del diseño

    View Slide

  25. 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 Slide

  26. 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 Slide

  27. 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 Slide

  28. 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 Slide

  29. Pros
    ● Menos “overhead” de red

    View Slide

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

    View Slide

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

    View Slide

  32. 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 Slide

  33. 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 Slide

  34. 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 Slide

  35. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. 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 Slide

  42. 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 Slide

  43. Workshop

    View Slide