Cómo no(!) construir aplicaciones en tiempo real

Rate this content
Bookmark

¿Estás construyendo una aplicación de chat, una forma de ver el estado en línea de los usuarios o un panel de colaboración en tiempo real?

Todos estos casos de uso tienen algo en común: de alguna manera, la aplicación que ve el usuario necesita ser informada en tiempo real sobre los eventos que ocurren en el backend de tu aplicación.

En esta charla, analizaremos de cerca enfoques comunes como el polling, las actualizaciones a nivel de aplicación y los sistemas de publicación-suscripción. Explicaremos las compensaciones de cada enfoque y explicaremos por qué otro enfoque, llamado Change Data Capture (CDC), es la forma más elegante y robusta de lograr esto.

Nikolas Burk
Nikolas Burk
10 min
04 Apr, 2024

Video Summary and Transcription

La charla de hoy analiza diferentes enfoques para implementar actualizaciones en tiempo real en aplicaciones del lado del servidor, incluyendo actualizaciones a nivel de aplicación y polling. Las desventajas del polling incluyen ineficiencia y complejidad a gran escala. Agregar infraestructura adicional, como sistemas de mensajería, puede garantizar la escalabilidad pero introduce una sobrecarga operativa. Prisma Pulse es un sistema que simplifica el cambio de captura de datos, proporcionando una configuración fácil para suscribirse a los cambios en la base de datos y resolver problemas de escalabilidad.

Available in English

1. Arquitecturas de Aplicaciones en Tiempo Real

Short description:

¡Hola a todos! Hoy discutiré diferentes enfoques para implementar actualizaciones en tiempo real en el lado del servidor de una aplicación en tiempo real. El primer enfoque son las actualizaciones a nivel de aplicación, donde el servidor de la aplicación se encarga de todo. Sin embargo, este enfoque no escala horizontalmente y sufre del problema de escritura dual. Otro enfoque es la consulta periódica, donde el servidor de la API solicita periódicamente actualizaciones a la base de datos. Este enfoque consume muchos recursos debido al alto número de consultas. Vamos a explorar estos enfoques en detalle.

¡Hola y bienvenidos a todos a mi charla de hoy sobre cómo no construir aplicaciones en tiempo real! Mi nombre es Nikolas Berg. Trabajo como defensor del desarrollador en Prisma, donde nos enfocamos en la experiencia del desarrollador para aquellos que trabajan con bases de datos. Hoy los llevaré en un viaje donde, primero, estableceremos el escenario sobre la arquitectura de una aplicación en tiempo real. Luego hablaré sobre tres enfoques diferentes para implementar actualizaciones en tiempo real en el lado del servidor y sus compensaciones. Y luego sacaremos algunas conclusiones. Así que empecemos y asumamos que están en una entrevista de trabajo y esta es su entrevistadora. Y esta es la pregunta que les hace. ¿Cómo diseñarían una aplicación de chat en tiempo real? Bueno, si son como yo, probablemente comenzarán hablando sobre este diagrama de arquitectura de tres niveles y que en el frontend usarán WebSockets para crear conexiones permanentes entre los clientes de la API, entre el navegador y los servidores de la API. Pero mi charla de hoy se trata realmente de la segunda parte, sobre la conexión entre el servidor de la API y la base de datos y cómo implementar actualizaciones en tiempo real allí. Entonces, ¿cómo aprende el servidor de la API sobre cualquier cambio en la base de datos? Esa es la gran pregunta de hoy. Y quiero hablar sobre tres enfoques diferentes. El primero lo llamo actualizaciones a nivel de aplicación, luego hablaré sobre la consulta periódica y luego agregar infraestructura adicional. Con las actualizaciones a nivel de aplicación, realmente permiten que el servidor de la aplicación maneje todo. Y comprendamos rápidamente cómo funciona con un escenario simple aquí. Así que supongamos que tenemos esta aplicación de chat, tenemos tres usuarios conectados al servidor de la API, Alice, Bob y Jane, y tienen estas conexiones WebSocket al servidor de la API. Ahora, primero, supongamos que Alice envía un mensaje al servidor de la API, el servidor de la API almacena ese mensaje en la base de datos y luego el servidor de la API es responsable de transmitir ese mensaje a Bob y Jane. Entonces, ¿qué podría salir mal en ese escenario? Una vez que comencemos a ver un poco más de tráfico y queramos escalar nuestra aplicación y nuestros servidores de API horizontalmente, tendremos el problema de que Alice y Bob podrían estar conectados al primer servidor de API y Jane estaría conectada a la segunda instancia del servidor de API. Debido a que estas conexiones WebSocket son permanentes, Jane no recibirá la actualización del servidor de API cuando Alice envíe un mensaje. Entonces, este enfoque no escala horizontalmente. También tenemos el problema del llamado problema de escritura dual porque el servidor de la API necesita hacer dos cosas. Necesita almacenar los datos en la base de datos y necesita transmitir el mensaje a todos los clientes conectados. ¿Qué sucede si una de estas operaciones falla? Esta es una situación bastante complicada a la que volveré en un momento. Ahora revisemos rápidamente los pros y los contras de este enfoque de actualizaciones a nivel de aplicación. Los pros son que es bastante fácil de entender, no se necesita infraestructura adicional, pero el problema es que no es posible escalar esto horizontalmente y también se sufre del problema de escritura dual aquí. Así que veamos otro enfoque y eso es la consulta periódica. Con este enfoque, simplemente permitimos que el servidor de la API solicite periódicamente actualizaciones de la base de datos enviando la misma consulta a la base de datos una y otra vez. ¿Qué podría salir mal con este enfoque? El problema aquí es que consume muchos recursos. Supongamos que tenemos N usuarios y por usuario, tenemos M consultas periódicas. Esto se vuelve muy intensivo en recursos con N veces M consultas para cada intervalo de consulta.

2. Enfoques de Actualización en Tiempo Real: Consulta Periódica

Short description:

La consulta periódica es un enfoque ineficiente para las actualizaciones en tiempo real, ya que desperdicia recursos y se vuelve complejo de gestionar a gran escala. Los ingenieros deben buscar soluciones elegantes que aborden los desafíos planteados por el dominio empresarial.

Si estás consultando periódicamente cada par de milisegundos, eso es muy malo porque estás desperdiciando muchos recursos, muchas conexionesdatabase en el lado de la database, pero también en el lado del servidor de la API. Es muy costoso y no es realmente un buen enfoque para este problema. Veamos los pros y los contras. Todavía es bastante fácil de entender. Entonces, si no tienes mucho tráfico, no necesitas infraestructura adicional, es bastante fácil de implementar y no tienes el problema de escritura dual, lo cual es bastante beneficioso. Entonces no te encontrarás en un estado inconsistente con respecto a tus data. Sin embargo, los contras son que consume muchos recursos una vez que estásscaling a múltiples usuarios y la lógica de la aplicación para comparar también se vuelve compleja rápidamente porque cada vez que llegan los resultados de una consulta a la database, necesitas comparar eso con el estado actual de lo que se ha almacenado en la database anteriormente. Y eso también se vuelve realmente complicado. Y siendo honestos, creo que fundamentalmente la consulta periódica no es la herramienta adecuada para el trabajo cuando hablamos de actualizaciones en tiempo real. Creo que como ingenieros, debemos tener la ambición de encontrar soluciones elegantes a los problemas que el dominio empresarial en el que operamos nos plantea.

3. Enfoques de Actualización en Tiempo Real: Infraestructura Adicional

Short description:

Agregar infraestructura adicional, como sistemas de mensajería como Kafka o RabbitMQ, puede garantizar la escalabilidad. Sin embargo, la sobrecarga operativa y el problema de escritura dual lo hacen desafiante. La captura de datos de cambio proporciona una solución al permitir que la base de datos propague las actualizaciones al sistema de mensajería, asegurando un flujo de datos unidireccional. Sin embargo, la implementación de CDC es compleja y no es fácil de mantener.

Y realmente no creo que la consulta periódica califique aquí. Entonces, otro enfoque es agregar infraestructura adicional.

Puedes garantizar la escalabilidad utilizando sistemas de mensajería como Kafka o RabbitMQ. Nuevamente, veamos cómo funciona esto con un escenario simple de Alice, Bob y Jane nuevamente. Esta vez tenemos una cola de Kafka conectada a nuestro servidor de API y el primer paso es suscribirnos a un tema de Kafka. Luego recibimos el mensaje de saludo de Alice. El servidor de API escribe el mensaje en la base de datos y luego publica el evento en Kafka. A partir de ahí, recibe nuevamente el evento y luego puede transmitirlo a Bob y Jane.

Con este enfoque, resolvemos el problema de la escalabilidad horizontal que teníamos con las actualizaciones a nivel de aplicación. Pero la sobrecarga operativa de configurar y mantener infraestructura adicional es realmente notable. Y si has trabajado con Kafka antes, creo que sabes que no es el sistema más fácil de trabajar. Entonces, un segundo problema aquí sigue siendo el problema de escritura dual. Veamos un poco más en profundidad qué es esto realmente. Aquí vemos el código de cómo podría implementarse con Kafka cuando recibimos este mensaje de uno de nuestros usuarios.

En realidad, se refiere al primer paso que vimos en la secuencia anterior. El servidor de API recibe primero el mensaje y lo escribe en la base de datos, y luego lo envía al tema de Kafka al que van los mensajes de chat. Pero, ¿qué sucede si una de estas operaciones falla? Ahora te encuentras en un estado inconsistente porque tanto la base de datos ha almacenado datos que no han llegado a tus usuarios, o viceversa, tus usuarios están viendo datos que no están almacenados en la base de datos. De cualquier manera, es una situación muy indeseable y muy difícil de resolver. Por supuesto, podrías comenzar a implementar tu propia lógica de reintento o intentar envolver todo en una transacción, pero todo esto se vuelve muy complicado y también consume muchos recursos nuevamente.

Entonces, ¿cómo podemos resolver este problema a un nivel más profundo? Y la respuesta a eso es la captura de datos de cambio. La captura de datos de cambio es un patrón de diseño basado en la idea de un flujo de datos unidireccional. Y con eso, en realidad no es el servidor de API el que transmite las actualizaciones a nuestro sistema de mensajería, sino que estas actualizaciones se propagan directamente por la base de datos. Volvamos a recorrer el mismo escenario, pero esta vez utilizando un flujo de datos unidireccional y la captura de datos de cambio. Entonces, Alice nuevamente comienza enviando el mensaje al servidor de API y luego este lo almacena en la base de datos. Ahora la base de datos es responsable de publicar esta actualización en el sistema de mensajería. Y a partir de ahí, el servidor de API recibe la actualización del sistema de mensajería que estamos utilizando y puede transmitir el mensaje a todos los clientes suscritos. Ahora resolvemos de manera muy elegante este problema de los derechos duales y las posibles inconsistencias de datos cambiando la forma en que los datos fluyen a través de nuestro sistema. Entonces, ¿cuál es el inconveniente con CDC? Si tuviera que resumirlo, es realmente esto. Se vuelve complicado. Si quieres mantener y construir tu propio sistema de CDC, esto no es una tarea fácil.

4. Enfoques de Actualización en Tiempo Real: Prisma Pulse

Short description:

Prisma Pulse es un sistema que implementa CDC, proporcionando cambios de base de datos seguros en tu aplicación. Ofrece una configuración sencilla para suscribirse a los cambios de la base de datos y resuelve problemas de escalabilidad. La solución al problema de escritura dual es la captura de datos de cambio, pero implementarla y mantenerla puede ser un desafío. Prisma Pulse simplifica el uso de la captura de datos de cambio en tus aplicaciones.

Y si eres una startup o en general, un equipo de desarrollo que está realmente enfocado en brindar valor a tus usuarios, no creo que este sea el lugar donde quieras gastar tu tiempo. Así que lo que quiero recomendarte hoy es que pruebes Prisma Pulse. Prisma Pulse es un sistema que implementa CDC, la idea de un flujo de datos unidireccional basado en los trabajadores de Cloudflare, leyendo el registro de escritura anticipada de tu base de datos Postgres. Proporciona cambios de base de datos seguros en tu aplicación y es muy fácil de entender y configurar.

Así es como se ve la suscripción a los cambios de la base de datos utilizando Prisma Pulse. Solo tienes esta línea donde en la tabla de mensajes, llamas al método de suscripción y luego inicias este iterador asíncrono y esperas eventos que están ocurriendo en la tabla de mensajes de la base de datos.

Entonces, ¿qué debemos recordar de esta charla? Desplegar aplicaciones en tiempo real conlleva mucha complejidad y los enfoques ingenuos como las actualizaciones a nivel de aplicación y la consulta periódica simplemente no son suficientes. No escalan. Debes introducir infraestructura adicional como Apache Kafka para garantizar la escalabilidad, pero el problema de escritura dual, incluso entonces, es desagradable y difícil de superar. La solución elegante a este problema se llama captura de datos de cambio, pero también es difícil de implementar, operar y mantener. Por lo tanto, Prisma Pulse te brinda la forma más fácil de usar la captura de datos de cambio en tus aplicaciones. Y eso es todo lo que tengo para ti hoy. Muchas 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

Rethinking Bundling Strategies
React Day Berlin 2023React Day Berlin 2023
32 min
Rethinking Bundling Strategies
We take a look at different challenges and decisions when bundling code for web applications. We look at how these are commonly solved and why we need to rethink them.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
Building Figma’s Widget Code Generator
React Advanced Conference 2022React Advanced Conference 2022
19 min
Building Figma’s Widget Code Generator
Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

Workshops on related topic

Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build Web3 apps with React
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
Build React-like apps for internal tooling 10x faster with Retool
JSNation Live 2021JSNation Live 2021
86 min
Build React-like apps for internal tooling 10x faster with Retool
Workshop
Chris Smith
Chris Smith
Most businesses have to build custom software and bespoke interfaces to their data in order to power internal processes like user trial extensions, refunds, inventory management, user administration, etc. These applications have unique requirements and often, solving the problem quickly is more important than appearance. Retool makes it easy for js developers to rapidly build React-like apps for internal tools using prebuilt API and database interfaces as well as reusable UI components. In this workshop, we’ll walk through how some of the fastest growing businesses are doing internal tooling and build out some simple apps to explain how Retool works off of your existing JavaScript and ReactJS knowledge to enable rapid tool building.
Prerequisites:A free Retool.com trial accountSome minimal JavaScript and SQL/NoSQL database experience
Retool useful link: https://docs.retool.com/docs