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.

This talk has been presented at Node Congress 2024, check out the latest edition of this JavaScript Conference.

Nikolas Burk
Nikolas Burk
10 min
04 Apr, 2024

Comments

Sign in or register to post your comment.

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.

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.

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

Repensando las Estrategias de Agrupación
React Day Berlin 2023React Day Berlin 2023
32 min
Repensando las Estrategias de Agrupación
The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.
Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
Cargadores de datos: Mejorando la obtención de datos en Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Cargadores de datos: Mejorando la obtención de datos en Vue
Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.
Construyendo el Generador de Código de Widgets de Figma
React Advanced Conference 2022React Advanced Conference 2022
19 min
Construyendo el Generador de Código de Widgets de Figma
This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

Workshops on related topic

Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.
Construye aplicaciones similares a React para herramientas internas 10 veces más rápido con Retool
JSNation Live 2021JSNation Live 2021
86 min
Construye aplicaciones similares a React para herramientas internas 10 veces más rápido con Retool
Workshop
Chris Smith
Chris Smith
La mayoría de las empresas tienen que construir software personalizado e interfaces a medida para sus datos con el fin de impulsar procesos internos como extensiones de prueba de usuario, reembolsos, gestión de inventario, administración de usuarios, etc. Estas aplicaciones tienen requisitos únicos y a menudo, resolver el problema rápidamente es más importante que la apariencia. Retool facilita a los desarrolladores de JavaScript construir rápidamente aplicaciones similares a React para herramientas internas utilizando interfaces de API y base de datos preconstruidas, así como componentes de interfaz de usuario reutilizables. En este masterclass, repasaremos cómo algunas de las empresas de más rápido crecimiento están haciendo herramientas internas y construiremos algunas aplicaciones simples para explicar cómo Retool funciona a partir de tus conocimientos existentes de JavaScript y ReactJS para permitir la construcción rápida de herramientas.
Prerrequisitos:Una cuenta de prueba gratuita en Retool.comAlgunos conocimientos básicos de JavaScript y bases de datos SQL/NoSQL
Enlace útil de Retool: https://docs.retool.com/docs