Volteando la Nube al Revés

Rate this content
Bookmark

GraphQL se está utilizando de formas realmente interesantes en partes del ecosistema de desarrolladores que te sorprendería escuchar, incluyendo Ethereum, así como para construir gráficos completos a partir de diversas APIs de terceros. En esta charla, mostraré cómo utilizar un enfoque similar para construir una interfaz de programación en la nube en AWS con GraphQL y por qué utilizar este enfoque tiene sentido para un desarrollador de front-end que busca aprovechar sus habilidades existentes.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

GraphQL es un lenguaje de consulta y manipulación de datos para APIs que ofrece beneficios como validación de tipos, eficiencia en las consultas y autodocumentación a través de la introspección de esquemas. Es utilizado ampliamente por su flexibilidad y eficiencia al permitir a los desarrolladores solicitar exactamente los datos que necesitan.

Para implementar GraphQL en la nube, se puede utilizar una representación de esquema GraphQL que permite manejar las operaciones de forma eficiente a través de un único punto final. Las implementaciones suelen utilizar WebSockets para suscripciones y se pueden adaptar a diversas arquitecturas de microservicios.

GraphQL ofrece múltiples ventajas como la eficiencia en la consulta de datos, la capacidad de obtener exactamente lo que se necesita en una sola solicitud y la autodocumentación de las APIs. Estas características lo hacen preferible frente a las API REST tradicionales que suelen requerir múltiples endpoints y pueden resultar menos flexibles.

Implementaciones notables de GraphQL incluyen su uso como puerta de enlace de API en arquitecturas de microservicios, integración con APIs de terceros como las ofrecidas por One Graph, y aplicaciones en la industria blockchain utilizando tecnologías como Ethereum para facilitar el acceso y manipulación de datos descentralizados.

GraphQL unifica diferentes servicios y APIs detrás de un único punto final de consulta, lo que simplifica la integración y manejo de datos provistos por múltiples fuentes. Esto es particularmente útil en arquitecturas de microservicios donde diferentes servicios pueden ser consultados de manera coherente y eficiente.

AWS AppSync es un servicio de GraphQL administrado que facilita la creación de APIs GraphQL escalables y seguras en la nube de AWS. Ofrece características como suscripciones en tiempo real, sincronización de datos y control de acceso integrado, aprovechando las ventajas de GraphQL para desarrollar aplicaciones más dinámicas y eficientes.

Nader Dabit
Nader Dabit
36 min
14 May, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy discute cómo voltear la nube al revés utilizando GraphQL, destacando sus beneficios como validación de tipos, capacidades en tiempo real y eficiencia de consultas. Explora el uso de GraphQL como una puerta de enlace de API, especialmente en el contexto de microservicios, APIs de terceros y blockchain. La charla también cubre la indexación eficiente y la integración en la nube ofrecida por GraphQL, así como la construcción de APIs en la nube con AWS utilizando API Gateway y AWS AppSync. Concluye con ideas sobre cómo implementar APIs de GraphQL con herramientas como Amplify y CDK, y cómo crear APIs de GraphQL respaldadas por Lambda y DynamoDB.
Available in English: Turning the Cloud Inside Out

1. Introducción a GraphQL y Programación en la Nube

Short description:

Hoy voy a hablar sobre cómo convertir la nube del revés, creando una interfaz de programación en la nube con GraphQL. Vamos a empezar hablando de por qué GraphQL, por qué la gente está usando GraphQL y el estado actual del ecosistema de GraphQL. Vamos a ver cómo implementar lo que estoy hablando en la nube y darle la vuelta a la nube con una representación de esquema GraphQL. Y luego vamos a ver un poco de código. GraphQL es un lenguaje de consulta y manipulación de datos de código abierto para APIs y un tiempo de ejecución para cumplir consultas con datos existentes. Proporciona beneficios como la validación y comprobación de tipos, capacidades en tiempo real y eficiencia de consultas a través de un único punto final.

Hoy voy a hablar sobre cómo convertir la cloud del revés, creando una interfaz de programación en la cloud con GraphQL. Esto es mi enfoque como desarrollador front-end al construir aplicaciones en la cloud utilizando GraphQL con AWS y las cosas que he aprendido en los últimos años cuando trabajaba en AWS.

Entonces, ¿quién soy yo? Mi nombre es Nader Dhabit. Actualmente acabo de empezar a trabajar en una nueva empresa llamada Edge and Node. Edge and Node crea y soporta protocolos, aplicaciones y dApps en el ecosistema Web 3 y DeFi. Si estás interesado en saber más sobre lo que estoy haciendo ahora, contáctame en Twitter, dhabit3. También soy desarrollador web y móvil de profesión. Hago mucha enseñanza, escribo mucho y contribuyo bastante al código abierto.

Entonces, ¿cómo se va a dividir esta charla? Primero vamos a hablar de por qué GraphQL, por qué la gente está usando GraphQL y el estado actual del ecosistema de GraphQL. Vamos a hablar de la filosofía detrás de algunas de las cosas que voy a presentar hoy. Luego vamos a ver cómo implementar lo que estoy hablando en la cloud y darle la vuelta a la cloud con una representación de esquema GraphQL. Y luego vamos a ver un poco de código.

Así que empecemos hablando de GraphQL. No voy a hablar de qué es GraphQL en el sentido de la tecnología y cómo funciona. En su lugar, voy a hablar más sobre los beneficios de por qué la gente podría usar GraphQL, así como dónde se encuentra actualmente en el ecosistema. GraphQL es un lenguaje de consulta y manipulación de datos de código abierto para APIs y un tiempo de ejecución para cumplir consultas con datos existentes. A estas alturas probablemente hayas oído mucho sobre GraphQL, así que no quiero aburrirte con muchos detalles aquí. Solo piensa en GraphQL como una especie de reemplazo u otra opción además de Rust. Vamos a hablar de algunos de los beneficios. Estos son beneficios conocidos, pero también un poco de mi perspectiva sobre por qué me gusta GraphQL y por qué he visto a mucha gente adoptándolo, especialmente cuando trabajaba en... Validación de tipos. Obtiene validación y comprobación de tipos de forma nativa. Esto funciona muy bien con muchas de las aplicaciones que estoy construyendo en estos días con cosas como TypeScript y Dart con Flutter. El tiempo real es parte de la especificación real. En lugar de tener que decidir si quieres implementar WebSockets, polling, servidores y eventos, GraphQL normalmente tiene una especificación sobre cómo puedes hacer esto. Los detalles de implementación dependen de ti, pero mucha gente suele utilizar WebSockets para implementar suscripciones. Como desarrollador front-end, realmente no necesito entender los detalles de implementación de nadie bajo el capó. Facilita el cambio entre APIs y entender cómo funciona la parte de tiempo real. Eficiencia de consultas, terminas con un único punto final de GraphQL, pero con ese punto final de GraphQL puedes enviar tantas solicitudes como desees en una sola solicitud. De esto se derivan algunas cosas.

2. Beneficios de GraphQL y Aprender una vez

Short description:

GraphQL te permite enviar múltiples operaciones en una sola solicitud, evitando el sobreconsumo y el subconsumo. También genera automáticamente documentación de API a través de la introspección. Aprender GraphQL permite a los desarrolladores sumergirse en cualquier API y ser inmediatamente productivos. GraphQL proporciona consistencia y eficiencia, similar a la capacidad de React para construir diversas aplicaciones. Permite a los desarrolladores ser eficientes en diferentes capas sin tener que aprender nuevas tecnologías.

En primer lugar, si quiero tal vez hacer un evento de carga propio cuando mi aplicación se carga, puedo enviar múltiples operaciones en una sola operación GraphQL. Así que puedo decir consultar los datos del usuario, tal vez consultar los datos de los productos para una tienda de comercio electrónico que no voy a renderizar en la página. Incluso puedo obtener datos del carrito de compras que necesito. Todo esto se puede enviar en una sola solicitud en lugar de múltiples solicitudes. Pero también evita el sobreconsumo y el subconsumo en el sentido de que una vez que hayas construido tus consultas y mutaciones de GraphQL, supongo que en este caso serían consultas, puedes pedir exactamente los datos que deseas sin tener que escribir ningún código adicional en el backend. Entonces, para una aplicación que tiene múltiples vistas, tal vez algo que tiene una interfaz web también como una interfaz móvil, en lugar de tener que escribir diferentes puntos finales de API, puedes tener un único punto final de API, obtener los datos más ligeros en la aplicación móvil y luego los datos más pesados en la aplicación web, y todo funciona sin tener que escribir más código.

Una cosa realmente genial de GraphQL es que se documenta automáticamente. Genera automáticamente la documentación de tu API. Esto se hace utilizando la introspección de GraphQL. La introspección es esencialmente la capacidad de consultar qué recursos están disponibles en el esquema de la API actual, y una vez que se te da la API a través de la introspección, puedes ver las consultas, tipos, campos y directivas que admite. Una de las cosas importantes que voy a destacar en esta charla hoy es la consistencia. Para mí, una gran cosa al construir software y aprender a ser un desarrollador eficiente y bueno, para mí y mi career, ha sido encontrar cosas que me permitan aprender una vez y usar en múltiples lugares y ser eficiente. Por ejemplo, una de esas cosas es React. Como desarrollador de React, aprendo React, ahora puedo construir aplicaciones web, pero también puedo construir aplicaciones móviles aplicaciones de escritorio, todo tipo de cosas que la gente hace con React. Alguien, ya sabes, está presentando cómo construir, ya sabes, no solo diapositivas, sino en un software de edición de videos, cosas así. Aprendes React, haces muchas cosas. GraphQL, lo agrupo de una manera similar en el sentido de que una vez que aprendes GraphQL, puedes sumergirte en la API de cualquier persona, no solo dentro de tu propia empresa, sino dentro de cualquier empresa. Entonces, si te vas, te unes a otra empresa, sabes cómo usar GraphQL, puedes ser inmediatamente productivo. Miras el gráfico, sabes lo que está pasando. Pero lo que es aún más interesante son algunas de las cosas que voy a ver y mostrar en un momento en el que las personas están implementando estas implementaciones más grandes y más interesantes de gráficos y diferentes ecosistemas, y yo como desarrollador de GraphQL, en realidad puedo ir y ser muy, muy eficiente en esas diferentes capas sin tener que aprender nada. Y esto es algo que tuiteé hace poco tiempo, GraphQL, aprende una vez, crea, lee, actualiza, elimina y suscríbete en cualquier lugar. Es una especie de juego con React, aprende una vez, escribe en cualquier lugar o algo así. Lo siento, eso fue React Native. En general, es la misma idea.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.