De Cero a Construir Aplicaciones GraphQL Multi-Región

Rate this content
Bookmark

Últimamente, las cargas de trabajo de GraphQL están siendo ampliamente adoptadas en cargas de trabajo empresariales, ya que GraphQL proporciona una forma consistente y flexible para que la interfaz de usuario consuma datos de las API. Para desarrolladores de API como yo, ver cómo los servidores GraphQL abstraen el filtrado de datos y los patrones de acceso asociados con las API backend es un cambio de paradigma completo. ¿Las tareas tradicionales de diseño de API, como el modelado de datos y los patrones de acceso necesarios para implementar API de datos de alto rendimiento, siguen siendo relevantes al implementar aplicaciones GraphQL?

Esta charla te guiará a través de los aprendizajes como desarrollador de API backend al construir una aplicación GraphQL de hola mundo para implementar una API GraphQL distribuida globalmente para una aplicación de comercio electrónico del mundo real. Analizaremos la escalabilidad y la resiliencia necesarias para construir API GraphQL de alto rendimiento. También veremos cómo las capacidades de la base de datos desempeñan un papel esencial en la implementación de una aplicación GraphQL exitosa.

8 min
02 Jul, 2021

Video Summary and Transcription

GraphQL está ganando una rápida adopción, brindando autonomía a los desarrolladores de UX para recuperar solo los datos que necesitan. El uso de suscripciones GraphQL permite actualizaciones en tiempo real sin la necesidad de consultar constantemente los datos. Estas características fueron evaluadas en casos de uso del mundo real como comercio electrónico y sistemas de gestión de pedidos.

Available in English

1. Introducción a GraphQL y Evaluación

Short description:

Soy un ingeniero de software en UgerbyteDB, una empresa de SQL distribuida. GraphQL está ganando una rápida adopción, brindando autonomía a los desarrolladores de UX para recuperar solo los datos que necesitan. Queríamos entender los conceptos del lado del servidor de la arquitectura de GraphQL y su compatibilidad con el desarrollo de API REST. Evaluamos su rendimiento y facilidad de producción utilizando casos de uso del mundo real como el comercio electrónico. Probamos el uso de las capacidades nativas de la base de datos del servidor GraphQL y su capacidad para manejar el tráfico variable. Comenzamos con una tabla simple, el catálogo de productos, y luego pasamos a un conjunto de datos más complejo, la clasificación de productos.

Hola a todos, gracias por unirse, mi nombre es Nikhil Chandrappa, soy un ingeniero de software en UgerbyteDB, somos una empresa de SQL distribuida. Trabajo en el equipo de controladores y ecosistema de UgerbyteDB, donde construimos integraciones con herramientas populares para desarrolladores. Últimamente estamos viendo mucho interés en nuestra comunidad y también de nuestros usuarios para construir soporte de primera clase para GraphQL. Si haces una búsqueda rápida en Google Trends, verás que GraphQL está ganando una rápida adopción. Para los desarrolladores de UX, GraphQL brinda autonomía para crear los datos, pueden recuperar solo los datos que necesitan. Para nosotros, como empresa de base de datos, y también en nuestro trabajo diario con los desarrolladores de backend y los desarrolladores de API, tenía sentido para nosotros entender los conceptos del lado del servidor de la arquitectura de GraphQL. El servidor de GraphQL proporciona una abstracción sobre la base de datos para crear y mutar los datos y también algunas otras características avanzadas como paginación, filtrado, eventos. Queríamos ver cómo todas estas cosas encajan con el desarrollo general de API REST que generalmente vemos. Entonces, un desarrollador de API entendería el dominio comercial. Él crea los objetos de dominio. Implementa todos los patrones de acceso a su alrededor. Queríamos ver cómo se ve todo esto en el servidor de graphQL. Para eso, queríamos usar un caso de uso del mundo real. Consideramos el dominio del comercio electrónico, que es bien conocido. Y también presenta desafíos tanto para los desarrolladores de UX, donde tenían que construir una experiencia inmersiva y atractiva como para los desarrolladores de API, donde tenían que manejar o implementar las API para la aleatoriedad del tráfico. Porque no siempre es constante. Escala en función del tráfico de usuarios, tienes que escalar tus API hacia arriba o hacia abajo y también las API deben estar disponibles todo el tiempo. Esta es una arquitectura general de microservicios que verás en aplicaciones de comercio electrónico. Tendrás un montón de microservicios expuestos como una API REST, y esta API REST será consumida por las aplicaciones de UI o los desarrolladores de UX para implementar aplicaciones de UX. Entonces, probablemente sea una venta rápida para ellos pasar a GraphQL en lugar de pasar por toda la documentación. Para nosotros, durante nuestra evaluación, queríamos ver qué tan bien el servidor de GraphQL puede utilizar las capacidades nativas de la base de datos. ¿Es eficiente o no? ¿Y qué tan fácil es llegar a producción, verdad? Para eso, primero queríamos usar una de nuestras tablas simples, el catálogo de productos. No tiene un patrón de acceso complejo. Obtienes el ID del producto en la solicitud y envías los detalles del producto de vuelta, ¿verdad? Fue una victoria rápida para nosotros. Si ves este objeto JSON complejo que se enviaba en la respuesta. Ahora, los clientes de Graphql son las aplicaciones de UX que solo pueden recuperar los datos que necesitan. Una vez que nos sumergimos en el agua y nos sentimos cómodos con las aplicaciones de Graphql. Entonces queríamos tener una tabla o conjunto de datos mucho más complejo que entrara en escena. Tomamos la clasificación de productos que tiene algunas cosas en marcha. Tienes que filtrar los datos según la categoría

2. Usando Suscripciones de GraphQL para Actualizaciones en Tiempo Real

Short description:

GraphQL simplifica el ciclo de retroalimentación entre el desarrollador de la API y los desarrolladores de UX. Proporciona soporte de primera clase para suscripciones, permitiendo actualizaciones en tiempo real sin la necesidad de una consulta constante de datos. Utilizamos suscripciones de GraphQL en nuestro sistema de gestión de pedidos para rastrear los pedidos de los usuarios y su estado, eliminando la necesidad de recuperar los datos manualmente.

y también ordenarlos según la clasificación. Entonces, parte de esto ocurre en la base de datos y algunas de estas filtraciones también ocurren en la capa de la API. Una cosa que entendimos rápidamente fue que cualquier operación CRUD en estas tablas es súper fácil y rápida. Esto conduce a una prototipación más rápida donde el desarrollador de UX no necesita estar en constante comunicación. A medida que agregamos más tablas, nos dimos cuenta de que construir todos estos mapeos de dominio y resolutores es una tarea compleja. No es algo que se pueda hacer rápidamente y tener un servidorGraphQL sólido. Pero ahí es donde queríamos cambiar y usar algunas de las implementaciones de servidor de código abierto populares de GraphQL que existen. Así que cambiamos a usar herramientas de código abierto. En nuestra investigación, descubrimos que todas estas herramientas tienen soporte de primera clase para suscripciones, ¿verdad? Soporte de primera clase incluso para sistemas basados en eventos utilizando suscripciones de GraphQL, queríamos usar eso. En nuestra segunda iteración, queríamos usar suscripciones de GraphQL. Las usamos en un sistema de gestión de pedidos donde queríamos rastrear todos los pedidos de los usuarios y su estado. Esto resuelve muchos problemas, ¿verdad? No tienes que consultar losdata constantemente, cada vez que haya una actualización de estado, recibirás una notificación. El siguiente paso para nosotros fue determinar si podía manejar la escala y los requisitos de nivel de servicio (SLA) que existían en la API. Para eso, realizamos pruebas de rendimiento de las suscripciones de GraphQL y pudimos escalar según los requisitos de SLA que necesitábamos, y estamos muy satisfechos con eso. Lo siguiente en una aplicación nativa de la nube es la resiliencia de las aplicaciones. ¿Puede funcionar sin problemas cuando se migra a la nube? Es esencial para nosotros, para ti y para todos nosotros construir una aplicación que no se caiga en caso de un corte de servicio o una interrupción en una región. Entonces, lo que hicimos a continuación fue implementar los servidores de GraphQL en un clúster de bases de datos que obtuvimos, donde pudimos realizar pruebas de resiliencia al eliminar una región o algunas máquinas en una región. Eso nos dio suficiente confianza para llevarlo a producción. Creemos que junto con GraphQL, que simplifica el ciclo de retroalimentación entre el desarrollador de la API y los desarrolladores de UX, se vuelve muy poderoso cuando puede aprovechar las capacidades de las aplicaciones nativas modernas de la nube. Eso es todo, amigos. Esa es toda la charla que tenía hoy. Si tienen alguna pregunta, no duden en hacerla en la sesión de preguntas y respuestas en vivo. Gracias.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Summit 2023React Summit 2023
145 min
React at Scale with Nx
Top Content
Featured WorkshopFree
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.