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

Varun

Aurora Scharff

Taz Singh

Ciarán Curley

Olivier Tassinari

Lera

Petra vos

James Swinton-Bland

Florian Rappl

Irina Baeva

Aleksei Podgaev

Simon Ouyang

Daria Shabala

Luca Del Puppo

Krasimir Tsonev

Nina Torgunakova

Richard Carrigan

Rajni Gediya

Thibault Van den Broecke

Bogdan Plieshka

Violina Popova

Marko Draksic

 Vinicios Neves

Nick Taylor

Elaine Shinagawa

Dante De Ruwe

Travis Arnold

Bela Bohlender

Mauro Bartolomeoli

André Bauer

Riccardo Erra

Danny Povolotski

Elina Denisova

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

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

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

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

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

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

Most "generative UI" today is little more than glorified tool calling of premade components. Most people are not willing to experiment with truly generated experiences on the fly out of a fear of lack of familiarity and not wanting to create unreliable/unstable UIs for users. This is a skill issue. Let me show you how.

The Real Potential of Generative UI

Shawn Swyx Wang

¿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

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

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

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

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

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

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

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

¿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

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

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 West introduces Nux, a URL state manager for React, offering teleportation and time travel abilities. Nuxt addresses browser rate limits on URL updates and creates entry points into the app by putting state in the URL. Nuxt.js 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 Nuxt.js. 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

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

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

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

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 Server Components in Kubernetes: Ship Happens

Jan Peer Stöcklmair

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

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 paredes invisibles, desde trampas de teclado hasta CAPTCHAs inaccesibles. ¡Es como si GLaDOS hubiera diseñado estos formularios ella misma para probarnos! En esta sesión práctica, 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 tal como se describen en las WCAG. 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 Inicio de Sesión

Welcome to React Advanced! Disappointed about the cake. Let's discuss accessibility and a mysterious waking up scenario in a strange room. A metaphorical scenario with a confusing room and inaccessible apps, linked to the game Portal as a puzzle platformer series with challenging levels and a taunting AI named Gladys. Discussing the spectrum of disability, including temporary and situational disabilities like wearing glasses affecting screen readability and the importance of considering accessibility in all applications. Discussing the importance of true accessibility in projects and the need to go beyond the legal requirements for genuine inclusivity. Exploring the importance of keyboard accessibility and focus indication for non-visual users. Exploring the functionality of screen readers across different operating systems and demonstrating its use in a web accessibility context with voiceover functionality.

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 session, 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 as written down in the WCAG. 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

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.

¡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)

¿SSR, Core Web Vitals y accesibilidad te suenan familiares? ¡Si estás luchando con estos aspectos del desarrollo web, no estás solo!¿Pero qué pasaría si la clave para abordarlos ya estuviera abierta en tu pantalla? ¡Sí, Chrome DevTools puede ser tu mejor amigo!En esta charla, profundizaremos en formas prácticas de usar tu navegador favorito para encontrar problemas de rendimiento, corregir errores complicados de accesibilidad y mejorar esas puntuaciones de Web Vitals.Aprende cómo convertir las ideas de DevTools en mejoras tangibles. ¿Estás listo para hacer de tu navegador tu próximo compañero de equipo?¡Nos vemos allí!

Chrome DevTools, ¡para aplicaciones SSR súper rápidas!

Introduction to Chrome DevTools and the challenges developers face in application development. Utilizing features for debugging, improving performance, accessibility, and security. Exploring file optimization and network throttling for efficient loading and user experience enhancement. Testing application performance under different network conditions and optimizing for varied speeds. Working on PWA applications, testing on slow connections, and ensuring accessibility. Analyzing performance panel insights for optimizing application performance. Using built-in insights, labeling the performance panel, and collaborating with teammates. Leveraging Chrome DevTool MCP server for performance testing and application code improvement.

SSR, Core Web Vitals, and accessibility sound familiar? If you're struggling with these aspects of web development, you're not alone!But what if the key to tackling them was already open on your screen? Yes, Chrome DevTools can be your best friend!In this talk, we'll dive into practical ways to use your favourite browser to find performance issues, fix tricky accessibility mistakes, and improve those Web Vitals scores.Learn how to turn DevTools insights into tangible improvements. Are you ready to make your browser your next teammate?See you there!

Chrome DevTools, for Super Fast SSR Applications!

Esta charla explora cómo transformar componentes de React en Web Components basados en estándares, desbloqueando la capacidad de compartir elementos de UI a través de aplicaciones de Angular, Vue, Svelte, e incluso JavaScript puro. Mientras que frameworks como Angular y Vue ofrecen soporte nativo para este tipo de interoperabilidad, React no lo hace, al menos, no de forma predeterminada.Esta charla desmitifica cómo lograr resultados similares en React utilizando patrones y herramientas compatibles. Al cerrar la brecha entre React y el estándar de Web Components, podemos promover la verdadera reutilización de componentes, reducir la duplicación y simplificar la integración en micro frontends y sistemas de diseño. Los asistentes aprenderán técnicas prácticas, opciones de herramientas y beneficios del mundo real de esta poderosa estrategia arquitectónica.

Escribe una vez, usa en todas partes: React se encuentra con Web Components

Exploring React and web components, bridging the gap between promises and reality. React's limitations in component reusability and the universal potential of Web Components. The evolution of Web Components and their key features in comparison to React. React rendering UI inside Web Components for enhanced portability and encapsulation. React's UI power becomes framework agnostic with dynamic Web Components bridging data and functions for React rendering. React's rendering flexibility allows cross-framework compatibility for single components, showcased in a versatile monorepo setup. Creating and integrating custom elements with React components for cross-framework compatibility. Using React components as custom elements in Vue, showcasing cross-framework compatibility and tool integration.

This talk explores how to transform React components into standards-based Web Components, unlocking the ability to share UI elements across Angular, Vue, Svelte, and even vanilla JavaScript applications. While frameworks like Angular and Vue offer native support for this kind of interoperability, React doesn't – at least, not out of the box.This talk demystifies how to achieve similar results in React using supported patterns and tooling. By bridging the gap between React and the Web Components standard, we can promote true component reusability, reduce duplication, and simplify integration in micro frontends and design systems. Attendees will learn practical techniques, tooling options, and real-world benefits of this powerful architectural strategy.

Write Once, Use Everywhere: React Meets Web Components

Hadar Geva

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

Hablemos de estrategias del mundo real para integrar pruebas de accesibilidad en tu flujo de trabajo de React — sin ralentizar a tu equipo. Desde axe-core hasta CI pipelines, cubriremos cómo pasar de correcciones reactivas a accesibilidad proactiva.

Pruebas de Accesibilidad Automatizadas en React: Más Allá de lo Básico

Introduction to Accessibility Testing in React applications, emphasizing early automation and challenges in scaling. Importance of instant feedback, Unity test, and entry testing for code accessibility. Utilizing end-to-end testing tools like Jest-Axi and Cypress to ensure accessibility compliance. Emphasis on manual testing alongside automated tools. Encouragement for discussions on LinkedIn to enhance accessibility knowledge.

Let's talk about real-world strategies to integrate accessibility testing into your React workflow — without slowing down your team. From axe-core to CI pipelines, we’ll cover how to go from reactive fixes to proactive accessibility.

Automated Accessibility Testing in React: Beyond the Basics

Al tratar la documentación como bloques de construcción de React, podemos generar un README de una sola página, una referencia de API interactiva o un sitio de sistema de diseño completamente personalizado desde la misma fuente de verdad.El resultado es documentación de API siempre precisa, páginas MDX y ejemplos interactivos que se actualizan cada vez que envías código, no más documentación obsoleta o tipos olvidados. Mostraré cómo los React Server Components encajan perfectamente para facilitar tener documentación precisa y actualizada tan extensible como cualquier UI.

Documentación Siempre Precisa

As a designer and engineer, I've faced challenges with outdated documentation causing friction and trust erosion. Documentation drift arises from scattered sources and lack of a single reference, leading to ambiguity and staleness. React server components offer benefits like server-side rendering, composition flexibility, and lazy evaluation for enhancing documentation quality. By directly generating documentation from the TypeScript compiler, React server components ensure accurate and up-to-date content, improving documentation accuracy and flexibility.

By treating documentation as React building blocks, we can generate a one‑page README, an interactive API reference, or a fully branded design‑system site from the same source of truth.The result is always‑accurate API documentation, MDX pages, and interactive examples that stay updated every time you push code, no more stale documentation or forgotten types. I’ll show how React Server Components fits perfectly into making it easy to have accurate, up-to-date documentation as extensible as any UI.

Always Accurate Documentation

En la serie de televisión Knight Rider, el concepto de un coche inteligente era pura ciencia ficción. Más de 40 años después, ahora tenemos las herramientas para hacerlo realidad, puramente en el navegador. Esta charla explora la combinación de técnicas de IA como RAG y llamadas a funciones con APIs avanzadas del navegador (por ejemplo, WebBluetooth) para crear un agente de IA basado en el navegador con personalidad, memoria y autonomía, impulsado por WebAssembly y WebGPU, ¡totalmente offline y preservando la privacidad!

Construyamos K.I.T.T. Con JavaScript

Nico introducing himself and his work in machine learning and AI. Exploring the essence of Kit and its human-like features, and the use of Transform.js for machine learning in the browser. Understanding the significance of model parameters and the availability of open source models like Apertus and GEMMA3. Creating a fine-tuned version of the AI pipeline using prompt engineering with a new system prompt for improved behavior and responses. Utilizing Reddit to extract scenes, transforming screenplays into structured JSON, and creating an LLM summarizer for semantic similarity comparisons. Introduction to Agentic Rack System and Autonomous Task Completion by AA Agents. Utilizing TensorFlow and Transformer JS for Various Tasks and Models. Running LLMs in the browser is not practical due to large model sizes. Device performance matters in browser-based AI processing.

In the TV series Knight Rider, the concept of an intelligent car was pure sci-fi. Over 40 years later, we now have the tools to bring it to life - purely in the browser. This talk explores combining AI techniques like RAG and function calling with advanced browser APIs (e.g., WebBluetooth) to create a browser-based AI agent with personality, memory, and autonomy, powered by WebAssembly and WebGPU - fully offline and privacy-preserving!

Let’s build K.I.T.T. With JavaScript

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

TypeScript tiene un sistema de tipos muy único que es universalmente amado. Sin embargo, la mayoría de los desarrolladores solo han arañado la superficie de lo que es posible hacer con los tipos de TypeScript.Por ejemplo, ¿estás familiarizado con la palabra clave `infer`? ¿Qué tal los tipos recursivos? ¿Sabías que 0 puede ser un tipo? ¿Sabías que puedes hacer aritmética usando puramente tipos de TypeScript? Oh sí, ¿también sabías que puedes reproducir Wordle usando puramente tipos de TypeScript?En esta sesión 100% orientada al código, Dante te mostrará partes extrañas e interesantes del sistema de tipos de TypeScript que te harán pensar "esto es extremo, muy genial y hilarantemente nerd, pero ¿cuándo necesitaría esto?". La verdad es que podrías necesitarlo en algunas situaciones específicas; pero más a menudo que no, nunca usarás estas cosas... Aunque, ¿alguna vez nos ha detenido eso de simplemente divertirnos?

Codificación Con Complejidad de Tiempo O(0): Diversión Con TypeScript Avanzado

Dante discusses advanced TypeScript concepts in an interactive coding session, demonstrating a Wordle game and explaining the guessing process based on color-coded feedback. The implementation of the Wordle game in TypeScript at compile time and defining the Wordle type in a few lines of code are explored. TypeScript conditional checks using 'extends' for type constraints and creation of custom types like 'not empty' and 'contains' are highlighted. Advanced string template literals are used in TypeScript to check for specific patterns and constraints within strings. The infer keyword in TypeScript is used to determine the first character of a string pattern, and a repeat function is implemented to duplicate a type multiple times. Recursion, string comparison, character indexing, and searching in TypeScript are discussed, along with the practical application of complex TypeScript types in libraries.

TypeScript has a very unique type system that is universally loved. Yet, most developers have only scratched the surface on what unique things are possible using Typescript's types.For example, are you familiar with the `infer` keyword? How about recursive types? Did you know that 0 can be a type? Did you know you can do arithmetic using purely typescript types? Oh yeah, did you also know you can reproduce Wordle using purely typescript types?In this 100% code-driven session, Dante will show you weird and interesting parts of the Typescript type system that make you think "this is extreme, very cool and hilariously nerdy, but when would I ever need this?". The fact of the matter is, you might, in some specific situations; but more often than not you will never use this stuff... Though, has that ever stopped us from just having fun?

React Advanced 2025

We will be diving deep

Varun

Aurora Scharff

Taz Singh

Ciarán Curley

Olivier Tassinari

Lera

Petra vos

James Swinton-Bland

Florian Rappl

Irina Baeva

Lera

Aleksei Podgaev

Simon Ouyang

Daria Shabala

Luca Del Puppo

Krasimir Tsonev

Nina Torgunakova

Richard Carrigan

Rajni Gediya

Thibault Van den Broecke

Bogdan Plieshka

Violina Popova

Marko Draksic

Vinicios Neves

Nick Taylor

Elaine Shinagawa

Dante De Ruwe

Travis Arnold

Bela Bohlender

Mauro Bartolomeoli

André Bauer

Riccardo Erra

Danny Povolotski

Elina Denisova

Total attendees