Name: React Summit US 2025
Start: 2025-11-18T13:00:00.000Z
End: 2025-11-21T22:59:00.000Z

Varun

Vlad Dumitrica

Olivier Tassinari

Lera

Petra vos

James Swinton-Bland

Julian Burr

Brian Whippo

Nicolas Carlo

Simon Ouyang

Daria Shabala

Oli Legat

Seungho Park

Kiril Peyanski

Mateusz Jagodziński

Rahul Nanwani

Richard Carrigan

Joran Quinten

Thibault Van den Broecke

Akbar Mirza

Amanda Witecki

Houda Mouttalib

Pascal Moser

Sander Vervaeke

Akash Hamirwasia

Mauro Bartolomeoli

Matt Seccafien

Riccardo Erra

Ruben Casas

Henry Lie

Vitor Malencar

Abhijeet Prasad

Joao Gaspar Silva

Elina Denisova

Mientras los desarrolladores recurren cada vez más a los asistentes de IA para todo, desde la creación de componentes hasta la generación de aplicaciones completas, queda una pregunta crítica: ¿qué tan buena es realmente la IA para comprender y escribir con fluidez código de React de calidad de producción? Esta charla va más allá del bombo publicitario para ofrecer una mirada sincera y detrás de escena a nuestro trabajo en la cuantificación de las capacidades de los modelos de lenguaje grandes, en el mundo real del desarrollo web. Exploraremos ideas clave de los benchmarks de la industria sobre su capacidad para construir aplicaciones web funcionales e interactivas utilizando tecnologías como Next.js. Compartiremos nuestras exploraciones en la construcción de un soporte de codificación full-stack más sólido para React usando Gemini. Únase a nosotros para una exploración basada en datos pero profundamente humana del estado actual y el potencial futuro de la generación de código de IA en el mundo de React.

How Good is AI at Coding React (really)?

Exploring AI's impact on React coding quality and the importance of context, tools, and practices in leveraging AI effectively. AI as a force multiplier, differences between vibe coding & AI-assisted engineering, AI models' competencies in React prompts, and React developers' favorable position amidst AI advancements. AI's implications for React development, complexity cliff in React work, and AI's design challenges for React developers. React work's complexity cliff, Design Arena benchmarks for AI design capabilities, AI's design challenges for React developers. AI's role in visual design control, Design Arena's insights on scaffolding impact, AI's UI scaffold capabilities and human judgment necessity. Vercell's Next.js evals, Webbench by ByteDance, and Web Dev Arena insights on AI performance in web development. Gemini 3 and GPT-5 catching up in design models, exploring website code generation, and design sensibility in AI for React workflow. Solving the purple problem in AI training, tips for using AI in React development for building sites, and managing AI like a junior developer. Evaluating AI's performance in complex tasks, lessons on using AI like a developer, and the importance of specificity and human oversight in AI usage. Enforcing productivity and supervision, addressing context failures through engineering and providing comprehensive context for agent performance. Template for context engineering, controlling tooling quality, using Context-7 for fresh docs and examples, leveraging MCP servers for real data, and improving overall quality loop. Connecting tools for closed-loop coding, Vive coding for rapid product creation, UI components for isolated, reusable components. UI components arena focus on isolated, reusable components and visual comparisons. Guidance for UI component generation and complex 3D and data visualization models for interactive experiences. AI assistants integration strategies for 3D and data visualization. Importance of specific details like libraries and scene descriptions for optimal AI assistance. Balancing control with AI model generation and the critical factors in AI code success or failure. Debugging workflow lessons applicable to all; New flow state in AI-assisted development focusing on orchestration and code creation; Gemini 3 launch for web development and design leadership. Website aesthetics and design improvements; Proactive tool utilization for React devs; Embrace AI for faster product development. AI in automated debugging with AI agents; Limitless potential of AI in coding quality; Image generation tools for slides; Addressing security and architectural regressions in AI-generated code. AI's Impact on Future Frameworks and Team Alignment in Workflow Standardization. Strategies for Context Bugs and Workflow Optimization.

While developers are increasingly turning to AI assistants for everything from component creation to generating full-blown apps, a critical question remains: just how good is AI at truly understanding and fluently writing production-quality React code? This talk moves beyond the hype to offer a candid, behind-the-scenes look at our work in quantifying the capabilities of large language models, in the real world of web development. We will explore key insights from industry benchmarks on their ability to build functional and interactive web applications using technologies like Next.js. We will share our explorations into building stronger full-stack coding support for React using Gemini. Join us for a data-driven yet deeply human exploration of the current state and future potential of AI code generation in the world of React.

Addy Osmani

La gestión del estado es fácil, hasta que no lo es. Claro, useState() está bien para la gestión de estado de componentes simples, literalmente para eso es. Pero a medida que nuestras aplicaciones de React crecen en complejidad, la inevitable larga cadena de useStates hace que sea más difícil entender y mantener la lógica de la aplicación, convirtiendo nuestros componentes en máquinas de Rube Goldberg.React 19 abre todo un nuevo mundo de patrones de gestión de estado que realmente tienen sentido para el estado local, compartido y global. En esta charla, pasaremos de usar useState() en todas partes a descubrir cómo los componentes del servidor, los parámetros de URL y más pueden hacer que la gestión del estado sea mucho más sencilla. También revisaremos hooks clásicos, aprenderemos sobre nuevos hooks y veremos cómo las bibliotecas de gestión de estado de terceros y las aplicaciones local-first pueden ser útiles.Digamos adiós (en su mayoría) a useState(), y hola a un futuro donde la gestión del estado no es solo una pila de setStates.

Adiós, useState

Hello, React Summit and goodbye, you states. Introduction of the speaker, David K. P., creator of Xstate library. Discussion on challenges with useEffect, managing multiple useEffects, implications of state overuse, optimizing state management in React, enhancing form data handling, effective state management strategies, innovative state management approaches, state management best practices, exploring state management options, promoting best practices, and exploring state management tools.

State management is easy, until it's not. Sure, useState() is fine for simple component state management – that's literally what it's for. But as our React apps grow in complexity, the inevitable long chain of useStates make it more difficult to understand and maintain app logic, turning our components into Rube Goldberg machines.React 19 opens up a whole new world of state management patterns that actually make sense for local, shared, and global state. In this talk, we'll transition from using useState() everywhere to discovering how server components, URL parameters, and more can make state management much simpler. We'll also revisit classic hooks, learn about new hooks, and see how 3rd-party state management libraries and local-first apps can be useful.Let's say goodbye (mostly) to useState(), and hello to a future where state management isn't just a stack of setStates.

Goodbye, useState

David Khourshid

En grandes proyectos de React, los toggles de características y las construcciones condicionales pueden volverse rápidamente desordenados. ¿Qué pasaría si se pudieran agregar o eliminar características completas simplemente colocando o quitando una carpeta de tu proyecto? En esta masterclass, mostraré cómo una arquitectura de plugins hace que las aplicaciones de React sean más modulares y fáciles de mantener, con ejemplos de código prácticos de nuestro producto. Conclusiones para la audiencia: - Cómo estructurar aplicaciones de React para que las características vivan dentro de plugins autónomos. - Cómo esta arquitectura simplifica las construcciones y despliegues al excluir características no deseadas desde la fuente. - Patrones prácticos que puedes adoptar de inmediato para hacer tu base de código de React más modular.

Plug and Play Design: Construyendo Aplicaciones React Extensibles

Mateusz Jagodziński, principal developer at Synergy Codes, shares insights on Plug and Play Design Building Extendable React Applications, discussing feature flags, modularity, and real-world use cases. Challenges of feature flags, the concept of alternative modular design for feature management, and the importance of modularity in code organization and development. Configurability and limitations in feature management, showcasing a plugin-based design for flexible tool versions and code manipulation. Explanation of plug and play design for code manipulation and version control with full type safety in TypeScript projects. Exposing functions to register new plugins, organizing plugins' logic within individual folders, and implementing a build setup with a replacement mechanism for plugin files. Replacing missing plugins with a fallback code, enforcing restriction on direct plugin imports, and visualizing the relationship between plugins, adapters, and application components. Exploring pros and cons of self-contained plugins, addressing implementation overhead, and discussing the value of enforced modularity for AI coding tools. Discussing plugin management decisions based on client needs and the scalability of the approach with changing requirements and minor tweaks. Handling plugin version tracking, automated testing challenges, and feature control based on environments. Adapters and maintaining plugin compatibility through iterations and cosmetic changes, leveraging existing solutions for simplicity. Discussing the implications of not shipping separate builds for multiple customers and considering the benefits of smaller bundle size. Exploring the ease of trying out new features with separate plugins to assess overhead and developer experience.

In large React projects, feature toggles and conditional builds can quickly become messy. What if entire features could be added—or removed—just by dropping a folder in or out of your project? In this talk, I’ll show how a plugin architecture makes React applications more modular and easier to maintain, with practical code examples from our product. Audience Takeaways: - How to structure React applications so features live inside self-contained plugins. - How this architecture simplifies builds and deployments by excluding unwanted features at the source. - Practical patterns you can adopt immediately to make your React codebase more modular.

Plug and Play Design: Building Extendable React Applications

No te ascienden por tus habilidades de comunicación, pero en el momento en que asumes un rol de liderazgo, se convierten en tu activo más importante. Ya sea que seas un ingeniero creciendo en influencia o un gerente liderando un equipo, saber cómo navegar el lado humano del trabajo es esencial.En esta sesión, cubriremos cinco de las conversaciones más difíciles que enfrentarás en el trabajo: bajo rendimiento, dar retroalimentación, decir "no", crecimiento profesional y establecer límites.Te irás con marcos prácticos y repetibles para abordar cada conversación con claridad y confianza, construyendo confianza, fortaleciendo la colaboración y presentándote como el tipo de líder con el que la gente quiere trabajar.

5 Conversaciones Difíciles que los Gerentes Necesitan Tener

Kellie emphasizes the importance of having tough conversations in management, addressing underperformance using the care framework and support strategies. The STAR framework is highlighted for handling difficult feedback effectively. Effective communication with superiors involves acknowledging trade-offs and framing discussions around revenue impact. Setting clear communication boundaries is crucial for work-life balance and team efficiency. Encouraging a feedback culture, addressing promotion discussions transparently, and handling micromanagement concerns with empathy are key points discussed.

You don’t get promoted for your communication skills—but the moment you step into leadership, they become your most important asset. Whether you’re an engineer growing into influence or a manager leading a team, knowing how to navigate the human side of work is essential.In this session, we’ll cover five of the toughest conversations you’ll face at work: underperformance, giving feedback, saying “no,” career growth, and setting boundaries.You’ll walk away with practical, repeatable frameworks to approach each conversation with clarity and confidence—building trust, strengthening collaboration, and showing up as the kind of leader people want to work with.

5 Tough Conversations Managers Need to Have

Kelly Vaughn

Únete a Tanner Linsley, creador de TanStack, mientras presenta TanStack Start - el framework full-stack para React y Solid. Hablará sobre cómo puede manejar los requisitos más exigentes de enrutamiento full-stack, cómo puedes tener aplicaciones ricas e interactivas, y por qué no necesitas comprometerte entre experiencias de aplicaciones del lado del cliente vs del lado del servidor.

TanStack Start 1.0 - Un Nuevo Framework Full Stack para React y Amigos

The speaker introduces Tanstack Start, emphasizing type safety for better development experiences. Tanstack Start offers a client-first approach with seamless server-side integration. Tanstack Router provides server-side solutions like SSR and API routes. The demo showcases Tanstack CLI usage and server functions. Tanstack Start enables isomorphic code with server-only logic. Enhanced data validation and URL state management are highlighted. TanStack Start enhances React development speed and quality. Integration of trpc with SSR data-only mode simplifies application migration. TanStackRouter focuses on type safety and advanced functionality compared to ReactRouter.

Join Tanner Linsley, creator of TanStack's as he unveils TanStack Start - the full-stack framework for React and Solid. He'll talk about how it can handle the beefiest of full-stack routing requirements, how you can have rich and interactive applications, and why you don't need to compromise between client-side vs server-side application experiences.

TanStack Start 1.0 - A New Full Stack Framework for React and Friends

Tanner Linsley

Ray conducts a workshop on building full stack applications with Cursor, focusing on context engineering and leveraging rules like User Rules and Project Rules. Customizing tools and creating custom modes in Cursor for optimized workflows. Developing a resource hub for Cursor resources sharing. Utilizing Composer for efficient workflow planning. Investigating statement of work creation and managing resources. Implementing testing procedures and multiple models for feature development. Exploring agent.log history, hooks, and commands for workflow optimization. Creating custom commands, workflows integration, and code review processes. Troubleshooting browser bugs, creating linear tickets, and building reusable workflows with CodeRabbit integration. Developing meta workflows, custom rules, and efficient code review with a multi-step approach using Core Rabbit.

In this workshop, I’ll guide participants through a process for building full-stack applications using Cursor. We’ll cover setting up Cursor workflows, including rules, commands, and custom modes, to streamline development. We will use Cursor to draft PRDs, database schema, etc and a simple SOW. We’ll turn notes into actionable checklists to guide the build, connecting the front end, API, and database.Additionally, we’ll create workflows for debugging, testing, reviewing, and fixing the app while reducing hallucinations with precise prompts. The session will also include a security review workflow and techniques for applying prompts to achieve a modern UI design. Attendees will leave with a functioning app on their machine and a reusable development process.

How to Build Full-Stack Apps Using Cursor

 Shrey Shah

Únase a nosotros mientras exploramos el fascinante viaje de un píxel en el renderizado de una aplicación React, comenzando desde el momento en que un usuario escribe una URL en su navegador, hasta la fase final de renderizado e interacción. Nos adentraremos en cada etapa en detalle, cubriendo lo que sucede detrás de escena, por qué sucede y cómo los desarrolladores pueden optimizar cada parte para una experiencia de usuario más fluida. Esta charla proporcionará información sobre áreas clave como llamadas al servidor, procesamiento de JavaScript, obtención de recursos y renderizado dinámico. Es ideal para desarrolladores web que buscan profundizar su comprensión de todo el proceso de renderizado y encontrar formas prácticas de mejorar la eficiencia y el rendimiento de la aplicación.

El Viaje de un Píxel en una Aplicación React

Sze Magnezy discusses the importance of understanding web development technologies like React, HTML5, and WebSocket for optimizing websites and improving user experience. The challenges of website delivery include delivering a perfect user experience, slow network issues, DNS resolution complexities, and handling various resources efficiently. Optimization of HTML loading, resource compression, and prioritization are crucial for faster website delivery. Improving performance through code optimization, React best practices, and state management is key for enhancing user experience.

Join us as we explore the fascinating journey of a pixel in rendering a React application, starting from the moment a user types a URL into their browser, all the way to the final rendering and interaction phase. We will dive into each stage in detail, covering what happens behind the scenes, why it happens, and how developers can optimize each part for a smoother user experience. This talk will provide insights into key areas like server calls, JavaScript processing, resource fetching, and dynamic rendering. It’s ideal for web developers looking to deepen their understanding of the entire rendering process and find actionable ways to improve application efficiency and performance.

The Journey of a Pixel in a React Application

Shem Magnezi

This workshop will guide you through building a modern full-stack web application using RedwoodSDK and React Server Components. As a frontend developer, you'll learn how to leverage the latest React patterns to approach full-stack development with confidence. The workshop covers building server-rendered components, working with databases, implementing authentication, and deploying a real-world application. RedwoodSDK simplifies the transition from frontend to full-stack development, giving you the tools to create performant, modern web applications.

Modern Full-stack Web Application Using RedwoodSDK and React Server Components

Amy Dutton

Renderizar una aplicación de React con renderizado del lado del servidor (SSR) puede sentirse agridulce: por un lado, SSR asegura una carga rápida de la página y un gran SEO al renderizar toda la página en el servidor, sin embargo, el cliente debe descargar e hidratar todos estos componentes para hacer la página interactiva. Para páginas con mucho contenido, esto puede llevar a una cantidad significativa de JavaScript siendo cargado y ejecutado, causando tiempos de interacción más lentos y problemas de rendimiento importantes.  En Wix, enfrentamos un desafío significativo: ¿cómo podríamos ofrecer tiempos de interacción rapidísimos mientras evitamos el cuello de botella de rendimiento de descargar e hidratar cada componente renderizado por SSR en el cliente? Durante mucho tiempo, esto se sintió como un problema insoluble, hasta que la nueva API de Suspense cambió el juego. En esta charla, compartiré la historia de cómo abordamos este problema de frente, aprovechando la nueva API de Suspense introducida en React 18 para cargar e hidratar dinámicamente los componentes de React solo cuando entran en el viewport. Aunque las capacidades de renderizado basadas en promesas de Suspense no están ampliamente documentadas, demostraron ser la herramienta revolucionaria que necesitábamos para liberarnos de las limitaciones de la hidratación tradicional y mejorar el rendimiento de millones de sitios web de Wix. ¡Prepárate para una inmersión técnica profunda con muchos ejemplos de código que te equiparán para abordar los desafíos de hidratación y mejorar el rendimiento de React!

Ganando la Batalla de Hidratación: Desbloqueando el Rendimiento de React con el Poder de Suspense

Gil from Wix discusses solving a React performance bottleneck with selective hydration using Suspense API, showcasing real examples. Challenges of SSR with React hydration and its impact on interactivity and performance are outlined. The importance of selective hydration, efficient component loading, promise handling, lazy loading, and real-world impact are highlighted. Selective hydration enhances performance by reducing JS load, comparing server components with Suspense, and introducing React 19 optimizations. React 19 brings cleaner promise-based behavior, selective hydration improvements, and key takeaways on SSR benefits, suspense power, and React 19 enhancements.

Rendering a React app with server-side rendering (SSR) can feel bittersweet - on one hand, SSR ensures fast page load and great SEO by rendering the entire page on the server, however the client must download and hydrate all these components to make the page interactive. For pages with lots of content, this can lead to a significant amount of JavaScript being loaded and executed, causing slower interaction times and major performance issues.  At Wix, we faced a significant challenge: how could we deliver blazing-fast interaction times while avoiding the performance bottleneck of downloading and hydrating every SSR-rendered component on the client? For a long time, this felt like an unsolvable problem - until the new Suspense API changed the game. In this talk, I’ll share the story of how we tackled this problem head-on, leveraging the new Suspense API introduced in React 18 to dynamically load and hydrate React components only when they enter the viewport. While Suspense's promise-based rendering capabilities aren’t widely documented, they proved to be the game-changing tool we needed to break free from the limitations of traditional hydration and improve the performance of millions Wix websites. Prepare for a technical deep dive with lots of code examples that will equip you to tackle hydration challenges and boost React performance!

Winning the Hydration Battle: Unlocking React Performance with the Power of Suspense

Gil Eckstein

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 crear 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 renderer y reconciler 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 Beyond the DOM

Eric Rasmussen discusses React beyond the DOM, React PDF, Ink tools, and rendering to Markdown. The overview includes React Reconciler, host configuration, state management with real-world entities like light bulbs, and building a traffic light state machine visually. The talk also covers securing third-party JavaScript, expanding React rendering possibilities, advanced tooling for state machines, controlling light bulbs via renderer callbacks, server functions for fetch in the cloud, and potential robot programming with React.

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.

Erik Rasmussen

This workshop explores how to leverage Sentry’s AI-driven tools (Seer, MCP and Agent Monitoring) to streamline debugging, error monitoring, and observability in full-stack applications. It guides participants through <ul><li>Setting up Sentry from scratch</li><li>Instrumenting errors, logs, and tracing</li><li>Using Sentry AI features to detect and remediate issues more efficiently</li></ul>This workshop is beneficial for software engineers, SREs, DevOps practitioners, and engineering leads who want to level up observability, reduce time to resolution, and explore using AI to assist debugging in production systems.

Debugging with Sentry AI using Seer, MCP, and Agent Monitoring

Paul Jaffré

Esta charla explora cómo construimos un sistema impulsado por AI que transforma diseños de Figma en código React listo para producción utilizando el Sistema de Diseño personalizado de Razorpay. Aprende cómo resolvimos el problema de la inconsistencia de marca en herramientas genéricas de AI y creamos una solución que entiende nuestro lenguaje de diseño único, permitiendo un desarrollo más rápido sin comprometer la calidad.

Diseño a Código Usando un Sistema de Diseño Personalizado con AI

Chaitanya, Principal Engineer at Atlassian, discusses the design system at Razorpay, the impact of AI on UI development, and the integration of AI with design systems for enhanced productivity. Detailed prompts for AI to build UI components can be cumbersome. Imagine a seamless process where AI interprets Figma designs to create UI. Leveraging design expertise and focusing on business logic, not writing detailed AI prompts. Blade's MCP server facilitates the magic of transforming Figma designs into UI code by collaborating with Figma and OpenAI.

This talk explores how we built an AI-powered system that transforms Figma designs into production-ready React code using Razorpay’s custom Design System. Learn how we solved the problem of brand inconsistency in generic AI tools and created a solution that understands our unique design language, enabling faster development without compromising on quality.

Design to Code Using a Custom Design System with AI

Chaitanya Deorukhkar

React Compiler ha existido por un tiempo, pero ¿cómo se sostiene en proyectos del mundo real? En esta charla, compartiré mi experiencia adoptando React Compiler en mi producto slantit.app, los desafíos prácticos que encontré y cómo los depuré y solucioné. También recorreré el impacto medible que tuvo y lo que deberías saber antes de usarlo en tus propios proyectos.

Lecciones de la Adopción de React Compiler

Akash Hamilwasia presenting at React Summit 2025, shares React Compiler learnings and works on an AI audio platform. Memoization in React helps optimize UI performance by preventing unnecessary re-renders. React Compiler offers automatic memoization through static code analysis. React rules emphasize purity and immutability. The compiler analyzes and memoizes code changes for optimization. React Compiler package usage improves performance through code analysis. Understanding reactivity issues is crucial for handling React state. Compiler optimization requires correct dependency arrays and usage of external libraries. Measure React Compiler impact using React Profiler for optimization and real user impact analysis.

React Compiler has been around for a while, but how does it hold up in real-world projects? In this talk, I’ll share my experience adopting React Compiler in my product slantit.app, the practical challenges I ran into, and how I debugged and worked around them. I’ll also walk through the measurable impact it had, and what you should know before using it in your own projects.

Lessons From Adopting React Compiler

GPT5 es un mejor programador frontend que yo, y Cerebras Code es un programador 10 veces más rápido que yo. Pero "generative UI" todavía está mayormente atrapado en un paradigma de llamar widgets prediseñados. Los nuevos modelos, rápidos y orientados a la codificación, crean nuevas oportunidades para crear experiencias verdaderamente personales y personalizadas, sin la preocupación de que las personas quieran que sus aplicaciones se mantengan estables y confiables.

Generative UI Más Allá de Llamar Componentes Prediseñados

Failed generative UI talk explanation, exploring beyond text display with React. Vercel's generative UI tool calling. Demo challenges due to CloudFlare, GPT-5 differences. Interactive artifact generation, AI News newsletter, and ChachiBT concept. Unique superpower of developers: modifying UI for needs, tool generation challenges, pair programming concept to understand codebase better, importance of human involvement in coding, control in developer experience. Importance of control in developer experience, negative impact of AI autonomy, illusion of productivity in Vibe coding apps. Combining human and AI attention, interactive planning for coding agents, parallelizable collaborative planning. Non-interactive limitations, good interactive planning, async value of depth analytics. Increased flow disruption, semi-async failure-death, focus on code-based understanding. Hierarchical code maps for better code understanding and prompt engineering. Interplay between human and AI in code control, enhancing coding ability, and investing in coding skills. Illustrating the constant human-AI interaction and the cost of syncing with AI for different modalities. Discussing the cost of multi-modality sync with AI, encouraging a balanced approach to leveraging AI for productivity. Discussing the importance of user-friendly interfaces and the potential future of generative UI. Discussing the future of user-controlled dashboard creation and the shift of power from designers to users in generative UI development. Discussing the evolution of frameworks from developer-centric to user-centric for creating customizable UIs and the concept of malleable software coined by Jeffrey Lait. Pushing for industry adoption of the Codemap concept to enhance code quality and readability, exploring its usage with WinSurf and potential new dev tools enabled by a shared language for interacting with code bases. Discussing the impact of project size on AI effectiveness, emphasizing the importance of breaking down problems and utilizing code maps for better code management and context understanding. Discussing the importance of code map guidance and keeping code maps up to date in fast-moving projects through regular refreshing and regeneration based on git commits.

GPT5 is a better frontend coder than me, and Cerebras Code is a 10x faster coder than me. But "generative UI" is mostly still stuck in a paradigm of function calling premade widgets. New, fast, coding oriented models create new opportunities for creating truly personal, customized experiences, without the offsetting concern that people want their apps to stay stable and reliable.

Generative UI Beyond Calling Premade Components

Shawn Swyx Wang

Pequeñas animaciones pueden hacer que las UIs sean más agradables y mejorar la experiencia del usuario. En esta charla, exploraremos cómo agregar estas animaciones a tus aplicaciones de React, utilizando desde simples transiciones de CSS hasta un movimiento más complejo basado en spring.Recorreremos ejemplos prácticos para mostrar cómo estas animaciones pueden mejorar la experiencia del usuario sin interponerse en el camino. Además, discutiremos cómo mantenerlas funcionando sin problemas y asegurarnos de que sean accesibles para todos.

Guía Práctica de Animación en React

The importance of animations in enhancing user experience by bridging the gap between user expectations and digital interfaces. Practical examples of creating animations using CSS transitions and keyframes for smooth and complex effects. Utilizing timing functions with cubic Bezier curves for diverse animations and accessibility considerations. Introducing Vue Transitions as a powerful web API for seamless animations with broad browser support. Customizing Vue Transitions for unique effects, optimizing usage with unique names and global disabling, and transitioning to Spring-based animations for natural UI interactions. Exploring FramerMotion and Motion Library for React animations, configuring spring behavior for smooth effects, and enhancing animations with Motion and CSS for improved user experience.

Small animations can make UIs more delightful and improve user experience. In this talk, we’ll explore how to add these animation to your React apps, using everything from simple CSS transitions to more complex spring-based motion.We'll walk through practical examples to show how these animations can enhance user experience without getting in the way. Plus, we'll discuss how to keep them running smoothly and make sure they're accessible to everyone.

Practical Guide to Animation in React

Kateryna Porshnieva

Discusión del Panel: El Futuro de React y Su Ecosistema

Panel introduction with members from Netflix, Meta, G2I, and Replay discussing their roles. React Foundation's impact on developers' daily routines and gradual changes without sudden disruptions. Discussing React governance split, emphasizing transparency in decision-making. Foundation's goals include supporting key libraries, expanding React communities globally, and fostering idea realization. React Compiler's impact on front end development, highlighting the complexity and importance of engineering with React. Integration of AI and vibe coding enhances the compiler's ability to optimize code and provide real-time feedback. Vibe coding importance and good engineering practices. React's mental model challenges and the potential impact of the compiler on performance optimizations and simplifying the mental model. Discussing the challenges of using AI in React development and the need to simplify instructions and improve data feeding for better output quality. Discussing the empowerment of AI in guiding React code writing and the importance of sharing instructions and evaluations for framework improvement. Understanding the gaps in React documentation, translating learning into real-world applications, and navigating architectural decisions.

Panel Discussion: The Future of React and Its Ecosystem

Mark Erikson

Seth Webster

Shaundai Person

Nicolas Gallagher

¡Vamos a usar slots para llenar el club de Lil Jon con gente! Comenzando con componentes web, recorreremos cómo usar slots para crear envoltorios altamente extensibles para contenido dinámico. Luego hablaremos sobre cómo Vue y Angular aprovechan esta característica de HTML y cómo los children de React son diferentes.

¡Slots, Slots, Slots, Todos!

Abbe explains how slots enhance dynamic content in components and demonstrates creating a custom element with the shadow DOM. The content covers utilizing slot attributes for named slots and slot buttons for navigation within components. It explores styling effects on components, default and named slots usage in Vue components, access and management of slot props using scoped default slots in Vue, and dynamic list creation with JavaScript destructuring in Vue components. Additionally, it discusses name slots in Angular for content projection, CSS selector matching, slot selectors, conditional content projection with ng-template, and view encapsulation modes like Shadow DOM API.

Let's use slots to fill Lil Jon's club with people! Starting with web components, we'll walk through how to use slots to make highly extensible wrappers for dynamic content. Then we'll talk about how Vue and Angular leverage this HTML feature and how React children are different.

Slots, Slots, Slots, Everybody!

Abbey Perini

¿Alguna vez te has preguntado cómo funcionan los hooks de React internamente? Hay mucha magia en juego, como funciones que pueden almacenar estado. ¿Cómo es eso posible?Únete a mí y hagamos una rápida inmersión en cómo funcionan los hooks de React internamente.

Deep Dive on React Hooks Architecture

Introduction to React Hooks and Architecture with insights into Mattermos, React components, and JSX syntax. Understanding React.createElement, React components, and createRoot for DOM rendering. Exploring React rendering process and scheduler's role in managing component work units. Exploring React fiber tree creation and hook mechanism for state management. Exploring React fiber tree mount and update mechanisms with global variable orchestration. Exploring the use of global variables for performance optimization and the process of callback updating in React Fiber tree. Exploring hook rules and different hook mechanisms like useRef and useEffect in React. Effects in React fiber, useState complexity, update mechanisms, and cost considerations. Memory storage considerations for hooks, impact on CPU, and style optimization. Insights into React Fiber storage of props and style comparisons. Summary of topics covered and acknowledgment of additional details for future exploration.

Have you ever wonder how React hooks work on the inside? There is a lot of magic going on, like functions being able to store state. How is that possible?Join me and let's do a quick deep dive into how React hooks work on the inside.

Daniel Espino García

Suspense es una parte poderosa de la biblioteca React, pero casi todos los ejemplos que ves en la documentación no logran una buena implementación. Explora Suspense un poco más a fondo para asegurarte de que su uso no resulte en una peor experiencia de usuario, cambio de diseño o algo peor.

Suspenseful Component Composition

Simeon Griggs discusses Suspenseful Component Composition, the use of fallback props, and the basics of suspense in React applications with a demo showcasing data fetching and layout shifting. Exploring issues with data fetching and suspense boundaries. Addressing the challenges of using suspense boundaries and data fetching for individual rows in React applications. Creating consistent fallback elements for smooth loading experiences in tables by aligning sizes and optimizing data fetching placement. Optimizing data fetching placement for smoother loading experiences. Consider exporting suspense boundary to enhance code cleanliness and be defensive against data fetching errors. Use error boundaries to handle errors in suspenseful data fetching components for a smoother user experience.

Suspense is a powerful part of the React library, but almost every example that you see in the documentation falls short of a good implementation. Explore Suspense a little deeper to ensure that your usage does not result in a worse user experience, layout shift, or worse.

Simeon Griggs

¿Qué haces cuando el rendimiento de tu producto se desmorona, pero las APIs con las que trabajas están fuera de tu control?Esta fue la realidad que enfrentamos mientras construíamos un panel de pagos fintech. Cargas masivas, cumplimiento estricto y APIs dispersas estaban ralentizando a los comerciantes y arruinando los flujos de trabajo.En esta charla, recorreré nuestra búsqueda en el mundo real para rescatar la experiencia del usuario apoyándonos en frameworks de full-stack como NextJS, y otros que te permiten diseñar manejadores de API y proxies efectivos. Verás cómo perfilamos verdaderos cuellos de botella, construimos una capa Backend-for-Frontend para remodelar datos, equilibramos la criticidad de las API a lo largo del stack, aplicamos estrategias arquitectónicas de caching y resiliencia.También veremos el lado de la infraestructura: cómo usar FaaS/IaaS para gestionar las limitaciones de la red, reducir el impacto de las cargas y mejorar la fiabilidad sin cambiar las APIs de origen.Espera demostraciones en vivo, patrones probados en batalla y lecciones duramente ganadas para construir aplicaciones resilientes y centradas en el usuario, de principio a fin, incluso cuando las probabilidades no están a tu favor.

Caching, Payloads, y Otras Artes Oscuras: Optimizando UX en Condiciones Subóptimas

Farris emphasizes the need to build resilient applications for real-world usage challenges like high latency and unreliable networks. Creating fast and seamless user experiences is crucial for business success. Core technologies like React and Next, along with Tanstack Query, are discussed. Strategies include optimizing state management, network requests, and data transfer methods for enhanced user experience. The talk also covers data caching, query criticality, prefetching, and handling server retries for robust application performance.

What do you do when your product’s performance crumbles, but the APIs you work with are out of your control?This was the reality we faced while building a fintech payments dashboard. Massive payloads, strict compliance, and scattered APIs were slowing merchants down and wrecking workflows.In this talk, I’ll walk through our real-world quest to rescue the user experience by leaning on full-stack frameworks like NextJS, and others that let you design effective API handlers and proxies. You’ll see how we profiled true bottlenecks, built a Backend-for-Frontend layer to reshape data, balanced API criticality across the stack, applied caching and resilience architectural strategies.We’ll also look at the infrastructure side: how to use FaaS/IaaS to manage network constraints, reduce payload impact, and improve reliability without changing the source APIs.Expect live demos, battle-tested patterns, and hard-earned lessons for building resilient, user-centric apps, front to back, even when the odds aren't on your side.

Caching, Payloads, and Other Dark Arts: Optimizing UX in Suboptimal Conditions

Faris Aziz

Si entrecierras los ojos lo suficiente, git es una base de datos multijugador. Entrecierra un poco más y los proveedores de alojamiento de git llenan aún más las necesidades de un backend para tus aplicaciones. GitHub y la mayoría de los otros proveedores permiten la autenticación a través de OAUTH. Proporcionan permisos para asegurarse de que solo los usuarios autorizados puedan modificar los datos. Al aprovechar la API del proveedor de git, puedes crear lo que es esencialmente una aplicación sin servidor. Probablemente no querrías alojar aplicaciones a gran escala de esta manera, pero este tipo de aplicación es bastante convincente cuando estás construyendo herramientas internas. Esta masterclass profundizará en cómo se puede construir una aplicación de este tipo y, con suerte, inspirará a desarrolladores y empresas a construir más con menos gastos generales.

Oh My GHaaD: Git Hosting as a Database

Chris Griffin discusses the innovative concept of Git Hosting as a Database, emphasizing the importance of data, authentication, and authorization in backend development. The utilization of file-based databases like parket files and the simplicity of authentication and authorization in building platforms similar to GitHub stand out. The architecture of a Git-based backend offers flexibility in backups, privacy features, and serverless advantages. Integrating with frontend frameworks through custom hooks and considering rate limiting issues on platforms like GitHub and GitLab are key points in application development with a backend-free approach using GitHub and GitLab.

If you squint your eyes enough, git is a multiplayer database. Squint a little more and git hosting providers fill out even more of the needs of a backend for your applications. GitHub and most other providers allow authentication via OAUTH. They provide permissions to make sure only authorized users can modify the data. By leveraging the git provider’s API you can make what is essentially a serverless application. You probably wouldn’t want to host apps on a massive scale this way, but this kind of app is pretty compelling when you are building internal tools. This talk will dig into how such an app can be built and will hopefully inspire developers and companies to build more with less overhead.

Chris Griffing

¡Hicimos que Postman se inicie en la mitad del tiempo!Postman solía tardar 30 segundos en iniciarse en algunas máquinas, lo que se sentía como una eternidad en el mundo de las herramientas de desarrollo. Nuestros ingenieros se negaron a aceptar eso, así que profundizamos: perfilando cuellos de botella, reevaluando suposiciones y remodelando cómo la aplicación se carga e inicializa.En esta masterclass, aprenderás las seis estrategias concretas que utilizamos para reducir a la mitad los tiempos de inicio, desde la división de código y el aplazamiento de paquetes hasta el almacenamiento en caché más inteligente y hacer que Electron trabaje para nosotros, no en nuestra contra. Te guiaremos a través de cómo identificamos puntos críticos, experimentamos con alternativas y medimos los logros. Te irás con ideas accionables y una hoja de ruta para hacer que cualquier aplicación grande de React o Electron se inicie más rápido, haciendo a tus usuarios (y a tu equipo) mucho más felices.

This Is How We Made Postman Launch Twice as Fast

CEO tests Postman on cheap laptop, reveals performance issue. Ruben Casas gives 5 tips to enhance app performance, emphasizing the importance of measuring and focusing on a key metric like TTF from mobile gaming. TTU stands for Time to Usability, a key metric for app performance optimization. Measuring TTU involves adding marks for key processes like platform initialization, JavaScript evaluation, data fetching, and rendering. Need a plan of action after identifying performance issues. Transitioned from Electron to web for faster updates, impacting download size. Introducing StatusScope for bundle optimization, reducing JavaScript bundle size significantly, implementing PR checks to prevent bundle size regression, optimizing network calls by removing dead features and prefetching critical data. Challenges with v8 snapshots, preference for full bytecode caching, adapting and iterating based on metrics, organizational obstacles, and the shift towards collective performance responsibility.

We Made Postman Launch in Half the Time!Postman used to take 30 seconds to launch on some machines which felt like an eternity in the world of developer tools. Our engineers refused to accept that, so we went deep: profiling bottlenecks, re‑evaluating assumptions, and reshaping how the app loads and initializes.In this talk, you’ll learn the six concrete strategies we used to cut launch times in half, from code-splitting and deferring bundles to caching smarter and making Electron work for us, not against us. We’ll walk through how we identified hotspots, experimented with alternatives, and measured wins. You’ll come away with actionable ideas and a roadmap for making any large‑scale React or Electron app launch faster, making your users (and your team) a lot happier.

¿Cómo construyes una interfaz de usuario de React que funcione perfectamente con control remoto, puntero y entrada táctil al mismo tiempo? En televisores modernos como LG StandbyME, los usuarios cambian entre teclas de 5 direcciones, apuntar y deslizar táctil de manera natural, pero manejar esto en tu código está lejos de ser simple. Basado en más de una década de experiencia construyendo marcos de interfaz de usuario de React para TV, compartiré técnicas del mundo real, patrones de diseño y lecciones aprendidas de crear una navegación fluida y adaptativa para entornos híbridos de entrada complejos.

De TV a Táctil: Cómo Hicimos que React UI Funcione en Todos los Modos de Entrada

Seungho Park discusses the importance of spatial navigation for TV apps and the challenges of supporting remote, pointer, and touch inputs. Real examples are explored, including focus placement, restoring focus, and grouping elements for stable navigation. Challenges in TV app navigation such as key scrolling in grid lists and managing input mode transitions are highlighted. The talk also delves into handling input modes, designing for 5-way, pointer, and touch input, and addressing edge cases. Implementing the W3C spatial navigation standard, defining focus properties for container elements, and encouraging exploration of React UI spatial navigation support are key points.

How do you build a React UI that works flawlessly across remote control, pointer, and touch input all at the same time? In modern TVs like LG StandbyME, users switch between 5-way keys, pointing, and touch swiping naturally, but handling this in your code is far from simple. Based on over a decade of experience building React UI frameworks for TV, I’ll share real-world techniques, design patterns, and lessons learned from creating seamless, adaptive navigation for complex hybrid input environments.

From TV to Touch: How We Made React UI Work Across Every Input Mode

React 18 introduce el React Compiler, una herramienta poderosa para optimizar la renderización de componentes y mejorar el rendimiento. En esta charla, exploraremos cómo funciona el compiler, demostraremos mejoras prácticas de rendimiento y te mostraremos cómo integrar estas optimizaciones en tus proyectos.Ya sea que estés trabajando en aplicaciones nuevas o existentes, te irás con ideas prácticas para aprovechar todo el potencial de React 18.

Optimizando Aplicaciones React: Profundizando en el React Compiler

Victor Alencar introduces the React compiler and discusses its potential optimizations, including evolution of state management to hooks and performance improvements. The talk delves into using memorization techniques, compiler optimizations, and code transformations for better React performance. It also covers cache utilization, automated memorization, and gradual adoption of the React compiler for enhanced UI rendering. Additionally, the discussion involves compiler assumptions, debugging recommendations, and code simplification for optimized React usage.

React 18 introduces the React Compiler, a powerful tool for optimizing component rendering and enhancing performance. In this talk, we'll explore how the compiler works, demonstrate practical performance improvements, and show you how to integrate these optimizations into your projects.Whether you're working on new or existing applications, you'll leave with actionable insights to harness the full potential of React 18.

Optimizing React Applications: Deep Dive into the React Compiler

Con la propuesta activa de TC39 en juego, creo que ya es hora de que hablemos sobre Signals.A lo largo de los años, el concepto ha tenido muchos nombres diferentes. Desde “observables” en KnockoutJS, hasta “refs” en VueJS, antes de que Solid hiciera popular “signals”. Hemos visto la carcinización de los frameworks de frontend en la búsqueda de una reactividad más fluida y detallada en nuestras aplicaciones.Pero, ¿qué son realmente los Signals? ¿Por qué seguimos volviendo a ellos? ¿Y dónde encaja React en todo esto?

¿De Pull a Push? — Es Hora de Hablar Sobre Signals

Julian explores the importance of JavaScript signals, React's paradigm, and the evolution of paradigms in the JavaScript ecosystem. The evolution of state handling in JavaScript from pull to push approaches, the framework principles of state management and observables in JavaScript frameworks, React's signal handling, virtual DOM optimization, and the push approach. Simplified state management with signals and the challenges and solutions in implementing and optimizing signal handling in modern frameworks.

With the active TC39 proposal in play, I think it’s about time we talk about Signals.Over the years, the concept has had many different names. From “observables” in KnockoutJS, to “refs” in VueJS, before Solid made “signals” popular. We’ve seen the carcinization of frontend frameworks in the pursuit of more seamless and fine-grained reactivity in our applications.But what actually are Signals? Why do we keep coming back to them? And where does React fit into all of this?

From Pull To Push? — It’s Time To Talk About Signals

¿Y si escribir código internacionalizado pudiera sentirse tan natural como escribir en inglés simple?En esta charla, exploraremos cómo gettext, un estándar de localización probado en el tiempo y familiar para muchos desarrolladores de back-end y de escritorio, puede ofrecer un enfoque más intuitivo y simplificado para la i18n en el frontend. Veremos cómo los principios de gettext se pueden aplicar a proyectos modernos de JavaScript para simplificar los flujos de trabajo de traducción, reducir el código repetitivo y hacer que tu base de código sea más amigable para los humanos.

Internacionalización de Frontend Que Se Lee Como Inglés (Gracias, gettext!)

Henry Lee presents a frontend internationalization approach using React and discusses challenges in naming keys for translations. The Talk addresses issues with naming keys in JSON dictionaries, refactoring keys to eliminate translation challenges using GNU GetTex, exploring GetTex workflow for efficient localization with Lingui, defining messages and extraction with Lingui workflow, optimizing Lingui compilation and translation, enhancing Lingui features for translation, and encouraging Lingui adoption for projects by addressing reasons for underutilization and promoting trial and migration.

What if writing internationalized code could feel as natural as writing plain English?In this talk, we’ll explore how gettext, a time-tested localization standard familiar to many back-end and desktop developers, can bring a more intuitive and streamlined approach to frontend i18n. We’ll see how gettext principles can be applied to modern JavaScript projects to simplify translation workflows, reduce boilerplate, and make your codebase more human-friendly.

Frontend Internationalization That Reads Like English (Thanks, gettext!)

Cuando DeepL añadió árabe—su primer idioma RTL—no fue solo un problema de estilo, fue un desafío para los sistemas de diseño. Esta charla profundizará en CSS lógico, espejado de iconos y automatización independiente de la plataforma, estrategias de aplicación suave para la consistencia del diseño, y cómo ejercer influencia entre cientos de ingenieros con un mínimo de personal. Esta no es una historia sobre la construcción de componentes, sino sobre conectarlos a gran escala, con valores predeterminados inteligentes, localización y dirección y empatía.

Sistemas de Diseño y UI en un Mundo Bidireccional

Matt Sikathian emphasizes the importance of supporting right-to-left layouts in web development and the challenges faced in implementing Arabic scripts effectively. Adapting UI to right-to-left reading aligns with users' cognitive patterns, with CSS advancements showing promise in meeting diverse language needs. The unique considerations of Arabic script in UI design, technical adjustments necessary for Arabic typography, and handling bi-directional layout challenges using direction-agnostic approaches are discussed. The talk also covers enhancing React for logical CSS properties, building UI tools with icon mirroring, and streamlining icon management and automation for improved developer workflow.

When DeepL added Arabic—its first RTL language—it wasn’t just a styling problem, it was a design systems challenge. This talk will go deep on logical CSS, platform-agnostic icon mirroring and automation, soft enforcement strategies for design consistency, and how to wield influence across hundreds of engineers with minimal headcount. This isn’t a story about building components—it’s about wiring them together at scale, with smart defaults, localization and directional and empathy.

Design Systems and UI in a Bi-directional World

El nuevo soporte de React para la API nativa de View Transitions desbloquea animaciones suaves y conscientes del diseño entre rutas y componentes — no más hacks manuales de DOM o bibliotecas solo para el cliente. En esta charla, exploraremos cómo usar View Transitions con React 19+, Next.js App Router y React Server Components para construir interfaces de usuario pulidas y orientadas al rendimiento con un código mínimo.

View Transitions en React: Una Nueva Era de UI Sin Fisuras

Samuel Ouyang highlights the significance of smooth UI in modern apps and introduces the React 19 View Transition API. The View Transition API works with SSR and RSC but has limitations as a wrapper. Implementing the Use View Transition custom hook can address these limitations and make it SSR safe. The custom hook enables smooth transitions for various interactions like route changes, panel transitions, click events, and list reordering. It encourages the optimized use of the View Transition API to improve user experience and avoid DOM hacks.

React’s new support for the native View Transitions API unlocks smooth, layout-aware animations between routes and components — no more manual DOM hacks or client-only libraries. In this talk, we’ll explore how to use View Transitions with React 19+, Next.js App Router, and React Server Components to build polished, performance-first UIs with minimal code.

View Transitions in React: A New Era of Seamless UI

Un viaje visual hacia el borde creativo del frontend—combinando shaders, Three.js y narración para crear experiencias interactivas que van más allá de la cuadrícula.

Partículas, Píxeles y Propósito: Creatividad en el Frontend Más Allá de la Cuadrícula

Chris introduces himself as a web developer with vast experience in UX engineering, emphasizing the importance of evoking emotions through interfaces. Childhood influences from anime, Disney, and video games shape career choices. Navigating dreams of soccer and software engineering, finding joy in challenges. Reflecting on 3js experiences and the significance of the golden ratio. Explaining Fibonacci sequence, GPU shaders, and natural patterns. Using React 3 Fiber to enhance particle playground. Celebrating creativity in frontend development as a fusion of engineering and creativity.

A visual journey into the creative edge of frontend—blending shaders, Three.js, and storytelling to craft interactive experiences that move beyond the grid.

Particles, Pixels, and Purpose: Creative Frontend Beyond the Grid

Cristobal Chao

La charla explicará qué es React Strict DOM, por qué se creó, cómo fue adoptado en Meta, cómo se está utilizando, los resultados hasta ahora y los posibles próximos pasos.

React Strict Dom: React multiplataforma basado en la web

Talk on cross-platform React using ReactStrict DOM to unify web and native React, standardizing for consistent UI development. Fragmentation challenges in React due to lack of standardized styling systems, impacting development efficiency and product consistency. Exploring unsuccessful cross-platform React approaches and the importance of minimizing migration costs. Enabling web developers to build native apps with React Native while enhancing it with web APIs for seamless code migration. Benefits of code sharing for cross-platform apps, AI integration for React Strict DOM, and the future vision for React Native as a web renderer. Unified styling in React Native, Tailwind integration, and UI best practices. Flexibility and readiness in React DOM, potential inclusion in React Foundations, and considerations for reversibility of decisions in React DOM.

The talk will explain what React Strict DOM is, why it was created, how it was adopted at Meta, how it's being used, the results so far, and the potential next steps.

React Strict Dom: Cross-Platform React Based on the Web

Históricamente, Next.js ha tenido dos modos distintos de renderizado: Estático (para construir páginas prerenderizadas rápidas) y Dinámico (para mostrar datos frescos en tiempo de solicitud). Con el lanzamiento de la versión 16, Next.js ahora tiene un enfoque único llamado prerenderizado Parcial que ofrece lo mejor de ambos modos anteriores. En esta charla, Sam te mostrará cómo construir un Chatbot de IA moderno que aproveche las características más recientes de renderizado híbrido de Next.js, como las navegaciones instantáneas del lado del cliente a páginas renderizadas por el servidor.

Building a Hybrid AI Chatbot with Next.js 16

Sam discussing Next.js features including cache components for dynamic apps with a blend of static pre-rendering for speed. Discussing a dynamic app with personal data, utilizing cookies and a database for chatting, showcasing Next 16's cache components for hybrid static and dynamic pages. Making necessary changes for cache components in Next to improve page loading speed and user experience, utilizing Suspense DevTools for enhanced rendering control. Utilizing state for real-time updates from OpenAI's async iterable stream in the front end. Using generators to streamline text data transmission from OpenAI streams for efficient UI updates. Discussing the benefits of managing less client-side state and implementing optimistic rendering for instant UI feedback. Discussing the use of temporary client state, error handling, and the concept of optimistic rendering for responsive and instant applications in Next.js. Exploring features of Next 16, cache components, and the use cache directive for dynamic rendering and runtime prefetching in Next.js.

Historically, Next.js has had two distinct modes of rendering: Static (for building fast prerendered pages) and Dynamic (for showing fresh data at request-time). With the release of version 16, Next.js now has a single approach called Partial prerendering that offers the best of both previous modes. In this talk, Sam will show you how to build a modern AI Chatbot that takes advantage of Next.js’ newest hybrid rendering features, like instant client-side navigations to server-rendered pages.

Sam Selikoff

¡Sumérgete en una sesión llena de acción donde abrimos el capó de la plataforma empresarial de micro-frontends de Dutch Railways! Nos adentramos profundamente en los entresijos de la autenticación segura a través de aplicaciones distribuidas usando MSAL y OpenID Connect.Mira en vivo cómo construimos una configuración de autenticación sólida como una roca que funciona sin problemas en múltiples aplicaciones. Observa Module Federation en acción, manejando dependencias compartidas como un campeón mientras mantiene todo bien asegurado.Desde los dolores de cabeza de la implementación de MSAL hasta los flujos de tokens de OIDC: abordaremos los desafíos reales de frente. Te irás sabiendo cómo:✓ Asegurar micro-frontends con autenticación MSAL✓ Compartir estado seguro a través de los límites de la aplicación✓ Manejar flujos de actualización de tokens como un profesional✓ Mantener seguros tus módulos federados¡Trae tus preguntas más difíciles sobre autenticación: esta sesión sin rodeos ofrece soluciones reales desde las trincheras!

Micro-Frontends Seguros: Magia de Autenticación en Dutch Railways

Pieter Eigenmans discusses Microfrontends, authentication at Dutch railways, Model Federation, OIDC, and Kubernetes configuration. The SporeViewer app enables real-time train tracking in the Netherlands with multiple applications on one screen. Transitioning from monolithic to modular architecture allows for independent feature deployment and multifederation framework utilization. Microfrontend setup involves splitting applications into front and back end components, organizing them into verticals using domain-driven design. Efficient frontend building with module federation, Web Components, and model federation enhances speed and scalability. Authentication challenges are addressed using OIDC, MSAL integration for token management, and secure API calls via MSAL libraries. Kubernetes configuration enables versatile environment setup using config maps for loading configuration files.

Jump into an action-packed session where we crack open the hood of Dutch Railways' enterprise micro-frontend platform! We're diving deep into the nuts and bolts of secure authentication across distributed apps using MSAL and OpenID Connect.Watch live as we build a rock-solid authentication setup that works smoothly across multiple apps. See Module Federation in action, handling shared dependencies like a champ while keeping everything locked down tight.From MSAL implementation headaches to OIDC token flows - we'll tackle the real challenges head-on. You'll walk away knowing how to:✓ Lock down micro-frontends with MSAL authentication✓ Share secure state across app boundaries✓ Handle token refresh flows like a pro✓ Keep your federated modules safeBring your toughest auth questions - this no-fluff session packs real solutions from the trenches!

React Summit US 2025

The biggest React conference in the US