Desbloqueando el Potencial de Aplicaciones en Tiempo Real Basadas en Eventos con JavaScript

Rate this content
Bookmark

En el mundo digital acelerado de hoy, las aplicaciones en tiempo real basadas en eventos están en el corazón de ofrecer experiencias de usuario dinámicas y receptivas. Esta sesión profundizará en las complejidades técnicas y el inmenso potencial de construir tales aplicaciones usando JavaScript.

Juntos, exploraremos los conceptos básicos de la arquitectura basada en eventos (EDA) y su implementación en JavaScript. Los temas clave incluirán una visión técnica del event loop y la I/O no bloqueante, WebSockets y Message Brokers.

Continuaremos nuestro viaje con una mirada a cómo aplicar estas tecnologías en diferentes casos de uso, como flujos de datos en vivo y aplicaciones colaborativas, asegurando al mismo tiempo baja latencia y tolerancia a fallos.

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

Jarred Utt
Jarred Utt
20 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hola, soy Jerdot, un líder técnico en AWS Safegate. Hoy, hablaré sobre la arquitectura basada en eventos y los potenciales de los sistemas en tiempo real basados en eventos en JavaScript. Exploraremos los runtimes de JavaScript, el event loop y las colas involucradas. La arquitectura basada en eventos implica producir, detectar, consumir y reaccionar a eventos. Se utiliza en microservicios, sistemas IoT y procesamiento de datos en tiempo real. Herramientas como event emitters y WebSockets se utilizan para simplificar la construcción de aplicaciones basadas en eventos. La gestión de conexiones es crucial, y RabbitMQ y MQTT son brokers de mensajes populares. La optimización del rendimiento se puede lograr utilizando brokers de mensajes de alto rendimiento, desplegando productores y brokers cerca unos de otros, y considerando la tolerancia a fallos. El procesamiento de mensajes debe incluir el almacenamiento de mensajes hasta que se procesen con éxito, manejando eventos múltiples veces con efectos secundarios no deseados, y utilizando reintentos automáticos y colas de mensajes muertos para fallos transitorios.

1. Introduction to Event-Driven Architecture

Short description:

Hola, soy Jerdot, un líder técnico en AWS Safegate. Hoy, hablaré sobre la arquitectura dirigida por eventos y los potenciales de los sistemas en tiempo real dirigidos por eventos en JavaScript. Tengo experiencia en sistemas embebidos y desarrollo web. ¡Vamos a sumergirnos!

Hola, mi nombre es Jerdot, y soy un líder técnico en AWS Safegate trabajando en el software de control de Apron que aumenta el rendimiento, la seguridad y la sostenibilidad de los aeropuertos. Hoy voy a hablar sobre la arquitectura dirigida por eventos y algunos de los potenciales de tener sistemas en tiempo real dirigidos por eventos y JavaScript.

Fuera de mi trabajo en AWS Safegate, soy estadounidense, pero me mudé a Suecia hace cuatro años. Mi experiencia es principalmente en sistemas embebidos y desarrollo web. Y fuera de trabajar con computadoras, me gusta la producción musical, jugar a juegos de computadora, y jugar al golf.

Tenemos una agenda completa para hoy, y comenzaremos desde cero con algunos componentes en tiempo real de JavaScript, una pequeña introducción al bucle de eventos de JavaScript, una breve visión general de la arquitectura dirigida por eventos, emisores de eventos, WebSockets, RabbitMQ, MQTT, y luego qué significa llevar todas estas cosas a producción. Comencemos.

2. Exploring JavaScript Runtimes and the Event Loop

Short description:

JavaScript es en realidad sincrónico, bloqueante y de un solo hilo, pero diferentes entornos de ejecución permiten operaciones asincrónicas. Hoy nos centraremos en Node.js, que tiene componentes de tiempo de ejecución como el motor V8 y LibUV. Node.js tiene una configuración simple con una Memory Deep y una pila de llamadas. Exploraremos ejemplos de ejecución de código sincrónico y asincrónico y entenderemos el papel del bucle de eventos.

Entonces JavaScript. Mucha gente piensa muchas cosas diferentes, que no es bloqueante, y que es async I.O., pero esa no es la naturaleza del JavaScript real. Como lenguaje, es en realidad sincrónico, bloqueante y de un solo hilo. Pero hay diferentes entornos de ejecución que nos permiten hacer cosas asincrónicas que tienen un rendimiento variado en JavaScript, tanto en el navegador como en el servidor.

Hoy me centraré principalmente en Node.js, pero la mayoría de los entornos de ejecución tienen el mismo tipo de herramientas con diferentes nombres y comportamientos ligeramente diferentes. Algunos de los componentes de tiempo de ejecución en Node son el motor V8, LibUV, Crypto. Hay muchas características integradas en C++ para ayudarte a acceder a sistemas de archivos y redes. Y también hay esta amplia biblioteca de JavaScript que te permite usar características de C++ directamente desde JavaScript.

Así que cuando miro Node.js, se ve algo así. Y durante el tiempo de ejecución, tenemos una configuración bastante simple. Tenemos una Memory Deep, donde tenemos todas nuestras variables y funciones declaradas, todo sucediendo allí, y tenemos nuestra pila de llamadas. Las funciones en cola se empujan a la pila de llamadas, y cuando una función devuelve, se saca de la pila de llamadas. Esto es bastante simple, una cola de último en entrar, primero en salir. Veremos algunos ejemplos cortos. Tenemos un código realmente, realmente complicado aquí en la parte superior izquierda. A la derecha, tenemos nuestro tiempo de ejecución, y en la parte inferior izquierda, tenemos una salida de consola. Si comenzamos a recorrer este código, veremos que la primera función entra en la pila de llamadas. Esto se ejecuta, y obtenemos los resultados en la consola. Lo mismo con la segunda declaración. Obtenemos la salida en la consola, y la tercera declaración en la consola. Y nada allí parece extraño, ¿verdad? Lo ejecutamos en orden. Este es un script sincrónico.

¿Qué pasa si intentamos hacer algo asincrónico? Obtenemos nuestra primera declaración de registro de consola, y obtenemos la salida. Tenemos esta declaración de lectura de archivo. Y aquí es donde se pone un poco interesante, es que esto en realidad será empujado a libuv. Y continuaremos con nuestro código sincrónico. Así que iremos primero, y luego tercero. Y luego, después de un tiempo, cuando terminemos de leer nuestro archivo, procesaremos la función de devolución de llamada de esa función de lectura de archivo. Así que terminamos con una salida que fue primero, tercero y segundo. Y podríamos preguntarnos, ya sabes, ¿por qué es eso? Y esto es un poco lo que hace el bucle de eventos.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
React Patterns Made Simple
React Day Berlin 2024React Day Berlin 2024
62 min
React Patterns Made Simple
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Aprende patrones de React ampliamente utilizados, incluyendo HOCs, Compound Components, Provider Patterns, Functions as Child, y Portals, para escribir código más limpio y eficiente y crear aplicaciones escalables y mantenibles.Visión general En esta masterclass, los espectadores aprenderán sobre patrones clave de React que pueden hacer su código más eficiente, legible y mantenible. Presentaremos cada patrón, explicaremos cómo funciona y demostraremos ejemplos prácticos. Al final de la sesión, los participantes tendrán una comprensión sólida de cómo usar estos patrones en sus proyectos.Objetivos de aprendizajeHOCs Compound Components Provider Patterns Functions as Child Portals Modularidad Mantenibilidad Aplicación en el mundo real.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)