Versión en EspañolES

Pon a prueba tus reflejos (y mi aplicación)

Eddie Jaoude

PayPal

Bookmark

Sentry

Promoted

Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

¿Qué sucede cuando conviertes a tu audiencia en una prueba de carga distribuida en vivo?

Comenzaremos esta sesión con un emocionante desafío multijugador de "Whack-a-Mole" que se juega directamente desde tu teléfono. Mientras compites por el primer lugar en la tabla de clasificación, se generará una transmisión en vivo de datos concurrentes para mostrar las capacidades web en tiempo real en acción a través de dispositivos.

Después de jugar un rato, es hora de ponerse serios profundizando en los desafíos, la arquitectura y las tecnologías utilizadas al construir una plataforma de este tipo. Descubre cuán útil o distractor puede ser la IA durante este proceso.

Los puntos clave incluyen:

IA: ¡Lo bueno y lo defectuoso!
La pila: NextJS, Supabase.
Tiempo real: Ya no es necesario actualizar la página.

Deja atrás la teoría y observa cómo las herramientas modernas y un poco de prueba y error manejan el caos de la interacción en vivo con los usuarios.

This talk has been presented at Web Engineering Summit 2026, check out the latest edition of this Tech Conference.

architecture

Eddie Jaoude

32 min

11 Jun, 2026

Comments

Video Summary and Transcription

Eddie de PayPal introduce un juego de Whack-A-Mole para discutir datos en tiempo real y atraer a la audiencia. Los datos en tiempo real son esenciales para actualizaciones dinámicas y manejo eficiente de datos. Los desafíos con el MVP generado por IA llevaron a un modelo exitoso por tres con características en tiempo real. Se destaca la evolución de las tecnologías de comunicación de datos de Comet a WebSockets. Se discute la transición a la implementación nativa de WebSocket para eficiencia y los beneficios de usar Superbase. Se exploran características en tiempo real en juegos, manejo de eventos, seguimiento de presencia y transmisión de eventos. React SDK, herramientas en tiempo real, escalabilidad con Meteor y manejo de ruido de datos se abordan en las sesiones de preguntas y respuestas.

Available in English: Stress Test Your Reflexes (And My App)

Video transcription and chapters available for users with access.

Available in other languages:

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

Escalando con Remix y Micro Frontends

Remix Conf Europe 2022

23 min

Escalando con Remix y Micro Frontends

Top Content

Adrien Baron

Creator of Tiny Frontend

This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.

remix javascript micro-frontends architecture

Entendiendo la Arquitectura Fiber de React

React Advanced 2022

29 min

Entendiendo la Arquitectura Fiber de React

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

react architecture concurrent rendering react 18 beginner friendly react fiber react reconciliation

Thinking Like an Architect

Node Congress 2025

31 min

Thinking Like an Architect

Top Content

Luca Mezzalira

Author of Front-End Reactive Architectures and Building Micro-Frontends

In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.

architecture

Componentes de Full Stack

Remix Conf Europe 2022

37 min

Componentes de Full Stack

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

remix javascript fullstack architecture

El Lado Oscuro de los Micro-Frontends

React Advanced 2025

29 min

El Lado Oscuro de los Micro-Frontends

Luca Mezzalira

Author of Front-End Reactive Architectures and Building Micro-Frontends

In the Talk, various key points were discussed regarding micro-front-end architecture. These included challenges with micro-intents, common mistakes in system design, the differences between micro-intents and components, granularity in software architecture, optimizing micro-front-end architecture, efficient routing and deployment strategies, edge computing strategies, global state and data sharing optimization, managing data context, governance and fitness functions, architectural testing, adaptive growth, value of micro-frontends, repository selection, repo structures, and web component usage.

architecture

Workshops on related topic

IA a demanda: IA sin servidor

DevOps.js Conf 2024

163 min

IA a demanda: IA sin servidor

Top Content

Featured WorkshopFree

Nathan Disidore

En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.

serverless architecture artificial intelligence

React y Microfrontends

React Summit US 2024

56 min

React y Microfrontends

Featured Workshop

Harsh Maheshwari

Mentorship available

Aprovechando reactjs para crear microfrontends reutilizables abordando desafíos y errores comunes.

architecture

Masterclass de alto rendimiento Next.js

React Summit 2022

50 min

Masterclass de alto rendimiento Next.js

Workshop

Michele Riva

Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.

performance next.js best practices architecture

Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Masterclass

AI Coding Summit 2025

86 min

Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Masterclass

Workshop

Stepan Suvorov

Únete a una sesión enfocada de 2 horas que cubre el propósito de MCP, su arquitectura, implementación práctica de servidores y direcciones futuras. Diseñado para desarrolladores y arquitectos de sistemas que buscan integrar datos contextuales con modelos de ML de manera efectiva. Agenda:- Introducción & ¿Por qué MCP? Desafíos clave que MCP resuelve y beneficios principales.- Profundización en la Arquitectura: componentes, interacciones, principios de escalabilidad. - Construyendo tu propio Servidor MCP: recorrido guiado con fragmentos de código y mejores prácticas; demostración en vivo o revisión de código.- Futuro de los Desarrollos de MCP: potenciales mejoras, tendencias emergentes, escenarios del mundo real.
Puntos Clave:- Comprensión clara del razonamiento detrás de MCP.- Perspectiva sobre patrones de diseño y consideraciones de escalado.- Pasos prácticos para implementar un servidor prototipo.- Conciencia de las tendencias futuras y cómo aplicar MCP en proyectos.

architecture

Concurrencia de Node Con la Fuerza de un Toro Con BullMQ

Node Congress 2026

95 min

Concurrencia de Node Con la Fuerza de un Toro Con BullMQ

Workshop

2 authors

La naturaleza concurrente de Node ya es poderosa, pero a menudo necesitamos sacar trabajo del servidor principal por varias razones. En este trabajo, exploraremos algunos escenarios en los que el trabajo se empuja inteligentemente a otro proceso de Node para resolver.
Una vez que usamos una cola para distribuir cargas de trabajo, necesitamos identificar la naturaleza del trabajo a realizar. Para trabajos intensivos en I/O o CPU, el primero ya está perfectamente cubierto por un solo proceso de Node.js; necesitaremos ajustar la configuración del trabajador para que coincida con los recursos disponibles y el rendimiento.

architecture patterns