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

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
Damos un vistazo a diferentes desafíos y decisiones al agrupar código para aplicaciones web. Observamos cómo se resuelven comúnmente estos y por qué necesitamos repensarlos.
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
Introducción al Diseño Dirigido por Dominio- ¿Qué es DDD?- Principios clave de DDD- Beneficios de usar DDD en el desarrollo de aplicaciones webModelado de Dominio en Aplicaciones Vue 3- Cómo diseñar e implementar modelos de dominio en Vue 3- Estrategias para integrar la lógica de dominio con el modelo de datos reactivo de Vue y la arquitectura basada en componentesMejores Prácticas para Implementar DDD en Vue 3- Estrategias para organizar el código de una manera que siga los principios de DDD- Técnicas para reducir el acoplamiento entre la lógica de dominio y la lógica de la aplicación- Consejos para probar y depurar la lógica de dominio en las aplicaciones Vue 3
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
Por lo general, crear aplicaciones web y móviles requiere diferentes conjuntos de tecnologías, y es bastante difícil compartir código. Esta charla mostrará cómo agregué una aplicación web de React y una aplicación móvil de React Native en el mismo monorepo utilizando Nx, y cómo optimicé el intercambio de código entre la aplicación web de React y la aplicación móvil de React Native.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
El desarrollo de aplicaciones web ha tenido muchos cambios a lo largo de la vida de la web. Desde aplicaciones del lado del servidor con un toque de JavaScript hasta aplicaciones de una sola página construidas completamente con JavaScript. Ahora estamos volviendo a donde muchos nuevos frameworks web se construyen primero de forma estática, con JavaScript agregado según sea necesario. Esta charla cubre la construcción de aplicaciones web con JavaScript a través de la lente de Astro, un generador de sitios estáticos donde la elección del framework de JavaScript es única para ti.
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
Los widgets son objetos personalizados e interactivos que se colocan en un archivo de Figma o Figjam para ampliar la funcionalidad y hacer todo un poco más divertido. Se escriben en un estilo declarativo similar a los componentes de React, que se traduce para convertirse en un nodo en el lienzo. ¿Entonces se puede hacer lo contrario, del lienzo al código? ¡Sí! Discutiremos cómo utilizamos la API pública de complementos de Figma para generar código de widgets a partir de un archivo de diseño y crearemos un widget funcional juntos utilizando esto.
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
La obtención de datos es una parte crítica de las aplicaciones web modernas. Es un problema complejo que ha sido (parcialmente) resuelto de muchas formas diferentes. En esta charla, exploraremos la nueva API de Cargadores de Datos para Vue Router, cómo se compara con las soluciones existentes y cómo puede simplificar en gran medida la obtención de datos en tus aplicaciones Vue.

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