Skip to content

Latest commit

 

History

History
327 lines (220 loc) · 5.34 KB

deck.mdx

File metadata and controls

327 lines (220 loc) · 5.34 KB
Raw

import { Notes } from 'mdx-deck' export { components } from "mdx-deck-code-surfer" import GraphQLBurger from "./components/GraphQLBurger" import FullWidth from "./components/FullWidth"; import BookLogo from "./components/BookLogo"; import Playground from "./components/Playground";

Fullstack GraphQL

<img style={{ position: "relative", width: "50vw", height: "50vh" }} src='./components/graphql-logo.svg' />

Hola 👋

Sobre mi

Por qué GraphQL?

✨ Experiencia de desarrollo ✨

  • 📖 Documentación automática
  • 🎮 Control sobre payload
  • 🔢 Versionado
  • 🛠 Herramientas desarrollo

Por qué GraphQL?

  • 🌪 Consumir APIs es difícil
  • ⚡ Errores, tiempo, pérdida de clientes
  • ☀️ GraphQL ofrece excelente experiencia de desarrollo
  • 👩‍💻 Empresas con clientes desarrolladores
  • ⚡ Empresas buscando eficiencia de desarrollo
  • 📱 Aplicaciones mobile

Empresas que usan GraphQL

Companies using GraphQL

Qué es GraphQL?

🔎 Lenguaje de consulta para tu API

query -> JSON

✨ Excelente experiencia de desarrollo ✨

  • 📖 Documentación automática
  • 🎮 Control sobre payload
  • 🔢 Versionado
  • 🛠 Herramientas desarrollo

📖 Documentación automática

  • 🌪 APIs REST son dificiles de documentar
  • ⚡ Dificil comunicación entre equipo cliente y servidor
  • ☀️ APIs GraphQL proveen documentación automática
  • 💡 Descripción de datos completa y entendible mejora productividad

🎮 Control sobre payload

  • 🌪 APIs REST determinan la forma de los datos en cada endpoint
  • ⚡ Esto puede ocasionar pedidos con información innecesaria
  • ☀️ APIs GraphQL permiten a los clientes pedir exactamente lo que necesitan
  • 💡 Aplicaciones mas eficientes. Payloads menores y menos requests

🔢 Versionado

  • 🌪 APIs REST usan versionado para ofrecer nuevos features
  • ⚡ Mantener las diferentes versiones de una API y comunicar los cambios es una tarea dificil
  • ☀️ GraphQL facilita evolucionar APIs a través del tiempo
  • 💡 Evitás breaking changes porque clientes piden exactamente lo que quieren
* Sin embargo cualquier cambio en una API REST es un breaking change * no mas /api/v1 
type Pelicula {
  titulo: String
  episodio: Int
  fechaEstreno: String



}
type Pelicula {
  titulo: String
  episodio: Int
  fechaEstreno: String
  introduccion: String


}
----
5
type Pelicula {
  titulo: String
  episodio: Int
  fechaEstreno: String
  introduccion: String
  director: String

}
----
6

---

```graphql
type Pelicula {
  titulo: String
  episodio: Int
  fechaEstreno: String
  introduccion: String
  director: String
  dirigidaPor: Persona
}

type Persona {
  nombre: String
  dirigio: [Pelicula]
  actuoEn: [Pelicula]
}
----
6:14
type Pelicula {
  titulo: String
  episodio: Int
  fechaEstreno: String
  introduccion: String
  director: String @deprecated
  dirigidaPor: Persona
}

type Persona {
  nombre: String
  dirigio: [Pelicula]
  actuoEn: [Pelicula]
}
----
6

🛠 Herramientas desarrollo

  • 🌪 APIs REST generalmente no siguen un estandard de modelado de datos
  • ⚡ Difícil generar herramientas que faciliten desarrollo
  • ☀️ APIs GraphQL exponen estructura interna

🛠 Herramientas desarrollo

  • ⚙ Clientes inteligentes
  • 🤖 Generación de código
  • 📊 Visualización

Cómo usar GraphQL?

Pinapp

1. Escribir/Leer datos

<img src="./public/images/chapter-1.png" style={{ height: "60vh" }} />

2. Diseñar esquema

<img src="./public/images/chapter-2.png" style={{ height: "60vh" }} />

3. Servidor NodeJS

<img src="./public/images/chapter-3.png" style={{ height: "60vh" }} />

4. Cliente React

<img src="./public/images/chapter-4.png" style={{ height: "60vh" }} />

5. Suscripciones

<img src="./public/images/chapter-5.png" style={{ height: "60vh" }} />

6. Testing

🙀

Conclusión

  • 🔎 Lenguaje de consulta para tu API
  • ✨ Experiencia de desarrollo ✨

Preguntas❓

🙏 Gracias 🙏

A su disposición

[email protected]

Enlaces útiles

Enlaces útiles