Name: React Advanced 2025
Start: 2025-11-27T23:00:00.000Z
End: 2025-12-01T21:00:00.000Z

Aurora Scharff

Taz Singh

Ciarán Curley

Olivier Tassinari

Lera

James Swinton-Bland

Florian Rappl

Irina Baeva

Aleksei Podgaev

Simon Ouyang

Daria Shabala

Luca Del Puppo

 Vinicios Neves

Krasimir Tsonev

Nina Torgunakova

Richard Carrigan

Rajni Gediya

Thibault Van den Broecke

David Pugh

Violina Popova

Marko Draksic

Nick Taylor

Elaine Shinagawa

Dante De Ruwe

Travis Arnold

Bela Bohlender

Mauro Bartolomeoli

André Bauer

Riccardo Erra

Danny Povolotski

Elina Denisova

Herrington Darkholme

Thorsten Hell

Los Micro-Frontends son la arquitectura distribuida para las interfaces de usuario que están resolviendo no solo desafíos técnicos sino también organizacionales. En esta sesión, aprenderás los patrones anti-comunes más vistos en los últimos 10 años de implementación y consultoría a empresas de todo el mundo en su viaje hacia la arquitectura de micro-frontends. Ya seas un experto o un novato, en esta charla, aprenderás cómo estructurar adecuadamente tu arquitectura de micro-frontends y cómo evitar errores comunes al construir micro-frontends.

El Lado Oscuro de los 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.

Micro-Frontends are the distributed architecture for the user interfaces that are solving not only technical but also organizational challenges. In this session, you will learn the most common anti-patterns I've seen in the past 10 years of implementing and consulting worldwide companies in their journey into the micro-frontends architecture. Whether you are an expert or a newbie, in this talk, you will learn how to properly structure your micro-frontends architecture and how to avoid common mistakes while building micro-frontends.

The Dark Side of Micro-Frontends

Luca Mezzalira

AI ya no es solo una herramienta, se está convirtiendo en parte del equipo. En esta charla, exploraremos cómo los LLMs están desbloqueando nuevos patrones de colaboración en diseño, producto e ingeniería. Verás ejemplos reales de flujos de trabajo potenciados por AI para construir aplicaciones frontend, desde la automatización de diseño a código hasta actualizaciones basadas en roles sin escribir código. Aprende cómo los equipos están entregando más rápido al trasladar tareas tediosas a agentes y permitir un desarrollo más conectado e iterativo.

Los Nuevos Flujos de Trabajo de AI

The Talk delves into the impact of LLMs on engineering workflows, emphasizing the shift towards AI for code writing efficiency. It highlights the importance of problem-solving abilities and product development in hiring practices. LLMs enhance productivity for developers, designers, and product managers, enabling faster iterations and collaboration. Efficient product workflows are achieved through simultaneous UI and code work using Builder.io. Task delegation is streamlined with async agents and Builder bots, optimizing project editing and code management. Integration with tools like VS Code and Figma streamlines design and code editing, enhancing collaboration and workflow automation.

AI is no longer just a tool — it's becoming part of the team. In this talk, we'll explore how LLMs are unlocking new collaboration patterns across design, product, and engineering. You'll see real examples of AI-powered workflows for building frontend applications, from design-to-code automation to role-based updates without writing code. Learn how teams are shipping faster by shifting tedious tasks to agents and enabling more connected, iterative development.

The New AI Workflows

Steve Sewell

Los LLMs no son solo motores de búsqueda sofisticados: sientan las bases para construir piezas de software autónomas e inteligentes, también conocidas como agentes. Las empresas están invirtiendo masivamente en infraestructuras de IA generativa. Para obtener el valor de su inversión, necesitan desarrolladores que puedan sacar el máximo provecho de un LLM, y ese podrías ser tú. Descubre la pila de TypeScript para el desarrollo basado en LLM en esta masterclass de 3 horas. Conéctate a tu modelo favorito con el Vercel AI SDK y convierte líneas de código en agentes de IA con Mastra.ai.

Construir agentes LLM en TypeScript con Mastra y Vercel AI SDK

Welcome to Mastra workshop focusing on building large language model agents in TypeScript using Mastra and Vercel AI SDK. Exploring AI engineering discipline with emphasis on coding with large language models. Implementing agent AI patterns and building agentic systems for real-world applications. Discussing advanced agent architectures, tool configurations, and memory in agent functionality. Developing RAG patterns for better user answers and semantic RAGs with vector databases. Understanding embeddings, vector databases, and evaluation practices in agentic development setups. Integrating data in RAG workflow and embedding transformation in Vercel AI SDK for accurate documentation retrieval.

LLMs are not just fancy search engines: they lay the ground for building autonomous and intelligent pieces of software, aka agents. Companies are investing massively in generative AI infrastructures. To get their money's worth, they need developers that can make the best out of an LLM, and that could be you. Discover the TypeScript stack for LLM-based development in this 3 hours workshop. Connect to your favorite model with the Vercel AI SDK and turn lines of code into AI agents with Mastra.ai.

Build LLM agents in TypeScript with Mastra and Vercel AI SDK

Eric Burel

In this workshop, we will build our first AI Agent – completely from scratch. We will cover the fundamentals of LLMs, explore Retrieval-Augmented Generation (RAG), and learn how to use function calling to connect AI with external tools.By the end, you will have a working AI agent that can autonomously decide which functions and data sources to use. No prior AI experience is required, but basic knowledge of TypeScript is recommended.After this workshop, you will be able to...<ul><li>Understand how Large Language Models (LLMs) work and how they process and generate text.</li><li>Leverage LLMs for specific tasks by designing prompts and integrating them into applications.</li><li>Implement Retrieval-Augmented Generation (RAG) to enhance AI responses with external knowledge.</li><li>Use function calling in AI systems to interact dynamically with APIs and data sources.</li><li>Build an AI agent that autonomously selects the right tools and data to complete user tasks efficiently</li></ul>Who is this workshop for?No prior knowledge of Artificial Intelligence is necessary, as we’ll cover all the essential concepts during the workshop.We’ll build the AI agent in a React app, but the core logic will be framework-agnostic and written in TypeScript.

Getting Started With AI (-Agents) in the Browser

Nico Martin

Las aplicaciones de Next.js de hoy en día luchan con una contradicción arquitectónica: las rutas completas deben ser completamente estáticas o completamente dinámicas, lo que obliga a los desarrolladores a sacrificar rendimiento por frescura o viceversa. Este enfoque de todo o nada lleva a cálculos redundantes, costos aumentados y experiencias de usuario más lentas.En esta sesión, exploraremos los Componentes de Caché — una característica experimental de Next.js que introduce el almacenamiento en caché a nivel de función a través de la directiva `'use cache'`. Basándonos en las capacidades de transmisión de React y la infraestructura de Pre-renderizado Parcial, demostraremos cómo lograr un control granular sobre lo que se precomputa en shells estáticos frente a lo que se transmite dinámicamente. Aprenderás patrones prácticos para escenarios comunes como cálculos costosos, requisitos de datos en tiempo real y el sofisticado término medio entre ellos. Examinaremos migraciones de producción que muestran reducciones mejoradas en los costos de cómputo y reducción del Tiempo al Primer Byte desde ubicaciones globales de borde.Te irás con un nuevo modelo mental para el almacenamiento en caché, no como una reflexión posterior al rendimiento, sino como una decisión arquitectónica de primera clase que vive junto a tus componentes. En lugar de elegir entre rutas "estáticas" o "dinámicas", entenderás cómo componer contenido en caché y en transmisión dentro del mismo árbol de componentes, creando aplicaciones que son tanto eficientes como arquitectónicamente honestas sobre sus requisitos de datos.

De Segmentos a Suspense: El Futuro del Caching en Next.js

Introduction to Cache Components in Next.js 16, transforming the app router with new features like partial pre-rendering, Dynamic I.O., and caching directives. Deep dive into static params generation in Next.js focusing on changes in generating static params for improved performance. Exploring challenges of generating static params and balancing static vs. dynamic rendering for better performance. Addressing challenges with cache components, optimizing static and dynamic rendering for improved performance. Understanding impact of parameters on rendering with cache components, managing dynamic components, and introducing suspense boundaries for faster page loads. Enhancing cache life APIs, introducing a new caching model for static outputs in Next.js. Revolutionizing cache management with granular control over cache lifetimes and dynamic segment configuration. Navigating data and caching in Next.js, exploring cache components guidance and caching differences between server and client components.

Next.js applications of today struggle with an architectural contradiction: entire routes must be either fully static or fully dynamic, forcing developers to sacrifice performance for freshness or vice versa. This all or nothing approach leads to redundant computation, increased costs, and slower user experiences.In this session, we'll explore Cache Components — an experimental Next.js feature that introduces function-level caching through the `'use cache'` directive. Building on React's streaming capabilities and Partial Prerendering infrastructure, we'll demonstrate how to achieve granular control over what gets precomputed into static shells versus what streams dynamically. You'll learn practical patterns for common scenarios like expensive computations, real-time data requirements, and the sophisticated middle ground between them. We'll examine production migrations showing improved compute cost reductions and reduced Time to First Byte from global edge locations.You'll leave with a new mental model for caching—not as a performance afterthought, but as a first-class architectural decision that lives alongside your components. Instead of choosing between "static" or "dynamic" routes, you'll understand how to compose cached and streaming content within the same component tree, creating applications that are both performant and architecturally honest about their data requirements.

From Segments to Suspense: The Future of Next.js Caching

Wyatt Johnson

Seguimos escuchando que los React Server Components (RSC) son el futuro. Y que se supone que son los mejores para el rendimiento. Y simplemente los mejores en general. Pero, ¿qué tan válida es esa afirmación? ¡Vamos a medir y descubrirlo!Para hacer esto, me volví un poco loco e implementé una aplicación de tres maneras diferentes: usando Client-Side Rendering (CSR), Server-Side Rendering (SSR) y React Server Components (RSC). Luego, medí la diferencia. Y ahora estoy listo para mostrártelo.En esta charla, echaremos un vistazo a qué es el rendimiento de carga inicial, cómo medirlo y cuál es la diferencia entre los patrones de renderizado: desde la perspectiva de la implementación, diferencias en los gráficos de rendimiento y en términos de números de rendimiento reales.

Medí el Rendimiento de los React Server Components para que Tú No Tengas Que Hacerlo

Nadia introduces React server components and performance, highlighting the benefits of server components in improving performance and the need for a clear understanding of their impact on rendering and data fetching in React applications. Exploring Server-Side Rendering Impact on Performance: Analysis of transitioning from client-side to server-side rendering, including implications on performance and data fetching. Transforming Empty Screen to Performance Improvement: Detailed process of browser work, React rendering, and data fetching impact. Making the Shift to Server-Side Rendering: Impact on interactivity and data fetching optimization. Understanding the Benefits of AppRouter Version in SSR with Reduced JavaScript Payload and Introduction of Server Components. Investigating Smarter Server-Side Rendering with Server Components and Streaming in Next.js. Refactoring for Server Components: Async Data Fetching, Server Component Identification, and Utilizing Suspense for React Streaming Chunks. Enhancing Performance with Server Components: Balancing Rendering Approaches, Importance of Server-Side Data Fetching, and Leveraging Suspense for Improved Streaming.

We keep hearing that React Server Components (RSC) are the future. And that they're supposed to be the best for performance. And just the best in general. But how valid is that claim? Let's measure and find out!To do this, I went slightly crazy and implemented one app in three different ways: using Client-Side Rendering (CSR), Server-Side Rendering (SSR), and React Server Components (RSC). Then, measured the difference. And now ready to show it to you.In this talk, we'll take a look at what initial load performance is, how to measure it, and what's the difference between rendering patterns: from the implementation perspective, differences in performance graphs, and in terms of actual performance numbers.

I Measured React Server Components’ Performance So You Don’t Have To

Nadia Makarevich

La representación del lado del servidor (SSR) está de vuelta en el centro de atención, y React está evolucionando rápidamente. En este masterclass, profundizaremos en la mecánica, las compensaciones de rendimiento y las técnicas modernas de SSR con React.js. Comenzarás construyendo una aplicación SSR desde cero, sin frameworks, solo renderToString y hydrateRoot en bruto, para comprender verdaderamente cómo React se representa en el servidor y se hidrata en el cliente. A partir de ahí, actualizaremos a las capacidades de transmisión de React 18 usando renderToPipeableStream, implementaremos la hidratación selectiva usando Suspense e integraremos la obtención de datos directamente en el ciclo de representación del servidor. Veremos los React Server Components (RSC), mostrando cómo complementan el SSR. También cubriremos estrategias de hidratación, cómo prevenir desajustes y cómo almacenar en caché o transmitir HTML de manera efectiva para un rendimiento en el mundo real. Finalmente, llevaremos nuestro trabajo manual de SSR a frameworks de producción como Next.js.

Explorando la Representación del Lado del Servidor

Today marks the 30th birthday of JavaScript, celebrating its evolution and usage in daily coding practices. The workshop delves into server components outside of frameworks like Next.js, exploring challenges and implementations. Topics cover React setup, HTML rendering, client components, data transfer, HTTP streaming, synchronization challenges, and server-client interactions. Challenges include serialization, boundaries, promises, validation, nested components, and custom approaches. Insights touch on the evolving direction of React development, adoption challenges, and security risks in new patterns.

Server-side rendering (SSR) is back in the spotlight – and React is evolving fast. In this workshop, we’ll go deep into the mechanics, performance trade-offs, and modern techniques of SSR with React.js. You'll start by building an SSR app from scratch – no frameworks, just raw renderToString and hydrateRoot—to truly understand how React renders on the server and hydrates on the client. From there, we'll upgrade to React 18’s streaming capabilities using renderToPipeableStream, implement selective hydration using Suspense, and integrate data fetching directly into the server render cycle. We’ll look at React Server Components (RSC), showing how they complement SSR. We'll also cover hydration strategies, how to prevent mismatches, and how to cache or stream HTML effectively for real-world performance. Finally, we’ll bridge our manual SSR work into production frameworks like Next.js.

Exploring Server Side Rendering

En esta masterclass, incrementaremos de manera incremental una aplicación de React existente con AI. Estoy seguro de que la mayoría de ustedes probablemente ya mantienen una aplicación de React, así que en lugar de comenzar desde cero, tomemos algo que ya funciona y desarrollemos algunos patrones para agregar características de AI prácticas y del mundo real sin que parezcan "añadidas" solo por seguir la moda. Exploraremos preguntas como "¿qué modelo debería usar?", "¿debería el LLM ejecutarse en el dispositivo o en la nube?", "¿estoy arriesgando el bloqueo del proveedor al elegir un modelo propietario sobre uno de código abierto?", y profundizaremos en los temas más complejos de usar frameworks de AI, crear agentes, y los clientes y servidores del Model Context Protocol (MCP). Al final de esta masterclass, deberías tener algunos conocimientos y habilidades aplicables que puedes llevar a tus propias aplicaciones, y con suerte, te irás con una mayor comprensión de cómo y cuándo usar realmente AI<span style="color:rgb(34, 34, 34);font-family:Arial, Helvetica, sans-serif;font-size:small;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;display:inline !important;float:none"> <img alt="✨" src="https://res.cloudinary.com/stichting-frontend-amsterdam/image/upload/v1756498464/1756498463957_acgspj.png" loading="lazy" style="height:1.2em;width:1.2em;vertical-align:middle;color:rgb(34, 34, 34);font-family:Arial, Helvetica, sans-serif;font-size:small;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial" />

Cómo Mejorar una Aplicación de React Existente con AI, Sin Reescribirla Desde Cero

The Workshop covers integrating AI into React apps, exploring lessons on project setup, migration process, and server-side data handling. It delves into AI integration with synthetic tool calling, setting up system prompts for AI tool calls, and validating AI tool call results. The implementation of AI search functionality, Model Context Protocol (MCP), off-the-shelf automation, and enhanced Chat GPT integration are highlighted. Additionally, advanced MCP functionalities like OAuth for server security and transforming services into real agents for comprehensive task handling are explored.

In this workshop, we will incrementally augment an existing React application with AI. I'm sure most of you probably already maintain a React app, so rather than starting from the ground-up, let's take something that already works, and develop some patterns for adding practical, real-world AI features without making them feel "bolted on" just for the sake of chasing the hype. We'll explore questions such as "which model should I use?", "should the LLM run on-device or on the cloud?", "am I risking vendor lock-in by picking a proprietary model over an open-source one?", and we'll dive into the deeper topics of using AI frameworks, creating agents, and the clients and servers of the Model Context Protocol (MCP). By the end of this workshop, you should have some applicable knowledge and skills which you can bring to your own applications, and hopefully, you'll walk away with a greater understanding of how and when to actually use AI<span style="color:rgb(34, 34, 34);font-family:Arial, Helvetica, sans-serif;font-size:small;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;display:inline !important;float:none"> <img alt="✨" src="https://res.cloudinary.com/stichting-frontend-amsterdam/image/upload/v1756498464/1756498463957_acgspj.png" loading="lazy" style="height:1.2em;width:1.2em;vertical-align:middle;color:rgb(34, 34, 34);font-family:Arial, Helvetica, sans-serif;font-size:small;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial" />

How To Enhance an Existing React App With AI, Without Rewriting It From Scratch

 Greg Brimble

Voy a describir en profundidad una nueva integración de React Native en Unreal Engine. Los juegos han estado rezagados durante mucho tiempo en comparación con los móviles y la web en cuanto a la facilidad de construir una buena UI, especialmente para juegos con muchos datos. El mundo de los juegos ha abrazado durante mucho tiempo la idea de los juegos web: juegos como Civilization 7 se lanzan con una UI completamente web al incrustar un navegador especializado. Creo que React &amp; React Native son una gran opción para revolucionar cómo se construyen las UI de los juegos.

React Native como un sistema de UI para juegos en Unreal Engine

Talk on React Native as a Gaming UI System in Unreal Engine, covering the integration journey, importance in mobile app development, and current methods of game UI creation. Innovative approach of rendering UI in games using a browser headlessly onto a texture. Challenges and benefits of using React Native for game UIs, including handling JavaScript overrides and showcasing a demo. Exploration of applying shaders to React Native UI in a gaming context and invitation to engage with React Native on Unreal Engine for future game development.

I will go in depth describing a brand new integration of React Native into Unreal Engine. Gaming has long been lagging behind mobile and web in the ease of building a good UI , especially for data heavy games. The gaming world has long embraced the idea of web - games like Civilization 7 launch with fully Web UI by embedding a specialized browser. I think React &amp; React Native are a great fit for revolutionizing how game UI are built.

React Native as a Gaming UI System in Unreal Engine

¿La prueba de impacto es fácil, verdad? Aprende cómo el editor de lienzo de tldraw decide qué forma está debajo del cursor del usuario. Esta charla es una inmersión profunda en quinientas de las líneas de código más confusas en tldraw, el SDK de lienzo infinito.

¿Qué hay bajo el puntero?

Let's discuss Tealdraw, a versatile application with a whiteboard feature similar to Miro and Excalitraw. Tealdraw offers an SDK, tealdraw.dev, enabling innovative creations like a liquid simulation. Challenges in Tealdraw included optimizing hit testing, managing selection logic, and addressing shape interactions. The debugging geometry view allows for efficient handling of canvas data and hit detection. Tealdraw's approach to hit testing involves bounding boxes, shape hierarchy navigation, and handling user interactions with polygons. The talk explores technology choices, resolving logic levels, and utilizing CSS masks in Tealdraw, emphasizing the importance of user interaction and efficient hit testing processes.

Hit testing is easy, right? Learn how tldraw's canvas editor decides which shape is beneath the user's cursor. This talk is a deep dive into five hundred of the most confusing lines of code in tldraw, the infinite canvas SDK.

What's Under the Pointer?

Steve Ruiz

In this workshop, we'll go beyond the fundamentals and explore some of the more powerful features React Query has to offer. You'll gain a deeper understanding of how it works under the hood and learn how to write scalable, maintainable React Query code.Together, we'll build a simple example app and incrementally enhance it with one core objective in mind: delivering the best possible user experience. That means snappy interactions, minimal layout shifts, and avoiding unnecessary loading spinners wherever we can.To achieve this, we'll dive into advanced techniques like various forms of prefetching (including integration with route loaders), seeding the query cache, crafting smooth paginated experiences, and even persisting query state through full page reloads using persistence plugins.Note: You should have prior knowledge about React Query if you attend this workshop.

React Query - Beyond the Basics

Dominik Dorfmeister

Manejar operaciones asíncronas en componentes de UI puede ser complicado: estados pendientes parpadeantes, actualizaciones de estado ineficientes y experiencias de usuario inestables son problemas comunes. Construir componentes de UI accesibles presenta desafíos adicionales, ya que cumplir con los requisitos de accesibilidad a menudo requiere un esfuerzo adicional, lo que puede agregar complejidad al proceso de desarrollo.En el contexto del Next.js App Router, esta sesión demostrará cómo los React Server Components simplifican la obtención de datos, mientras que otras herramientas de React 19 ayudan a gestionar mutaciones, estados de carga y actualizaciones optimistas de manera más efectiva. Combinaremos estos con Ariakit para simplificar el proceso de construir componentes de UI interactivos y accesibles con menos código repetitivo. Te irás con estrategias prácticas para manejar operaciones asíncronas mientras aseguras una experiencia de usuario fluida y confiable.

Construyendo UI Interactiva Asíncrona con React 19 y Ariakit

Speaker shared challenges in building UI components with custom design, addressing accessibility standards, and handling async operations in React. Tools like Tailwind CSS, ARIAKit, and React 19 were highlighted for enhanced UI development. Focus on improving accessibility, UI structure, and interactive components with ARIA kit and React 19. Optimizing UI styling with ARIA attributes, enhancing keyboard accessibility, and readability. Coordinating UI updates with 'use transition' and 'use optimistic' hooks for seamless transitions. Streamlining error handling, implementing advanced logout functionality, and showcasing ARIA kit benefits. Discussing notification practices, component selection, and contrasting ARIA Kit vs. React ARIA capabilities.

Handling async operations in UI components can be tricky – flickering pending states, inefficient state updates, and unstable user experiences are common issues. Building accessible UI components presents additional challenges, as meeting accessibility requirements often requires extra effort, which can add complexity to the development process.In the context of the Next.js App Router, this session will demonstrate how React Server Components streamline data fetching, while other React 19 tools help manage mutations, loading states, and optimistic updates more effectively. We’ll combine these with Ariakit to simplify the process of building interactive, accessible UI components with less boilerplate. You’ll leave with practical strategies for managing async operations while ensuring a smooth, reliable user experience.

Building Interactive Async UI with React 19 and Ariakit

Las islas de Astro son un primitivo poderoso que te permite tomar tu contenido renderizado estáticamente y agregar gradualmente componentes interactivos a medida que avanzas. Descubre qué pueden hacer las directivas del cliente, cuándo usarlas y cómo comunicar el estado entre tus islas de manera efectiva.

Navegando por las Islas de Interactividad

Islands in web development are interactive components that are rendered on the server and hydrated separately. They offer fine-grain control over JavaScript, speed up page loading, and reduce JavaScript shipping. Applications of islands span across eCommerce, media sites, docs, and blogs, providing interactivity without excessive JavaScript. Nanostores enable state sharing among islands. Key takeaways include utilizing Nanostores for state management, exploring ASTRO and islands for development, and using client directives for JavaScript control.

Astro islands are a powerful primitive that allow you to take your statically rendered content, and gradually add interactive components as you go. Discover what client directives can do, when to use them, and how to communicate state between your islands effectively.

Navigating Islands of Interactivity

Reuben Tier

Node.js fue anunciado en 2009 como un entorno de ejecución de JavaScript de un solo hilo. En 2018, se convirtió en multi-hilo, y nadie lo notó.¿Qué pueden hacer los worker_threads? ¿Para qué son útiles? ¿Cuál es la mejor manera de comunicarse entre dos hilos?

Node.js: Más hilos de los que piensas

The talk covers a range of topics including Node.js evolution to a multi-threaded system, scaling with the cluster module, managing PM2 for efficient orchestration, challenges in SSR frameworks, TCP SO reuse port for resource utilization, VAT architecture for smart service routing, zero downtime deployment with shared cache, performance benchmark results, PM2 performance challenges, legality and functionality of TCP SO reuse port, kernel balancing considerations, tool comparison between PM2 and Deno, cache consistency challenges, VAT architecture with worker thread recovery, T-scaling for vertical scaling, and updating Node V6 applications.

Node.js was announced in 2009 as a single-threaded JavaScript runtime. In 2018, it became multi-threaded, and no one noticed.What can worker_threads do? What are they useful for? What's the best way of communicating between two threads?

Node.js: More Threads Than You Think

Paolo Insogna

Hay muchas maneras de gestionar el estado en aplicaciones modernas de React, pero la URL en sí misma es un potente gestor de estado oculto que a menudo se pasa por alto.Esta charla introduce `nuqs`, una biblioteca que simplifica la gestión del estado de la URL en React. Exploraremos los beneficios de este enfoque: compartibilidad, navegación por el historial e interacción declarativa cliente-servidor.A través de una demostración en vivo, aprenderás cómo migrar de React.useState a nuqs’ useQueryState mientras navegamos por conceptos como parámetros de búsqueda solo para el cliente frente a los conscientes del servidor. También cubriremos buenas prácticas para URLs bonitas y seguras en cuanto a tipos, y cómo evitar errores comunes como los límites de tasa del navegador y las restricciones de tamaño de URL.Si alguna vez te has preguntado qué estado pertenece a la URL y cómo escalarlo, esta charla te dará las respuestas.

Type-Safe URL State Management in React With nuqs

François Best introduces nuqs, a URL state manager for React, offering teleportation and time travel abilities. Nuqs addresses browser rate limits on URL updates and creates entry points into the app by putting state in the URL. Nuqs allows for server-side rendering and shareable UI creation with a declarative approach. URL source is used as a truth for state handling and debouncing URL updates is finalized in nuqs. Type-safe URL parameter handling and compression parsing are supported, ensuring security and routing safety with TanStack integration.

There are many ways to manage state in modern React applications, but the URL itself is a powerful hidden state manager that’s often overlooked.This talk introduces `nuqs`, a library that simplifies URL state management in React. We’ll explore the benefits this approach: shareability, history navigation, and declarative client-server interaction.Through a live demo, you’ll learn how to migrate from React.useState to nuqs’ useQueryState while we navigate concepts like client-only vs server-aware search parameters. We’ll also cover good practices for type-safe, pretty URLs, and how to avoid common pitfalls such as browser rate limits and URL size constraints.If you’ve ever wondered what state belongs in the URL, and how to scale it, this talk will give you the answers.

François Best

El 3D en la web ya no se trata solo de demostraciones tecnológicas llamativas: ahora se utiliza para construir herramientas de alta calidad, visualizaciones, juegos y experiencias inmersivas. En esta charla, exploraremos por qué, qué y cómo construir aplicaciones web 3D listas para producción con React en 2025, y si la IA puede ayudar. Lo que cubriremos:<ul><li>Una breve historia del 3D en la web</li><li>El estado actual del ecosistema de React Three</li><li>Comenzando en vivo construyendo una aplicación XR con React</li><li>El papel que puede jugar la IA en la construcción de experiencias 3D</li><li>Por qué el 3D se está convirtiendo en una frontera para expresar tus habilidades creativas y de ingeniería</li></ul>Ya sea que solo tengas curiosidad por el 3D o ya estés construyendo aplicaciones con el ecosistema de React Three, esta charla te mostrará lo que viene, lo que ya es posible y cómo comenzar con React y 3D.

Building 3D Web Apps in 2025 – React, XR & AI?

Bela, open source maintainer, discusses 3D web app development in 2025, leveraging React for XR apps and AI assistance. Explore the evolution of 3D on the web, React's role, and the impact of AI, focusing on large language models and challenges. 3GS foundation makes 3D web dev accessible; React 3 fiber simplifies scene orchestration and enhances performance. React 3 XR enables cross-platform AR and VR app development with spatial understanding and high-quality media rendering. Using React 3 Fiber and XR components, the canvas sets up interactive scenes with meshes for precise display. Imperative cube rotation for performance, AI's impact on 3D web, and challenges of AI in 3D app development.

3D on the web is no longer just about fancy tech demos — it’s now used to build high-quality tools, visualizations, games, and immersive experiences. In this talk, we’ll explore why, what, and how to build production-ready 3D web apps with React in 2025 — and whether AI can help. What we’ll cover:<ul><li>A quick history of 3D on the web</li><li>The current state of the React Three ecosystem</li><li>Getting started live by building a XR react app</li><li>The role AI can play in building 3D experiences</li><li>Why 3D is becoming a frontier for expressing your creative and engineering skills</li></ul>Whether you're just curious about 3D or already building apps with the React Three ecosystem, this talk will show you what’s coming, what’s already possible — and how to get started with React and 3D.

Las interfaces de chat tradicionales solo devuelven texto, pero ¿qué pasaría si tu asistente de AI pudiera renderizar componentes personalizados de React directamente en la conversación? En esta charla relámpago, exploraremos la UI generativa, donde las aplicaciones de chat transmiten componentes de React contextualmente apropiados en lugar de respuestas de texto simples. Cuando los usuarios preguntan sobre datos de ventas, obtienen gráficos interactivos. Cuando buscan propiedades, reciben tarjetas de producto enriquecidas. A través de ejemplos de código, verás cómo construir interfaces de chat donde la AI selecciona e interpreta inteligentemente componentes de React poblados con datos en tiempo real de búsquedas semánticas y bases de datos vectoriales. Te irás con patrones prácticos para implementar esta técnica y comprender cómo las plataformas de datos modernas permiten estas experiencias conversacionales dinámicas y visuales que van mucho más allá de simples respuestas de texto.

Más Allá de las Burbujas de Chat: Construyendo Aplicaciones de React Donde la AI Genera Tu UI

Introducing different AI interaction styles like chat interface vs. generating interactive interfaces for learning. Evolution of AI interfaces from text-based apps to tailored UIs based on user needs. Generative UI applications creating visual interfaces with AI. AI-driven UI component selection ensuring safety and flexibility. Challenges of true code generation for React or HTML. Balancing AI development approaches for innovation and reliability. Foundational aspects of AI SDK and generative UI with React components. Enhancing learning with voice-enabled interaction and expanding AI applications with voice UI. Voice-enabled workflow automation for various tasks. Utilizing production-ready AI technology for adaptive interfaces.

Traditional chat interfaces only return text, but what if your AI assistant could render custom React components directly in the conversation? In this lightning talk, we’ll explore generative UI - where chat applications stream contextually appropriate React components instead of plain text responses. When users ask about sales data, they get interactive charts. When they search for properties, they get rich product cards. Through code examples, you’ll see how to build chat interfaces where AI intelligently selects and renders React components populated with real-time data from semantic search and vector databases. You’ll walk away with practical patterns for implementing this technique and understanding how modern data platforms enable these dynamic, visual conversational experiences that go far beyond simple text responses.

Beyond Chat Bubbles: Building React Apps Where AI Generates Your UI

Jesse Hall

El original Final Fantasy IX fue una masterclass en restricción creativa, llevando el hardware de la PlayStation al límite con trucos como fondos pre-renderizados y modelos de baja resolución. En esta charla, Joe Hart recrea la magia en React, profundizando en WebGL, posicionamiento de canvas y trucos de CSS que probablemente deberían ser ilegales. Es en parte una carta de amor a los juegos retro, en parte una inmersión profunda en las APIs del navegador, y en parte arte de performance.

Final Fantasy IX en React: Luchando contra el Navegador, Un Cuadro a la Vez

The speaker discusses various creative projects and game development ideas, including unique games like Katamari Node Modules and Command and Conquer Tiberium Jira. They delve into the technical advancements of Final Fantasy 9, suggesting rebuilding it with modern tools like Godot or Unity. Challenges of nostalgic development, design styling techniques, interactive UI development, and advanced 3D rendering in React are highlighted. The talk also covers efficient scene rendering techniques, character movement in 3D scenes, visual effects, game element recreation in React, challenges in 3D web development, and future game development plans.

The original Final Fantasy IX was a masterclass in creative constraint – pushing the PlayStation’s hardware to its limits with tricks like pre-rendered backgrounds and low-res models. In this talk, Joe Hart recreates the magic in React, diving into WebGL, canvas positioning, and CSS hacks that should probably be illegal. It’s part love letter to retro games, part deep dive into browser APIs, and part performance art.

Final Fantasy IX in React: Fighting the Browser, One Frame at a Time

Joe Hart

Es fácil olvidar lo que los creadores de React sabían desde el principio: que React no es solo para construir páginas web. La mayoría de nosotros hemos oído hablar de React Native, que renderiza a componentes móviles nativos, pero React no tiene que renderizar a "componentes" en absoluto. Existe React PDF para generar PDFs e Ink para construir interfaces de usuario en el terminal.En mi empresa, hemos desarrollado una forma para que los desarrolladores usen React para construir plugins para nuestra aplicación web que se renderizan en nuestros componentes personalizados, dándonos control total sobre el diseño de la interfaz de usuario (el "cómo"), mientras que el desarrollador del plugin tiene control total sobre la experiencia de usuario (el "qué").En mi charla, explicaré cómo es construir un renderizador y reconciliador de React, qué son y cómo usarlos.Me gustaría hacer una demostración en vivo mostrando cómo React se puede usar para convertir html a markdown. Y luego me gustaría demostrar cómo React puede renderizar al Mundo Real, controlando dispositivos IoT.

React Más Allá del DOM

Speaker discussed React's capabilities beyond the DOM, including installation of key packages, UI component building, state management, and reconciliation. React's platform-agnostic nature, compatibility with various renders, use of virtual DOM and diffing algorithm. Diverse rendering capabilities of React, such as React DOM, React Native, React 3 Fiber, React Native Web, React PDF, and Ink. Exploration of rendering to IoT devices using XState, state transitions in traffic lights, and building a secure developer ecosystem with React at Atio. Encouragement for developers to explore innovative UI rendering, custom render options, and favorite custom renders like 3-Fiber. Insights on React implementation, DevTools interaction, and discussion on Vim shortcuts in VS Code.

It's easy to forget what the creators of React knew from the start: that React is not only for building web pages. Most of us have heard of React Native, that renders to native mobile components, but React doesn't have to render to "components" at all. There's React PDF to generate PDFs and Ink for building UI in the terminal.At my company, we've built a way for developers to use React to build plugins for our webapp that render to our custom components, giving us full control over the UI design (the "how"), whilst giving the plugin developer full control UX (the "what").In my talk, I'll explain what it's like to build a React renderer and reconciler, what they are and how to use them.I'd like to do a live demo showing how React can be used to convert html to markdown. And then I'd like to demonstrate how React can render to the Real World, by controlling IOT devices.

React Beyond the DOM

Erik Rasmussen

Los LLMs locales en el dispositivo desbloquean experiencias de IA privadas por defecto y de baja latencia que funcionan sin conexión, ideales para móviles. En esta masterclass, mostraré cómo ejecutar LLMs directamente dentro de aplicaciones de React Native usando un AI SDK que proporciona una capa de abstracción agradable para simplificar la construcción de aplicaciones de IA.Únete a nosotros mientras exploramos la creación de react-native-ai, una biblioteca que permite la ejecución local de LLM. Profundizaremos en la arquitectura del proveedor y demostraremos cómo lo integramos con el MLC LLM Engine y los modelos base de Apple en dispositivos móviles.

React Native AI: Llevando LLMs en el dispositivo con AI SDK a React Native

Hello everyone, React Native AI, AI SDK from Brazil, connect AI SDK with React Native, Szymon Rybczak, senior React Native developer, React Native AI, run AI on device, powerful devices, on-device AI on mobile, iPhone 15 Pro performance. Devices are powerful. Inspired by Guillermo Rauch's tweet on Google Chrome's Gemini model. Researched topic, learned about providers in AISDK, create and plug providers for various APIs. Excitement for WWDC, experimenting with Apple Foundation Model in React Native, impressive performance. Apple investment in React Native, code sharing success with Vercel SDK and React Native AI Apple package, extensive features and community support. Integration with ASDK, expanding providers for on-device models, Android models support, real-life privacy-focused applications. Simulator compatibility on macOS 26 and Pixel 9 Pro, upcoming Android models, LLM offline training trade-offs, privacy and efficiency benefits. Image and video generation potential, Device model parameter size comparison, Apple's optimized on-device model performance, Implications for other AI apps like Gemini and Jacky P.T. On-device model implementation for offline scenarios, Support for multiple runtimes, Memory consumption comparison, Whisper.RN and LLM.RN functionality, Device compatibility verification via APIs.

Local, on-device LLMs unlock private-by-default, low-latency AI experiences that work offline - ideal for mobile. In this talk, I’ll show how to run LLMs directly inside React Native apps using an AI SDK that provides a nice abstraction layer to simplify building AI applications.Join us as we explore the creation of react-native-ai, a library that enables local LLM execution. We’ll dive deep into the provider architecture and demonstrate how we integrated it with the MLC LLM Engine and Apple’s foundation models on mobile devices.

React Native AI: Bringing on-device LLMs with AI SDK to React Native

Szymon Rybczak

¿Qué biblioteca de estado es la elección correcta para tu aplicación – Redux, MobX, Zustand, Jotai, o ningún gestor de estado en absoluto? En esta charla, los compararemos usando métricas reales en una aplicación realista y pesada en datos que visualiza grandes conjuntos de datos con gráficos de datos en vivo y renderizado 3D.

State Wars: Evaluación Comparativa de Estrategias de Gestión de Estado en Aplicaciones React Pesadas en Datos

Elina, front-end developer at PhysicsX, compares state management library performance. Data-heavy UI visualization challenges. Recoil replaced; exploring Jotai, Redux Toolkit, Zustand, MobX. Does the library choice significantly impact real app performance? Real timings measurement experiments; safe-to-state time and render time analysis across libraries with various payload sizes. Jotai, MobX, Recoil, and RTK performance focus. Comparing Recoil, Jotai, RTK, Redux, and MobX in state management. User interaction testing for state propagation and highlighting across plots. Performance comparison of state management libraries focusing on rendering and optimization experiments with plot updates. Libraries compared for performance in storing dates and rendering data on plots. Rankings show Recoil, MobX, Jotai around two seconds, Zustand, RTK around four seconds. Consider library fit with your data structure and design state shape and subscription boundaries accordingly.

Which state library is the right choice for your app – Redux, MobX, Zustand, Jotai, or no state manager at all? In this talk, we’ll compare them using real metrics in a realistic data-heavy app that visualises large datasets with live data charts and 3D rendering.

Benchmarking State Management Libraries in Data-Heavy React Apps

Los componentes listos para usar son vitales para entregar interfaces de usuario con velocidad y escala. Presentamos lynx-ui, el miembro más nuevo de la familia Lynx de tecnologías multiplataforma detrás de TikTok. Aprovechando la arquitectura de doble hilo de Lynx, ofrece un alto rendimiento e interactividad de grado nativo. Únase a nosotros para aprender cómo lo construimos y cómo desbloquea Lynx para escalar a través de una amplia gama de productos, aún más rápido.

lynx-ui: Mejor Lynx en Componentes

Shun discusses challenges in building React components for production, especially for mobile web; explores building complex mobile apps like TikTok with LYNX technology; introduces Lynx UI components for native user experiences; showcases customizable interactions with Lynx UI, including custom animation with MTS logic; demonstrates building composable dialog components and customizable design integration; extends Design System to TikTok with MotionJS adaptation and sponsorship announcement; introduces LYNX UI Theme LUNA and upcoming multi-platform app release.

Ready-to-use components are vital to delivering user interfaces with velocity and scale. Introducing lynx-ui, the newest member of the Lynx family of cross-platform technologies behind TikTok. By taking advantage of Lynx's dual-threaded architecture, it offers high performance and native-graded interactivity. Join us to learn how we built it, and how it unlocks Lynx to scale across a massive range of products, even faster.

lynx-ui: Best Lynx in Components

Xuan Huang

Zhou Fang

Unas pocas líneas de código y el tema de la UI seguirá cualquier color que desees. ¿Lo quieres? ¡Explora el espacio de color OKLCH para crear temas dinámicos! Este modelo de color asegura mejor a11y, transformaciones de color predecibles y soporta los colores de amplia gama P3. Cuando se trata de cambiar colores por código, RGB, HSL o LCH pueden llevar a bajo contraste y poca accesibilidad; pero OKLCH está específicamente diseñado para evitar resultados inesperados con transformaciones de color. Esta charla te guiará en la implementación de temas dinámicos usando OKLCH en tu proyecto de React junto con Tailwind CSS, ayudándote a generar automáticamente paletas accesibles con colores vibrantes y precisos.

Temas Dinámicos Automáticos y Accesibles Con OKLCH Color Space

Talk on building dynamic themes using Ocale CH ColorSpace. Personalized UI colors enhance user engagement and product uniqueness. Dynamic theming simplicity and challenges with RGB, HEX, and HSL color formats. KLCH color space: uniform lightness, simple modifications, and high accessibility. KLCH works like HSL but encodes lightness better, enabling practical dynamic theme implementation with CSS. Define lightness values visually for a custom palette mirroring tailwind CSS. Determine chroma for consistency using KLSH formula and user-selected hue. Check hue, adjust lightness and chroma for consistency. Develop Simple Hue Picker for hue selection. Transfer new colours into Tailwind CSS or use other CSS approaches. Use Colory Library for colour calculations.

A few lines of code and UI theme will follow any colour that you want. Do you want it? Explore the OKLCH colour space for creating dynamic themes! This colour model ensures better a11y, predictable color transformations and supports the wide-gamut P3 colors. When it comes to changing colours by code, RGB, HSL, or LCH can lead to low contrast and poor accessibility; but OKLCH is specifically designed to avoid unexpected results with colour transformations. This talk will guide you on implementing dynamic themes using OKLCH in your React project along with Tailwind CSS, helping you automatically generate accessible palettes with vibrant, accurate colours.

Automatic and Accessible Dynamic Themes With OKLCH Color Space

Llevar una aplicación React lista para producción implica más que solo elegir un framework. Para enviar características de manera eficiente, los desarrolladores necesitan una canalización confiable que pueda manejar todo, desde el linting hasta el bundling, de la manera más rápida y precisa posible. En esta charla, exploraremos cómo herramientas modernas como Rolldown y Oxc pueden acelerar tu flujo de trabajo de desarrollo, cómo pueden ayudar en tu proyecto hoy y qué está planeado para el futuro.

Rust Meets React: Adentrándose en la Próxima Generación de la Canalización de Construcción para Aplicaciones React

Choosing the right tools and frameworks is crucial for React projects. VEET enhances developer experience and project adaptability. Optimizing tool stacks with Rolldown can improve production builds. Understanding build steps and code optimization is essential for efficient development. Bundlers play a key role in code optimization and Rolldown offers a unique approach. Rolldown accelerates React development by boosting build speed and optimizing bundle sizes. Xcalibur and Outline show significant improvements in build times. Developing bundler components with OXC and exploring its capabilities. Enhancing Oxlint and Oxformat functionality for improved toolchain. Rolldown's evolution and future plans for Vite integration.

Getting to a production-ready React application is about more than just choosing a framework. To ship features efficiently, developers need a reliable pipeline that can handle everything, from linting to bundling, as quickly and accurately as possible. In this talk, we will explore how modern tools like Rolldown and Oxc can speed up your development workflow, how they can help in your project today and what is planned for the future.

Rust Meets React: Diving Into the Next Generation Build Pipeline for React Apps

Alexander Lichter

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Gain insights into optimizing server-side rendering, enhancing application interactivity through Server Actions and React 19 hooks, and mastering form creation for robust data handling and validation. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Hands-on React Server Components, Server Actions, and Forms

Crea experiencias educativas XR inmersivas a través de renderizado 3D declarativo con esta masterclass avanzada. Aprovecha la arquitectura basada en componentes de React Three Fiber para construir un explorador del sistema solar gamificado que presenta mecánicas orbitales dinámicas, raycasting interactivo y optimizaciones de WebGL. Domina técnicas críticas para el rendimiento, incluyendo la implementación de InstancedMesh, gestión de estado reactiva e integración de WebXR mientras creas visualizaciones STEM atractivas. Esta masterclass conecta conceptos de física teórica con desarrollo práctico de front-end, demostrando cómo Three.js puede transformar contenido educativo a través de paradigmas de computación espacial.Agenda:<ol><li>Introducción a React Three Fiber y Three.js: Configuración del entorno del proyecto</li><li>Construcción de la Escena del Sistema Solar: Creación de planetas, órbitas y fondos espaciales con animaciones</li><li> Interactividad y Gamificación: Raycasting para selección e interacción de objetos</li><li>Optimización del Rendimiento: Uso de InstancedMesh para renderizado eficiente</li><li>Integración de WebXR: Habilitación de experiencias AR/VR en el navegador</li></ol>

Gamified 3D Solar System Explorer: Un Viaje de Aprendizaje Interactivo con Three.js

Huda Motarib introduces a gamified 3D solar system explorer using 3JS and React TreeFiber. The workshop focuses on creating interactive learning environments for STEM education, emphasizing immersive experiences and hands-on coding examples. Discusses optimization techniques for React3 Fiber, including direct value changes for mesh rotation and efficient animation. Covers scaling planets, user interaction, realistic orbits, interactive planet details, moon creation, and deployment strategies.

Craft immersive XR educational experiences through declarative 3D rendering with this advanced workshop. Leverage React Three Fiber's component-based architecture to build a gamified solar system explorer featuring dynamic orbital mechanics, interactive raycasting, and WebGL optimizations. Master performance-critical techniques including InstancedMesh implementation, reactive state management, and WebXR integration while creating engaging STEM visualizations. This workshop bridges theoretical physics concepts with practical front-end development, demonstrating how Three.js can transform educational content through spatial computing paradigms.Agenda:<ol><li>Introduction to React Three Fiber and Three.js: Setting up the project environment</li><li>Building the Solar System Scene: Creating planets, orbits, and space backgrounds with animations</li><li> Interactivity and Gamification: Raycasting for object selection and interaction</li><li>Performance Optimization: Using InstancedMesh for efficient rendering</li><li>WebXR Integration: Enabling AR/VR experiences in the browser</li></ol>

Gamified 3D Solar System Explorer: An Interactive Learning Journey with Three.js

Houda Mouttalib

El panorama del estilo en React está evolucionando rápidamente. Con Server Components, Tailwind v4 y la próxima era de estándares CSS, nuestros viejos hábitos necesitan una actualización. En esta masterclass, pondremos a prueba CSS Modules, Tailwind CSS y CSS-in-JS frente a demandas del mundo real como renderizado del lado del servidor, UI en streaming, tematización escalable y rendimiento en tiempo de ejecución. Aprenderás cómo las elecciones de estilo impactan el tamaño de la carga útil, el comportamiento asíncrono y la consistencia del sistema de diseño a escala. Desglosaremos los compromisos ocultos entre enfoques de CSS de utilidad primero, CSS con alcance y CSS-in-JS en tiempo de ejecución. Espera un marco práctico de toma de decisiones que puedas aplicar inmediatamente a tus proyectos, uno que equilibre la experiencia del desarrollador con el rendimiento en producción. Te irás con una hoja de ruta moderna para construir aplicaciones React que estén estilizadas para durar.

Rethinking React Styling for the RSC Era

Bree discusses the evolution of React styling with React 19, Tailwind, and server-side rendering components, emphasizing static CSS generation. The shift towards native CSS and CSS modules for better scalability and control, and the rise in popularity of Tailwind CSS for its utility-first approach. Challenges in React styling implementations include runtime libraries, streaming UI, scalable theming, and overhead reduction. Panda CSS emerges as a potential successor to Tailwind CSS, offering a blend of CSS and JS experience. Styling decisions in 2025 are philosophical, with Tailwind for speed, Panda CSS for complex design systems, and CSS modules for stability.

React’s styling landscape is evolving fast. With Server Components, Tailwind v4, and the next era of CSS standards, our old habits need an upgrade. In this talk, we’ll put CSS Modules, Tailwind CSS, and CSS-in-JS to the test against real-world demands like server-side rendering, streaming UI, scalable theming, and runtime performance. You’ll learn how styling choices impact payload size, async behavior, and design system consistency at scale. We’ll break down hidden trade-offs between utility-first, scoped CSS, and runtime CSS-in-JS approaches. Expect a practical decision-making framework you can apply immediately to your projects, one that balances developer experience with production performance. You’ll leave with a modern roadmap for building React apps that are styled to last.

Bree Hall

This workshop bridges the long-standing gap between React developers and production-ready delivery. Many front-end developers know how to build great interfaces but they stumble when it comes to building, testing, deploying, and monitoring those apps in real-world environments.This workshop gives React developers the DevOps superpowers they need.You’ll learn how to:<ul><li>Dockerize your React application for development and production following best practices from Docker Captain Leader.</li><li>Build scalable CI/CD pipelines using GitHub Actions</li><li>Optimize your apps for performance and reliability</li></ul>This is not theory. It’s not a shallow overview. This is a production-focused, real-world workshop by a front-end developer who lives and breathes this every day.

DevOps for React Developers: From Code to Production

Kristiyan Velkov

Los Micro Frontends son una de las herramientas para garantizar la escalabilidad en aplicaciones a gran escala. Para usar correctamente los micro frontends, algunas de las propiedades clave de un monolito deben ser abandonadas. Esto puede resultar en desventajas severas que son especialmente visibles en industrias reguladas como la atención médica.En esta charla, veremos una aplicación web a gran escala que fue desarrollada para uno de los principales proveedores de tecnología médica del mundo. En particular, investigamos cómo el proyecto logró utilizar las mejores prácticas tanto del área de computación centralizada como distribuida, para ser escalable y, sin embargo, cumplir completamente con los aspectos regulatorios.

React-First Micro Frontends en Industrias Reguladas

Welcome to React-first micro-frontends in regulated industries. Introduction to micro-frontends and subdomains in web applications. Challenges of developing applications in regulated industries with strict rules and compliance regulations. Challenges of managing documentation and dependencies in micro front end solutions. Challenges in transitioning to a hybrid centralized-distributed approach for micro front ends. Control and orchestration in microfront-end environments; decentralized development and deployment with centralized oversight. Teams can choose not to upgrade to the latest version immediately; orchestration involves provisioning for end users and utilizing feature flags. In production, carefully selected microfront-ends are used. Using React offers advantages like easy version updates and dependency management. Avoid tightly coupling components from different micro-frontends. Opt for a loosely based approach with a registry in the central app shell for registering necessary fragments.

Micro Frontends are one of the tools to ensure scalability in large-scale applications. To properly use micro frontends some of the key properties of a monolith need to be given up. This can result in severe drawbacks that are especially visible in regulated industries such as healthcare.In this talk we'll look at a large-scale web application that was developed for one of the world's leading medical technology suppliers. In particular, we investigate how the project managed to use best practices of both, the centralized and distributed computing area, to be scalable yet fully compliant to regulatory aspects.

React-First Micro Frontends in Regulated Industries

Al igual que la promesa de pastel en Portal, los formularios de inicio de sesión están en todas partes en el desarrollo web. Aunque pueden parecer funcionales a primera vista, muchos usuarios con discapacidades se encuentran con un laberinto de muros invisibles, desde trampas de teclado hasta CAPTCHAs inaccesibles. ¡Es como si GLaDOS hubiera diseñado estos formularios ella misma para probarnos!En este recorrido práctico, depuraremos los problemas de accesibilidad de un componente de inicio de sesión de React en vivo, similar a atravesar esas cámaras de prueba: Usando un lector de pantalla real, mostraremos cómo pequeñas mejoras, como la implementación adecuada de ARIA y una gestión efectiva del enfoque, pueden transformar una cámara de prueba compleja en una experiencia de usuario fluida. Además, abordaremos los errores comunes que GLaDOS podría lanzarnos tanto en el universo de Portal como en el mundo real de la accesibilidad, especialmente en lo que respecta a los procesos de autenticación y sus necesidades especiales. Así que toma tu pistola de portal: trabajemos juntos para derribar estas barreras y asegurarnos de que la autenticación realmente funcione para todos. ¡El pastel podría ser una mentira, pero la accesibilidad no tiene por qué serlo!

El Pastel Es una Mentira... Y También lo Es la Accesibilidad de Tu Login

The Workshop covered a wide range of topics related to accessibility in software development. It included discussions on the spectrum of disabilities, the importance of meeting true accessibility standards, and the significance of error handling and focus indicators for better accessibility. Participants learned about enhancing error messages, considering colorblindness in design, and the use of biometrics and passkeys for authentication. The Workshop also highlighted the need for multiple MFA options, reducing contact switches for improved accessibility, and incorporating AI component libraries for enhanced user experiences.

Much like the promise of cake in Portal, login forms are everywhere in web development. While they may seem functional at first glance, many users with disabilities encounter a maze of invisible walls, from keyboard traps to inaccessible CAPTCHAs. It's as if GLaDOS designed these forms herself to test us!In this practical walkthrough, we will debug the accessibility issues of a real React login component live, similar to traversing those test chambers: Using an actual screen reader, we'll show how minor improvements, such as proper ARIA implementation and effective focus management, can transform a complex test chamber into a smooth user experience. Additionally, we will address the common pitfalls that GLaDOS might throw at us in both the Portal universe and the real world of accessibility, especially concerning authentication processes and its special needs. So grab your portal gun—let's work together to break down these barriers and ensure that authentication truly works for everyone. The cake might be a lie, but accessibility doesn't have to be!

The Cake Is a Lie... And So Is Your Login’s Accessibility

Ramona Schwering

¡Domina la comunicación en tiempo real en React y React Native! Exploraremos WebSockets, WebRTC y el futuro con WebTransport para construir aplicaciones altamente interactivas y en vivo en plataformas web y móviles.

React Realtime: De Sockets a Streams (Web & Native)

Violina emphasizes real-time data importance in React apps for web and mobile, covering WebSockets, WebRTC, and WebTransport. Evolution of real-time communication from polling to WebSocket technology. WebSocket connection management in React, optimizing with useCallback. WebRTC implementation for peer-to-peer communication, integrating signaling and server guidance in React apps. Utilizing WebRTC in React Native for feature parity. Comparison of WebRTC for peer-to-peer and WebSockets for client-server connections. Future trends include Web transport with HTTP 3.0 and QUIC for enhanced real-time communication performance.

Master real-time communication in React and React Native! We'll explore WebSockets, WebRTC, and the future with WebTransport to build highly interactive, live applications across web and mobile platforms.

React Realtime: From Sockets to Streams (Web & Native)

Esta charla explora cómo ejecutar de manera efectiva React Server Components (RSC) en clústeres de Kubernetes altamente disponibles. Cubre el cambio hacia una Experiencia Full Stack en el desarrollo moderno de React, donde los componentes interactúan directamente con bases de datos, capas de caché y sistemas de mensajería. Aprenderás estrategias prácticas para el almacenamiento en caché de datos dinámicos, la gestión de acciones del servidor y el despliegue de RSC a escala con Kubernetes. La sesión también incluye lecciones del mundo real sobre cómo evitar errores comunes.

React Server Components en Kubernetes: Ship Happens

Jan discusses running components in Kubernetes, emphasizing the use of Docker containers and securing Docker images. Kubernetes ensures high availability by distributing load to healthy nodes and can spin up new nodes in case of failures. Next.js explains caching in React server components and the challenges in Kubernetes high availability setups. Strategies for optimizing data caching include avoiding caching authenticated routes and simplifying server components. The talk covers Kubernetes probes, React Router integration in Kubernetes, direct server action to Kafka, and handling component updates and pod failures. Entry into Kubernetes as a front-end engineer, embracing the Kubernetes journey, balancing caching strategies for app speed and accuracy, and dealing with version skew and service mesh are also discussed.

This talk explores how to effectively run React Server Components (RSC) in highly available Kubernetes clusters. It covers the shift toward a Full Stack Experience in modern React development, where components interact directly with databases, caching layers, and messaging systems. You will learn practical strategies for caching dynamic data, managing server actions, and deploying RSC at scale with Kubernetes. The session also includes real-world lessons on avoiding common pitfalls.

React Advanced 2025

We will be diving deep

Aurora Scharff

Taz Singh

Ciarán Curley

Olivier Tassinari

Lera

James Swinton-Bland

Florian Rappl

Irina Baeva

Aleksei Podgaev

Simon Ouyang

Lera

Daria Shabala

Luca Del Puppo

Vinicios Neves

Krasimir Tsonev

Nina Torgunakova

Richard Carrigan

Rajni Gediya

Thibault Van den Broecke

David Pugh

Violina Popova

Marko Draksic

Nick Taylor

Elaine Shinagawa

Dante De Ruwe

Travis Arnold

Bela Bohlender

Mauro Bartolomeoli

André Bauer

Riccardo Erra

Danny Povolotski

Elina Denisova

Herrington Darkholme

Thorsten Hell

Total attendees