Name: React Summit 2025
Start: 2025-06-13T11:00:00.000Z
End: 2025-06-17T19:00:00.000Z

Ramona Schwering

Varun

Taz Singh

Ciarán Curley

Olivier Tassinari

Petra vos

Sophie Kolbe

James Swinton-Bland

  Neha  Seth

Manuel Bieh

Ioana Sauleac

Brian Whippo

Kristiyan Velkov

Daria Shabala

Rohit Singh

Oli Legat

Kræn Hansen

Krasimir Tsonev

Seungho Park

Rahul Nanwani

Kristopher  Baumgartner

Richard Carrigan

Joran Quinten

Thibault Van den Broecke

Evangelia Mitsopoulou

Károly Török

Batuhan NARCI

Bart Zaalberg

JJ Kasper

Agnieszka Labonarska

Violina Popova

Marko Draksic

Pascal Moser

Luis Oliveira

Únete a nosotros en el viaje desde el desarrollo frontend con React hasta el desarrollo fullstack con Next.js. Durante esta masterclass, seguiremos el tutorial oficial de Next.js Learn con Eric Burel, entrenador profesional y autor de NextPatterns.dev. Juntos, configuraremos un sitio web con Next.js y exploraremos sus características del lado del servidor para construir aplicaciones de alto rendimiento.

El Viaje Desde el Frontend con React al Desarrollo Fullstack Con Next.js

Introduction to Learn Next.js workshop covering Next.js, Astro, LLM development, open-source contributions, and official tutorial prerequisites. Understanding React in Next.js development, installation guidance, chat support, and StackBlitz Web Containers. Structured NGIS workshop approach with self-service participation, React basics, and building robust SaaS applications. Next.js configuration patterns, TypeScript conventions, VS Code extensions, and Tailwind CSS styling. Font loading challenges, image handling, optimization, and multi-page website creation in Next.js. Client-side navigation, layouts, client components, and hybrid navigation approach in Next.js. Database setup, Vercel deployment, data fetching, server-side components, efficient data fetching, static and dynamic rendering, streaming implementation, server-side rendering optimization, suspense, and partial pre-rendering in Next.js. Learning complexity, tutorial chapters, SEO metadata configuration, and workshop conclusion.

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.

From Frontend to Fullstack Development With Next.js

Eric Burel

Los asistentes de codificación ya están cambiando la forma en que desarrollamos código, y en varios años se espera que cambien completamente cómo los desarrolladores interactúan con el código y lo escriben. En esta masterclass, compartiré consejos y mejores prácticas sobre el uso de tales herramientas mientras desarrollamos la aplicación lista para producción con Zencoder.

Desarrollando Aplicaciones Listas para Producción en Colaboración con Agentes de AI

The workshop covers the theory, practical development, and future impact of AI agents on software development. It discusses the potential of AI to replace developers, the role of AI agents in coding tasks, and the utilization of MCP servers for tool access. The session emphasizes best practices for interacting with AI agents, customization options, and optimizing AI performance. Building a conference website using React, Node.js, PostgreSQL, and Docker is demonstrated with AI agent collaboration in backend development, security considerations, debugging, testing, and deployment preparation.

Coding assistants are already changing the way we develop code, and in several years they are expected to completely change how developers interact with code and write it. In this workshop, I'll share tips and best practices on using such tools as we develop the production-ready app with Zencoder.

Production-Ready Apps with AI Agents

Alex Shershebnev

¡Desbloquea el Poder del Desarrollo Moderno Full-Stack en Medio Día!¿Listo para construir aplicaciones web rápidas y escalables? Únete a nuestra inmersiva masterclass interactiva de 4 horas y sumérgete de lleno en el mundo de Full-Stack Next.js 15!Esto no es solo otra sesión teórica. Te arremangaras y construirás una aplicación de comparación de películas del mundo real desde cero, guiado paso a paso por nuestro experto instructor Maurice. Comenzaremos configurando tu entorno de desarrollo local con una robusta base de datos PostgreSQL ejecutándose en un contenedor Docker. Luego, experimentarás la magia de la generación rápida de UI usando <a href="https://v0.dev/">v0.dev</a>, permitiéndote crear interfaces impresionantes con facilidad.Pero no nos detendremos en el front-end. Aprenderás cómo integrar sin problemas tu UI con un potente backend usando las últimas características de Next.js 15 y el elegante Prisma ORM para interactuar con tu base de datos PostgreSQL. Además, descubrirás las mejores prácticas para manejar el comportamiento del lado del cliente con una divertida e interactiva función de comparación de películas.Finalmente, llevaremos tu aplicación en vivo con despliegue continuo a Vercel, mostrando cómo compartir sin esfuerzo tus creaciones con el mundo. Al final de esta masterclass, tendrás una aplicación de comparación de películas completamente funcional y la confianza para abordar tus propios proyectos full-stack utilizando el vanguardista ecosistema de Next.js 15.

Aplicación Full-stack en medio Día: Next.js 15 Masterclass de Desarrollo

The Workshop on Next.js 15 Development covers creating routes, working with databases using Docker, and deploying applications on Vercel. Next.js offers more guidance than React, evolving from the pages router to the app router. Features like image optimization, server/client-side rendering support, and the App Router enhance Next.js development. Customizable options include layout, component rendering, and state management. Prisma ORM provides type safety, database flexibility, and seamless schema management. Vercel offers efficient deployment services and serverless hosting on AWS, ensuring optimal performance and cost-effective scalability.

Unlock the Power of Modern Full-Stack Development in Half a Day!Ready to build lightning-fast, scalable web applications? Join our immersive 4-hour interactive workshop and dive headfirst into the world of Full-Stack Next.js 15!This isn't just another theory session. You'll roll up your sleeves and build a real-world movie comparison application from scratch, guided step-by-step by our expert instructor Maurice. We'll start by setting up your local development environment with a robust PostgreSQL database running in a Docker container. Then, you'll experience the magic of rapid UI generation using <a href="https://v0.dev/">v0.dev</a>, allowing you to create stunning interfaces with ease.But we won't stop at the front-end. You'll learn how to seamlessly integrate your UI with a powerful backend using Next.js 15's latest features and the elegant Prisma ORM to interact with your PostgreSQL database. Plus, you'll discover the best practices for handling client-side behavior with a fun, interactive movie comparison feature.Finally, we'll take your application live with continuous deployment to Vercel, showcasing how to effortlessly share your creations with the world. By the end of this workshop, you'll have a fully functional movie comparison app and the confidence to tackle your own full-stack projects using the cutting-edge Next.js 15 ecosystem.

Full-stack App in half a Day: Next.js 15 Development Bootcamp

Maurice de Beijer

En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!Por favor, encuentre las preguntas frecuentes <a href="https://docs.google.com/document/d/13E5znTvDiQUrWuR4WzkaOndAx2VeCTlUpJXrd1DXzfA/edit?usp=sharing">aquí</a>

Building Full Stack Apps With Cursor

Mike McCullough covers building full stack apps in Cursor, discussing model selection preferences and Cursor features like indexing and planning. Explore different modes in Cursor for functionalities and project structure sharing. Optimize development process with ESLint, BEM classes, and file tree accountability. Implement project rules for consistency and specificity. Discuss user biases, auto-generated commit messages, Salesforce integration, and troubleshooting Tailwind v4 in Cursor projects. Address workflow management, Axios usage in Next.js, and MCP testing with Puppeteer for automation.

In this workshop I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own AI generated full stack app on your machine!Please, find the FAQ <a href="https://docs.google.com/document/d/13E5znTvDiQUrWuR4WzkaOndAx2VeCTlUpJXrd1DXzfA/edit?usp=sharing">here</a>

Mike Mikula

¿Recuerdas cuando la arquitectura de software parecía solo cajas y flechas en una pizarra? En esta charla, desafiaremos esa visión y exploraremos lo que realmente importa en el diseño de software moderno. Descubrirás cómo los arquitectos exitosos piensan más allá de las especificaciones técnicas, viendo la arquitectura como una historia viva moldeada por personas, equipos y necesidades en evolución. Obtendrás nuevas perspectivas sobre la construcción de sistemas duraderos y aprenderás por qué las mejores arquitecturas se centran más en habilitar a las personas que en imponer decisiones técnicas. Únete a mí en un viaje que podría cambiar para siempre tu forma de pensar sobre la arquitectura.

Pensando Como un Arquitecto

Modern software development shift towards developers involves more complex architecture decisions with trade-offs and long-term consequences. 11 tips learned from diverse projects and roles. Focus on decentralization, avoid technology-first approach, and consider context for great architecture. Understanding the holistic approach to architecture. Linking architecture to culture and structure. Importance of aligning decisions with business needs using techniques like event storming and domain storytelling. Netflix's core domain focuses on content accessibility and tailored user experience. Supporting domains like personalization ensure usability even during downtime. Payment methods, a generic domain, are essential for subscription. Adapting boundaries and architectural characteristics is crucial for evolving businesses. Define evolving core domains and adapt characteristics accordingly. Select key architectural characteristics for system design. Consider different availability needs for various subdomains like core and generic. Latency varies based on functions; strict for finance, flexible for integration. Understand and apply specific characteristics to subdomains for optimal system performance. Understand the need for different approaches in system design. Consider availability requirements for active architecture. Evaluate decisions impacting software design and technology. Modularize workload at code or code-infrastructure level. Consider context in choosing between monoliths and microservices. Adapt system modularity based on context and team structure. Consider modularity based on system requirements. Be pragmatic in architectural decisions. Utilize event-driven architecture in distributed systems. Leverage infrastructure for efficient service stitching and delivery. Adapt to changing system characteristics for scalability and efficiency. Consider cost implications of shifting from event-based to cron job. Design software for evolution, embracing changes and tradeoffs for user-focused systems. Create a sociotechnical system balancing long-term vision and immediate needs with a lean mindset. Embrace an iterative approach to software development, understanding the domain, consumers, and the system. Master communication skills for architects by focusing on communication, inclusion, and documentation. Translate technology reasons into business benefits to effectively communicate with various stakeholders. Change language to match audience, share reasoning effectively. Involve others in decision-making for better understanding and solutions. Master architectural decision records and architecture as code. Utilize written communication for API changes, involve all voices. Sequence diagrams aid team understanding; master architecture as code. Focus on key aspects, prioritize effectively to avoid distractions.

Remember when software architecture seemed like just boxes and arrows on a whiteboard? In this talk, we'll challenge that view and explore what really matters in modern software design. You will discover how successful architects think beyond tech specs, seeing architecture as a living story shaped by people, teams, and evolving needs. You'll gain fresh perspectives on building systems that last and learn why the best architectures are more about enabling people than enforcing technical decisions. Join me for a journey that might just change how you think about architecture forever.

Thinking Like an Architect

Luca Mezzalira

React Compiler fue introducido en 2024 como una forma de manejar automáticamente las optimizaciones de rendimiento en tus aplicaciones—pero, ¿cómo funciona? En esta charla, te guiaré a través de algunos de los aspectos internos de React Compiler. Exploraremos su proceso completo, desde el análisis hasta la transformación del Abstract Syntax Tree (AST), junto con sus tecnologías clave, beneficios, compensaciones y un ejemplo práctico de cómo transforma tu código para prevenir re-renderizados innecesarios.La buena noticia: (afortunadamente) no necesitas dominar sus aspectos internos para integrarlo en tu base de código. Dicho esto, un sólido entendimiento de sus aspectos internos mejorará significativamente tu capacidad para aplicar las técnicas de optimización que desbloquea.

React Compiler Internals

Introduction to React Compiler, its benefits, and the problem of memoization in React. Performance issues due to stateful components in React, solution with React.memo and use memo, and the benefits of React compiler in automating memoization. Compiler's transformation into high-level intermediate representation provides a clearer understanding of code operations and data flow, addressing the issues with unique identifiers for variables in complex scenarios. Compiler ensures each variable is assigned exactly once through single static assignment, resolving issues with variable values based on code paths and introducing unique names for assignments. Effects describe how operations interact with data, ensuring safe caching with types like read, store, capture, mutate, and freeze effects. The compiler understands operations but needs to identify values that change between renders for React, leading to the reactive analysis phase to determine reactive values in the component. Variables marked as reactive for potential changes between renders are optimized for caching. Compiler identifies dependencies to group operations for efficient caching. Scopes are established to cache related variables together and ensure efficient rendering and performance improvement in the final JavaScript code. Compiler sets up cache slots for dependencies and outputs to optimize performance. Scopes work independently to recalculate based on changes, ensuring efficient memoization. React Compiler streamlines memoization, providing automatic correct optimizations without manual burden, paving the way for performance-focused code.

React Compiler was introduced back in 2024 as a way to automatically handle performance optimizations in your apps—but how does it work? In this talk, I’ll walk you through some of React Compiler’s internals. We’ll explore its full process, from parsing to Abstract Syntax Tree (AST) transformation, along with its key technologies, benefits, trade-offs, and a practical example of how it transforms your code to prevent unnecessary re-renders.The good news: you (luckily) don’t need to master its internals to integrate it into your codebase. That said, a solid grasp of its internals will significantly enhance your ability to apply the optimization techniques it unlocks!

Lydia Hallie

Nuestro Propio React Global State Manager en Menos de 50 Líneas de Código

Speaker delves into global state management in React, mentioning Redux and alternatives like React context. Creating a global state manager in under 50 lines of code with React context, highlighting challenges with performance and React specificity. Building a custom hook named user store for state management, implementing state and API for store, handling partial state updates efficiently. Managing listeners for state changes, setting up custom hooks and selectors, and subscribing to external stores. Demonstrating optimization in state management and preventing unnecessary button re-renders. Discussion on Redux, Signals, debugging, and various global state management choices like Zestand and Redux toolkit.

Our Own React Global State Manager in Less Than 50 Lines of Code

Miguel Ángel Durán

Han pasado varios meses desde el lanzamiento de React Compiler Beta, pero por alguna razón apenas hay masterclasses que describan esta herramienta en toda su profundidad.Quiero decir, ¿qué son esas docenas de pestañas en el sitio web de React Compiler Playground? ¿Cómo funcionan esas más de 30 banderas de entorno? Y lo más importante, ¿puede afectar mi sitio web de React en producción y puedo beneficiarme de utilizar todas estas configuraciones y herramientas?Vamos a profundizar (y me refiero a realmente profundizar) en el código fuente de React Compiler y ver cuán flexible es esta herramienta y cuáles son los desafíos de trabajar con ella.

How to React Compiler

Introduction to React compiler, differences from React 19, installation of Babel plug-in React compiler, specifying target React versions, and how React compiler detects and processes component dependencies. Configuring React compiler settings, exploring default options and configurations, utilizing React compiler playground website for configurations, dealing with JSX markup re-computation. React compiler feature for extracting JSX from array map callbacks, limitations of enable function outlining, enabling JSX outlining for separate functions. Function memoization in React compiler, React compiler beta stage, potential errors with React compiler. React compiler error: memorization preservation, hidden messages, validation settings. React compiler: validation tools, hooks treatment, memorization challenges. Changing hooks to functions for React compiler optimization. React Compiler usage considerations and potential optimizations.

It's been several months since the release of React Compiler Beta, but for some reason there are hardly any talks describing this tool in all depth.I mean, what are those dozens of tabs on the React Compiler Playground website? How does those 30+ environment flags work? And most importantly, can it affect my React website in production and can I benefit from utilizing all of these settings and tools?Let's dive deep (and I mean really deep) into the React Compiler source code and see how flexible this tool is and what are the challenges of working with it?

Anton Nepsha

Llegaste aquí porque eres increíble en tecnología, escribiendo código y haciendo las cosas. Creciste en tu carrera al desarrollar tus habilidades. Ahora tus destrezas técnicas son un estándar básico. Aprender una nueva biblioteca o framework o lenguaje de programación ya no hará nada por tu carrera. Necesitas algo más.

Ser Senior No Se Trata Solo de Tus Habilidades Técnicas

Being senior isn't just about tech skills; continuous improvement and broadening impact are vital for growth in the tech industry. Being effective in your work means focusing on outcomes that create superpowers for others, increasing your career opportunities and impact. Delivering valuable work creates opportunities for growth and rewards in your career. Being a senior engineer evolves from task execution to leadership and team management, leading to significant career growth and financial rewards. Results on your resume matter for your next job. Leadership, not titles, defines a senior engineer's role. Senior engineers lead projects, create direction in chaos, and focus on delivering results efficiently and effectively.

You got here because you're amazing at technology, writing code, and getting things done. You grew your career by growing your skills. Now your technical chops are a baseline default. Learning a new library or framework or programming language won't do squat for your career anymore. You need something else.

Senior Isn't About Your Tech Skills

Swizec Teller

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

Panel Discussion: The State of React

Panelists introduced themselves and discussed React Server Components (RSCs), exploring usage in production and alternative frameworks. Challenges of adopting RSCs and benefits of universal data fetching were highlighted. The complexities of implementing RSCs were discussed, emphasizing the need for better integration. The potential of server components for composability and evolving architecture was explored. The React compiler's impact on performance optimization and component re-rendering was examined. Discussions included enhancing React with compiler features, evolving feature sets, and reimagining state management. Improvements in communication, community engagement, and dependency management within the React ecosystem were emphasized. Recommendations for managing dependencies, component performance, and audience appreciation were shared.

Tanner Linsley

Naman Goel

Evan Bacon

Shruti Kapoor

Mark Erikson

Jarred Sumner

Sacha Greif

Construyendo aplicaciones Full Stack React con Bun

Bun is a fast JavaScript runtime aiming to improve Node.js compatibility and streamline the development toolchain. It offers seamless full-stack development capabilities with features like WebSocket support and code-splitting. The efficient package management in Bun optimizes production processes by reducing parsing time and system calls. Bun's collaboration plans include enhancing monorepo support and integrating with frameworks and routers for improved functionality and runtime efficiency.

Building Full Stack React Apps with Bun

Prueba y confía en tu aplicación React combinando la potente automatización de navegador de Playwright con el monitoreo sintético moderno. En este masterclass práctico, aprenderás a escribir pruebas de flujo de usuario real con Playwright, ejecutarlas localmente y luego escalarlas a un monitoreo listo para producción con Checkly.Comenzaremos con un recorrido rápido por el monitoreo sintético vs. real de usuario, luego profundizaremos en probar interacciones clave en tu aplicación, desde cargas de página hasta formularios y navegación. Aprenderás a usar las características principales de Playwright para crear pruebas confiables de extremo a extremo.A continuación, te mostraremos cómo convertir esas pruebas locales en monitores en vivo. Implementarás tus pruebas como monitores sintéticos, verás ejecuciones de pruebas y depurarás fallos con datos ricos de observabilidad, como capturas de pantalla y trazas.Tabla de contenidos:<ol><li>Introducción: Sintético vs RUM, Pruebas vs Monitoreo</li><li>Configuración para ejecutar la aplicación localmente</li><li>Escribir pruebas de Playwright en la aplicación</li><li>Características principales de Playwright</li><li> Ejecutar pruebas</li><li>Convertir pruebas de Playwright en monitores sintéticos</li><li>Conceptos de Monitoreo como Código</li><li>Observabilidad: depurar con Trazas, Registros &amp; Capturas de pantalla</li><li>Cerrando el ciclo con alertas y consideraciones de canales de notificación</li></ol>Nivel del masterclass: desarrolladores cómodos con React y herramientas CLI.

Mejorando aplicaciones React con monitoreo de Playwright

The workshop delves into using Playwright for monitoring React apps, emphasizing testing strategies and monitoring approaches. It covers user simulation, test automation, and principles of Playwright testing. Advanced topics include consistency in test results, optimizing auto-waiting, mitigating flaky tests, and handling degraded state. The session also touches on time limits, incident resolution, video configuration, and utilizing traces and videos for debugging. Discussions extend to troubleshooting, page reuse, visual regression, accessibility testing, and deployment challenges with Checkly monitoring.

Test and trust your React app by combining Playwright’s powerful browser automation with modern synthetic monitoring. In this hands-on workshop, you’ll learn how to write real user flow tests with Playwright, run them locally, and then scale them into production-ready monitoring with Checkly.We’ll start with a quick tour of synthetic vs. real user monitoring, then dive into testing key interactions in your app, from page loads to forms and navigation. You’ll learn how to use Playwright’s core features to create reliable end-to-end tests.Next, we’ll show you how to turn those local tests into live monitors. You’ll deploy your tests as synthetic monitors, view test runs, and debug failures with rich observability data, like screenshots and traces.Table of contents:<ol><li>Intro: Synthetic vs RUM, Testing vs Monitoring</li><li>Setup to run app locally</li><li>Write Playwright tests on the app</li><li>Playwright core features</li><li> Run tests</li><li>Convert Playwright tests into synthetic monitors</li><li>Concepts of Monitoring as Code</li><li>Observability: debug with Traces, Logs &amp; Screenshots</li><li>Closing the loop with alerts and notification channels considerations</li></ol>Workshop level: developers comfortable with React and CLI tools.

Enhancing React Apps with Playwright Monitoring

Nica Mellifera

Las interfaces de usuario basadas en nodos ofrecen una forma intuitiva y poderosa de representar flujos de datos y procesos complejos. En este masterclass interactivo de 3 horas, aprenderás a crear interfaces de usuario de diagramas atractivas utilizando React y la popular biblioteca React Flow. Comenzaremos explorando las bibliotecas clave para crear interfaces de usuario de diagramas personalizados, comparando sus fortalezas, diferencias y casos de uso más efectivos. Centrándonos en React Flow, luego construiremos juntos una aplicación de flujo de trabajo, introduciendo características como nodos y bordes personalizados, funcionalidad de arrastrar y soltar, gestión de estado, controles de minimapa y zoom, auto-layout y barra lateral de edición de propiedades. Descubrirás cómo aprovechar los componentes de interfaz de usuario de código abierto diseñados para diagramación para mejorar el atractivo visual y aprenderás cómo extender los diagramas con funcionalidad personalizada. También veremos herramientas y productos existentes que pueden agilizar tu proceso de desarrollo, para que puedas concentrarte en implementar tu lógica de negocio de manera eficiente. Al final de este masterclass, sabrás cómo desbloquear el potencial de las interfaces de usuario basadas en nodos en React, permitiéndote crear aplicaciones ricas e interactivas adaptadas precisamente a las necesidades de tu proyecto.Agenda del Masterclass:<ul><li>Introducción a las Bibliotecas de Diagramas</li><li>Construcción de una Aplicación de Flujo de Trabajo con React Flow</li><li>Implementación de Características Avanzadas de Interacción y Usabilidad</li><li>Mejorando la Experiencia del Usuario</li><li>Ampliando y Escalando Tu Interfaz de Usuario Basada en Nodos</li></ul>Por favor, ten en cuenta que este masterclass asume un conocimiento cómodo de trabajo con React, para que podamos centrarnos en construir características avanzadas desde el principio.

Construir y Personalizar un Constructor de Flujo de Trabajo Basado en Nodos con React

The Workshop covered topics such as node-based UIs, React flow library, diagram UI components, visualization, diagramming libraries challenges, features of ReactFlow library, state management with Zustand, edge creation, navigation, diagram view optimization, grid snapping, custom nodes, handles, dynamic node resizing, custom edge creation, group creation, sidebar management, autolayout with Dugree library, advanced auto-layout challenges, and the Overflow library's premium features.

Node-based user interfaces offer an intuitive and powerful way to represent complex data flows and processes. In this interactive 3-hour workshop, you’ll learn how to create engaging diagram UIs using React and the popular React Flow library. We’ll start by exploring key libraries for creating custom diagram UIs, comparing their strengths, differences, and most effective use cases. Focusing on React Flow, we’ll then build a workflow application together, introducing features such as custom nodes and edges, drag-and-drop functionality, state management, minimap and zoom controls, auto- layout, and property-editing sidebar. You’ll discover how to leverage open-source UI components designed for diagramming to enhance visual appeal and learn how to extend diagrams with custom functionality. We’ll also look at existing tools and products that can streamline your development process – so you can concentrate on implementing your business logic efficiently. By the end of this workshop, you’ll know how to unlock the potential of node-based UIs in React, enabling you to create rich, interactive applications tailored precisely to your project’s needs.Workshop Agenda:<ul><li>Introduction to Diagram Libraries</li><li>Building a Workflow Application with React Flow</li><li>Implementing Advanced Interaction and Usability Features</li><li>Enhancing the User Experience</li><li>Extending and Scaling Your Node-based UI</li></ul>Please note that this workshop assumes a comfortable working knowledge of React, so we can focus on building advanced features right from the start.

Build and Customize a Node-Based Workflow Builder With React

Łukasz Jaźwa

SPA to SSR and Everything in Between

React's transformative impact, community support, and server-side evolution highlighted. Exciting developments from static site generators like Next.js and Gatsby to server-side rendering evolution, including React Fiber, Hooks, and server components. The pressure on servers in 2020 led to the announcement of server components, a complex but transformative idea. New challenges arise with weaving server and client, requiring adaptation and file organization. Evaluation of React server components' worth based on server-side needs and bundle issues. SPAs are prevalent and valued, despite the focus on client-side apps. TanStack Router offers unparalleled URL state management and type safety, enhancing SPA development. Exciting developments ahead with the DaVinci release, supported by sponsors for TAN stack's full-time commitment and core contributors.

¡Pruebas primero, código al final!¿Cómo desarrollar tu frontend para que el código no se desmorone? ¿Cómo hacer que entregar tus resultados de trabajo no sea aterrador? ¿Cómo combatir los errores que te persiguen a cada paso que das?Voy a responder a estas preguntas durante la masterclass y mostrar cómo seguir TDD en aplicaciones React.Para mostrar el enfoque, voy a usar Cypress, React, MobX, e incluso Dev Containers. Estas herramientas pueden ser reemplazadas por otras que se utilizan en tus proyectos hoy en día. Aquí y ahora, las herramientas no son tan importantes.A pesar del título, la masterclass va a ser útil no solo para desarrolladores frontend. Puedes beneficiarte de ella incluso trabajando en un área diferente del desarrollo porque la clave aquí es una mentalidad de cómo hacer aplicaciones confiables a través de pruebas.

TDD en Frontend

The Workshop delves into various aspects of software development, emphasizing Test-Driven Development's (TDD) benefits and industry maturity. It discusses implementing a to-do application with network calls and a contract-first approach, utilizing Swagger for API documentation and Cypress for testing. The exploration of MobX for state management, TDD adherence with React contexts, and Cypress E2E testing highlights efficient testing strategies. The discussion also covers the importance of end-to-end tests, tool selection between Cypress and Playwright, and tailoring testing approaches to project needs.

Tests first, code last!How to develop your frontend that the code isn't falling apart? How to make it scary free to deliver your work results? How to battle bugs that are chasing you at every step you make?I am going to answer these questions during the workshop and show how to follow TDD at React applications.To showcase the approach I am going to use Cypress, React, MobX, and even Dev Containers. These tools can be replaced by others that are in use in your projects today. Here and now tooling is not so important.In spite of the title the workshop is going to be useful not only for frontend developers. You can benefit from it even working in a different area of development because the key here is a mindset of how to make reliable applications through testing.

TDD in Frontend

Aleksandr Shinkarev

En esta charla, exploraremos cómo delegar trabajo a modelos de lenguaje grandes y automatizar la mayor parte del "trabajo ocupado" para maximizar y mejorar la productividad diaria. Lo haremos principalmente explorando cómo los LLMs pueden llamar a funciones.

Maximizar la Productividad con Agentes de IA

Tejas discusses AI agents and productivity at the React Summit, emphasizing the role of AI in enhancing user experiences. The use of JSON data and system prompts to improve parsing and streaming processes is highlighted. The importance of AI agents in web navigation for increased productivity and efficient website interaction is explored. Development of tools like the Google Calendar Manager Agent for better calendar management and troubleshooting calendar event creation are discussed. The talk also delves into future possibilities in UX and technology, along with insights on AI component creation and comparison between Langflow and N8n.

In this talk, we will explore how to offload work to large language models and automate away most "busy work" in order to maximize and enhance productivity on a daily basis. We will do so mainly by exploring how LLMs can callfunctions.

Maximize Productivity with AI Agents

Tejas Kumar

Acabas de lanzar una nueva característica. Las pruebas pasaron. CI está en verde. Todo está desplegado. La vida es buena... hasta que las alertas comienzan a llegar. Los usuarios informan de "cosas raras que suceden", fallos en la interfaz de usuario, informes vagos de "parece lento" y ese temido mensaje de "no se puede iniciar sesión". Bueno, esto parece ser un mal día. Pero... tal vez no.Mira esta sesión práctica para aprender cómo construirlo, romperlo, depurarlo y pasar de "no tengo idea de qué está mal" a solucionar problemas, todo de una vez. Dado que somos desarrolladores serios (obviamente), usaremos Next.js y:<ul><li>Configurar Sentry desde cero, incluyendo Errores, Reproducción de Sesiones y Trazado</li><li>Aprender formas de usar Replays para entender la experiencia real del usuario, y cómo usar Trazado para depurar problemas de la aplicación</li><li>Aprovechar Sentry AI y el contexto de tu aplicación para entender qué está realmente roto, y usar Autofix para generar una solución, desde la causa raíz hasta el PR.</li></ul>Utiliza esta guía de la masterclass para seguir: <a href="https://sentry-build.vercel.app/quickstart/" target="_blank">Guía de Inicio Rápido</a>.

Instrumentar, Monitorizar, Arreglar: Una Sesión Práctica de Depuración

The Workshop focuses on using Sentry for debugging production issues and exploring its features like AI debugging and SDKs. Participants set up GitHub integration, configure Sentry, and utilize tracing and session replay for error correlation. Performance analysis and database optimization, along with enhancing error handling and utilizing AI for automated error analysis, are key topics. The Workshop also covers troubleshooting, PR submission, CIR workflow, and exploring backend database queries in Sentry.

You just shipped a new feature. Tests passed. CI’s green. Everything’s deployed. Life’s good… until the alerts start rolling in. Users reporting “weird stuff happening”, UI glitches, vague “it seems slow” reports, and that dreaded “can’t login” message. Well, this is shaping up to be a bad day. But… maybe not.Watch this hands-on session to learn how to build it, break it, debug it, and go from “no idea what’s wrong” to fixing issues—all in one go. Since we’re serious developers (obviously), we’ll use Next.js and:<ul><li>Setup Sentry from the ground up - including Errors, Session Replay, and Tracing</li><li>Learn ways to use Replays to understand the real user experience, and how to use Tracing to debug application issues</li><li>Leverage Sentry AI and the context of your application to understand what’s actually broken, and use Autofix to generate a fix - from root cause all the way to PR.</li></ul>Use this workshop guide to follow along: <a href="https://sentry-build.vercel.app/quickstart/" target="_blank">Quickstart Guide</a>.

Instrument, Monitor, Fix: A Hands-On Debugging Session

Lazar Nikolov

Lynx, una nueva pila multiplataforma adoptada por la aplicación TikTok que permite a los equipos entregar interfaces de usuario verdaderamente nativas a móviles y web desde una única base de código utilizando sus habilidades web existentes como CSS y React, ha sido recientemente de código abierto.En esta charla, exploraremos qué hace que Lynx sea familiar y qué lo distingue de otras tecnologías multiplataforma; echaremos un vistazo más de cerca a su diseño de doble hilo, y cómo eso permite los lanzamientos instantáneos de Lynx y las interacciones suaves como la seda, además de un adelanto de lo que sigue para Lynx.

Lynx: Desbloquea Nativo para Más

Shen's first English talk at a conference introducing Lynx project with viral success, Lynx leveraging web technologies for multi-platform development, bridging web strengths with native capabilities, enhancing development capabilities with native UI elements, instant rendering, MTS enabling man-thread scripting and CSS support, exploration of Tailwind integration, embracing Haskell in Lynx for cross-platform thinking.

Lynx, a new cross-platform stack adopted by the TikTok app that empowers teams to ship truly native UIs to mobile and web from a single codebase using their existing web skills like CSS and React, has recently been open sourced.In this talk, we'll explore what makes Lynx familiar and what sets it apart from other cross-platform technologies; we’ll take a closer look at its dual-threaded design, and how that enables Lynx's instant launches and silky-smooth interactions, plus a sneak peak at what's next for Lynx.

Lynx: Unlock Native for More

Xuan Huang

Las herramientas de AI están cambiando cómo diseñamos, construimos y probamos interfaces de usuario. Esta charla analiza las tecnologías actuales de AI que están mejorando el proceso de desarrollo frontend y cómo usarlas, incluyendo:- Uso de Visual Copilot para convertir diseños de Figma en código listo para producción;- Implementación de agentes de AI para escritura y prueba de código automatizadas;- Ejemplos del mundo real que muestran cómo las herramientas de AI pueden mejorar la velocidad y el disfrute del desarrollo.

Desarrollo Frontend Potenciado por AI: Construyendo Mejores UIs Más Rápido

Discussing building better UIs faster with AI, emphasizing the use of LLMs as predictive text models and the need to maximize their smart aspects in coding and UI development. Exploring file context management in Cursor IDE and demonstrating quick UI updates using AI for coding efficiency and real-time results. Discussing advanced workflows for efficient development using feedback-driven approaches and incorporating test-driven development for iterative and automated testing in Cursor IDE. Exploring advanced prompt tricks in Cursor IDE for efficient development by writing tests first, updating code iteratively, and enabling autorun mode for automated testing and bash commands. Cursor's Annoying Prompt Behavior, Automated Testing Benefits, and Test-Driven Development for Reliable Code. AI Feedback Importance and AI Testing Complexity with Clear Goals. AI Challenges, Visual Front-End Focus, and Fusion Preview. Integration of Figma Designs for Visual Tweaks, Exploring New Features and Design Systems, Updating Customers Tab and Making Visual Edits, Making Carousel and Visual Updates, Granular Design Updates and AI Integration, Dynamic Updates and Component Refactoring, Tagging Builder Bot for Automated Code Updates.

AI tools are changing how we design, build, and test user interfaces. This talk looks at current AI technologies that are improving the frontend development process and how to use them, including:- Using Visual Copilot to convert Figma designs into production-ready code;- Implementing AI agents for automated code writing and testing;- Real-world examples showing how AI tools can improve development speed and joy.

AI-Powered Frontend Development: Building Better UIs Faster

Steve Sewell

Comenzar una startup es una cosa - escalarla es una bestia completamente diferente. En esta charla práctica, impulsada por la experiencia, te llevaré a través de nuestro viaje de dos años construyendo y escalando una aplicación de JavaScript desde cero. En lugar de conceptos teóricos, escucharás historias reales sobre los desafíos técnicos que enfrentamos y las soluciones que implementamos.

Escalando una Aplicación de React de 0 a Usuarios Brasileños

Three years ago, faced tough decision job change. Chose tech co-founder role for innovative idea 'war with apply to job button' for universities. Startup validation via email engagement with decision makers, avoiding premature seeking of investment. Emphasis on tech stack adaptability, modular design, and reusability. Challenges with third-party library management, component library reorganization, and optimizing CSS loading. Focus on app quality improvement, release process enhancement for global success.

Starting a startup is one thing - scaling it is another beast entirely. In this practical, experience-driven talk, I'll take you through our two-year journey of building and scaling a JavaScript application from ground zero. Rather than theoretical concepts, you'll hear real stories about the technical challenges we faced and the solutions we implemented.

Scaling a React Application from 0 to a Brazilian Users

Neciu Dan

En JavaScript Mastery, hemos construido una plataforma de aprendizaje escalable para servir a millones de desarrolladores en todo el mundo, y el proceso vino con sus propios desafíos y lecciones únicas. Las plataformas de aprendizaje tradicionales sufren de estructuras rígidas, baja retención y cuellos de botella en la escalabilidad, por lo que nos propusimos crear un sistema flexible y de alto rendimiento que pudiera crecer con nuestra audiencia.En esta charla, desglosaré cómo diseñamos un sistema de contenido dinámico basado en MDX con React, permitiendo la integración perfecta de videos, codificación interactiva y cuestionarios impulsados por IA.Profundizaré en:<ul><li>React Server Components y renderizado en streaming para un aumento del 40% en el rendimiento</li><li>Estrategias de SEO impulsadas por Next.js que triplicaron el tráfico orgánico</li><li>Técnicas de compromiso basadas en datos que mejoraron significativamente la retención</li><li>Lecciones de escalado al servir a una audiencia global de desarrolladores</li></ul>Este es un estudio de caso del mundo real sobre las decisiones de ingeniería, desafíos y optimizaciones que llevaron nuestra plataforma de una idea a un ecosistema de aprendizaje ampliamente adoptado. Ya sea que estés escalando un LMS o cualquier aplicación impulsada por contenido, estos conocimientos te ayudarán a construir, optimizar y hacer crecer tus propias plataformas de manera efectiva."

De la Arquitectura a la Adopción: Ingeniería y Escalado de un LMS Moderno con React

The speaker highlights challenges in online learning platforms and the necessity for a developer-centric platform. Insights on building a specialized platform with real-world case studies are shared. MDX is discussed for creating flexible content and organizing content pieces into reusable modules. The platform architecture involves a monorepo with TurboRepo managing a stack of technologies. Strategies for enhancing user engagement, user retention through streaks, and key takeaways like scalable architecture, strategic rendering, and user-focused development are emphasized. Performance optimization techniques such as React Server Components and asset optimization with WebP are mentioned. Strategies for privacy-aware metrics tracking, user learning metrics, and avoiding server-side rendering for better performance are also covered.

At JavaScript Mastery, we've built a scalable learning platform to serve millions of developers worldwide—and the process came with its own unique challenges and takeaways. Traditional learning platforms suffer from rigid structures, low retention, and scalability bottlenecks, so we set out to create a flexible, high-performance system that could grow with our audience.In this talk, I'll break down how we engineered a dynamic MDX-based content system with React, enabling seamless integration of videos, interactive coding, and AI-powered quizzes.I’ll dive into:<ul><li>React Server Components &amp; streaming rendering for a 40% performance boost</li><li>Next.js-driven SEO strategies that tripled organic traffic</li><li>Data-driven engagement techniques that significantly improved retention</li><li>Scaling lessons from serving a global developer audience</li></ul>This is a real-world case study of the engineering decisions, challenges, and optimizations that took our platform from an idea to a widely adopted learning ecosystem. Whether you're scaling an LMS or any content-driven application, these insights will help you build, optimize, and grow your own platforms effectively."

From Architecture to Adoption: Engineering & Scaling a Modern LMS with React

Adrian Hajdin

¿Podemos aplicar las lecciones de CSS a JavaScript?Mientras trabajamos en StyleX usamos la compilación y la técnica Atomic CSS para crear un sistema más eficiente. Tener pequeñas reglas CSS atómicas maximiza la reutilización y reduce drásticamente el tamaño del CSS a escala. Un compilador potente hace que el proceso sea automático y libera de tener que pensar en DSLs personalizados. ¿Podemos hacer lo mismo para JavaScript? ¿Cuáles serían las compensaciones? ¿Puede resultar en beneficios únicos no posibles con la mayoría de los otros enfoques?

¿JavaScript Atómico Compilado?

In 2008, the movie Vantage Point inspired the exploration of diverse perspectives in software development. The evolution from traditional CSS to atomic styles in StyleX and the scalability advantage of atomic JavaScript are significant areas of interest. Rethinking server-side rendering with React, Web Components, and the Hano framework introduces new possibilities for interactive components. Custom elements, Shadow DOM, and the Solenoid framework address challenges in CSS scoping and SSR for lighter-weight HTML. Signal functions in Solenoid offer a unique approach to data management and component development, enhancing app efficiency. Real-time interactive server setup, innovative server-side development, and the use of HTML as a source of truth contribute to project speed and efficiency. Debugging, component definition, HTML streaming, and component usage highlight the declarative nature and streaming capabilities of server-generated HTML.

Can we apply the lessons of CSS to JavaScript?While working on StyleX we use compilation and the technique Atomic CSS to create a more efficient system. Having small atomic CSS rules maximizes re-usability and dramatically reduces the size of the CSS at scale. A powerful compiler, makes the process automatic and frees from having to think custom DSLs. Can we do the same for JavaScript? What would the trade-offs be? Can it result in unique benefits not possible with most other approaches?

Compiled Atomic JavaScript?

El Estado de React y la Comunidad en 2025

Mark Erickson discusses the state of React in 2025, React community debates on React's direction and misconceptions, React's shift towards client-side frameworks and SSR emphasis, React's feature development process at Meta and Vercel, controversy around Vercel's server components involvement, tight relationship between React and Next, React team's emphasis on frameworks for app performance, critique of React's heavy-handed framework recommendation, React team's delay in adding VEET as a recommended tool, challenges with server components' origins and communication, no official signals support planned for React 19, social media impact on React development decisions, React community diversity and server components usage insights, React's evolving black box concept and tradeoffs discussed.

The State of React and the Community in 2025

React and its ecosystem grows every year. New tools, new patterns, new concepts. This workshop covers the latest trends in the React development world. If you feel that you know how to use it but there is something more you could learn, this workshop is for you. We'll be going through the fundamentals, composition patterns, state management, styling workflows, routing, server-side rendering and components.

React in Patterns

<div>AG Grid y AG Charts son bibliotecas de cuadrículas y gráficos empresariales que están construidas para el rendimiento. En este masterclass, aprenderás los conceptos básicos para comenzar a construir cuadrículas y gráficos ricos en funciones en tus aplicaciones de React.</div><div> </div><div>Descubrirás:</div><div><ul><li>Qué tan rápido puedes construir soluciones poderosas de cuadrículas y gráficos en React:</li><li>Renderizado y edición de celdas en AG Grid</li><li>Construcción de gráficos de líneas, barras y pasteles.</li></ul>En este masterclass práctico de 3 horas, aprenderás la poderosa simplicidad de usar AG Grid y AG Charts en tus aplicaciones. Seamos honestos, las cuadrículas y los gráficos pueden ser complicados. Afortunadamente, AG Grid y AG Charts lo hacen fácil. Este masterclass es útil para aquellos que consideran una biblioteca de cuadrículas a gráficos, para desarrolladores y para líderes de equipo.</div>

Building Dynamic Grids and Charts

Thanks for joining the Agigrid Workshop at React Summit with a focus on building dynamic grids and charts. Participants explored Agicharts and Agigrid, worked on hands-on exercises, and learned about chart and grid APIs. The workshop covered topics like series-based charts, combo charts, bubble charts, and donut charts. Participants also delved into sorting and filtering options in AgGrid, customization features, cell editing, and implementing custom cell editors for efficient data handling. The session emphasized practical exercises, value getters, formatters, and renderer functions for enhancing data visualization and manipulation in AG-Grid.

<div>AG Grid and AG Charts are enterprise grid and chart libraries that are built for performance. In this workshop, you'll learn the basics of getting started with building feature-rich grids and charts in your React applications.</div><div> </div><div>You'll discover:</div><div><ul><li>How quick you can build powerful grid and charting solutions in React:</li><li>Rendering and editing cells in AG Grid</li><li>Building line, bar, and pie charts.</li></ul>In this 3 hours hands-on workshop you'll learn the powerful simplicity of using AG Grid and AG Charts in your apps. Let's be honest, grids and charts can be tough. Thankfully, AG Grid and AG Charts makes it easy. This workshop is helpful for those considering a grid to chart library, for developers, and for team leads.</div>

Brian Love

Elegir el mejor framework es difícil, ¿verdad? Tenemos Next.js, Remix y un montón de otros en la mezcla. Así que, mantengámoslo real en esta charla—estaré comparando tres de los grandes contendientes: Next.js, Remix y un paquete sorpresa.Estaremos viendo algunas cosas clave como la obtención de datos, el enrutamiento, SEO, rendimiento, renderizado del lado del servidor y más. Piénsalo como un enfrentamiento amistoso donde estos frameworks se enfrentan en una competencia justa y equitativa.Vamos a repartir puntos y ver quién sale en la cima, destacando qué framework es genial para diferentes usos y ayudándote con tu próximo proyecto. Y oye, aquí no hay favoritismos—mantendré la neutralidad y respaldaré todo con ejemplos del mundo real.

Let's Fight: React Framework Showdown 🥊

Today's focus is on comparing React frameworks and choosing the most suitable one for your project based on your beliefs about app development. Ankita's tech background, education focus, and unbiased framework comparison oath. Comparison of Next.js, React Router v7, CanStack Start. SSR and streaming in web evolution. Frameworks' different approaches. Choosing the right framework for app development based on needs. Comparing frameworks based on key pillars. Next.js for scalability and SEO. Remix for web standards integration. Tanstack Start for client-heavy apps and server-first approach. Different components in Next.js. Next.js ideal for e-commerce and content-heavy sites. Flexibility with React router for various applications. Tanstack's focus on client-heavy apps. Tanstack Start benefits, including server-first approach and full typing. Tanstack's advantages in typing, streaming, and server functions. Ideal for client-heavy apps with interactivity. Consider adoption rates and ecosystem longevity when choosing a framework. Comparison of Next.js, React Router v7, and Tanstack in terms of learning curve, adoption points, and routing methods. Developer experience comparison among Next.js, React Router v7, and Tanstack. Performance aspects including image handling, caching controls, and prefetching in Next.js and TANstack. Comparison of data fetching methods in Next.js, React Router, and TANstack. Deployment flexibility across frameworks. Key considerations for choosing Next.js, React Router, or Tanstack based on specific criteria. Next.js highlighted for built-in optimizations, server components, and broad community support. React Router emphasizes progressive enhancement, accessibility, and deep nested routing. Tanstack recommended for React Query integration, client-heavy apps, and SSR without complex abstractions.

Choosing the best framework is tough, isn't it? We've got Next.js, Remix, and a bunch of others thrown into the mix. So, let's keep it real in this talk—I'll be comparing three of the big contenders: Next.js, Remix, and one surprise package.We'll be looking at some key stuff like Data fetching, Routing, SEO, Performance, Server-side Rendering, and more. Think of it like a friendly showdown where these frameworks go head-to-head in a fair and square matchup.We'll dish out points and see who comes out on top, highlighting which framework rocks for different uses and helping you out with your next project. And hey, no favoritism here—I'll be keeping it neutral and backing it all up with real-world examples.

Ankita Kulkarni

Gracias a Expo Router, es más fácil que nunca crear una hermosa aplicación que funcione en iOS, Android y web. Con la adición de herramientas de IA, ahora es más fácil construir una aplicación que desplegarla, pero no tiene por qué ser así. Aprende sobre cómo hemos mejorado Expo Router y cómo estamos facilitando el envío de aplicaciones a todas partes.

Deploy Everywhere with Expo Router

Innovating ExpoGo (formerly Exponent) for rapid mobile prototyping with custom native code support and instant deployment. Revolutionizing native app development with Continuous Native Generation (CNG) for enhanced speed and access to new features. Empowering React framework with Expo for web, enabling universal apps with SEO benefits and advanced CSS tools. Innovating navigation with Expo Router for seamless file-based routing and native API integration. Streamlining app deployment with Expo for efficient full stack development and user onboarding.

Thanks to Expo Router it's easier than ever to build a beautiful app that runs on iOS, Android, and web. With the addition of AI tooling, it's now easier to build an app than it is to deploy one, but it doesn't have to be. Learn about how we've improved Expo Router and how we're making it easier to ship apps everywhere.

Descubre cómo abordamos los desafíos comunes de una gran suite de pruebas E2E y facilitamos la refactorización de nuestro código base de React.En el último año, pasamos de cero a 20,000 líneas de pruebas de Playwright, llevando sus capacidades más allá de las pruebas básicas de extremo a extremo. Esta charla explorará los desafíos que encontramos al escalar nuestra configuración de Playwright y cómo los resolvimos, gracias al ecosistema robusto y la creatividad del equipo.La charla cubre:- Enfoques de prueba y dónde encajan las herramientas comunes en la pirámide de pruebas- Desafíos al escalar suites de pruebas E2E: rendimiento, inestabilidad, propiedad, simulación y más- Cómo resolvimos estos desafíos para desbloquear la refactorización de un gran código base de React- Consejos y trucos avanzados de Playwright

En la Cima de la Pirámide: Pruebas de Playwright a Escala

Introduction to Playwright as an end-to-end testing tool with easy installation and code generation. Features include visual comparisons, API testing, and best-in-class developer experience. Playwright offers AI capabilities, practical testing tools, and innovative testing strategies. Challenges in testing specialized domains are addressed, along with best practices for test dependencies and readability. Optimizing testing efficiency through parallelism, code organization, and network cache usage. The discussion also covers test performance enhancement, managing workers, optimizing dependencies, stability of test functions, and the use of Playwright sharding in CI/CD runs.

Discover how we tackled the common challenges of a large E2E test suite and made our React codebase easier to refactor.In the past year, we went from zero to 20,000 lines of Playwright tests, pushing its capabilities beyond basic end-to-end testing. This talk will explore the challenges we encountered as we scaled our Playwright setup and how we solved them, thanks to the robust ecosystem and team creativity.The talk covers:- Testing approaches and where common tools fit on the testing pyramid- Challenges scaling E2E test suites: performance, flakiness, ownership, mocking and more- How we solved these challenges to unblock refactoring a large React codebase- Advanced Playwright tips and tricks

At the Top of the Pyramid: Playwright Testing at Scale

Kate Marshalkina

Cómo Convertirse en un Staff Engineer

The speaker provides insights on transitioning to a staff engineer role, emphasizing the key pillars of technical excellence, organizational impact, and mentorship. They discuss challenges faced in leading projects at Slack and misconceptions in staff engineer development, highlighting the importance of networking and self-promotion. Strategies for advancing to staff engineer level, promotion to senior staff engineer, and selecting strategic projects for career progression are outlined. The talk also covers career advancement strategies, navigating responsibilities as a staff engineer, deciding on the staff engineering path, and considerations in career decisions within engineering.

How to Become a Staff Engineer

Desbloquea todo el potencial de las aplicaciones web modernas con arquitecturas multi-hilo en React. Esta sesión explora estrategias para aprovechar Web Workers y OffscreenCanvas para paralelizar el procesamiento de datos, cálculos pesados y renderizado de UI. Descubriremos cómo crear interfaces que sean escalables y no estén restringidas por los cuellos de botella convencionales de JavaScript.

Escalando Aplicaciones React con Paralelismo: Patrones para UIs Multi-Hilo

Introduction to multithreading in React for smoother user experiences by utilizing web workers and off-screen canvas. Tools for breaking free from JavaScript single-threading with web workers and offscreen canvas. Smooth UI performance with web workers, limitations, and offscreen canvas for offloading graphics rendering. Design separation for preventing threading issues, offload CPU-intensive tasks to workers without DOM access limitations. Manage WebWorker communication effectively with promise-based approach for tasks. Enhance data transfer efficiency with transferable objects and shared array buffer. Decide when to use multi-threading techniques wisely; reserve workers for data processing and complex operations. Best practices include terminating workers when not needed, profile applications, and explore future front-end parallelism for optimized user experiences.

Unlock the full potential of modern web applications with multi-threaded architectures in React. This session explores strategies for leveraging Web Workers and OffscreenCanvas to parallelise data processing, heavy computations, and UI rendering. We'll discover how to create interfaces that are scalable and unrestricted by conventional JavaScript bottlenecks.

Scaling React Apps with Parallelism: Patterns for Multi-Threaded UIs

Shubham Gautam

A medida que nuestras aplicaciones de React crecen, también lo hacen los desafíos de mantener un código libre de errores. Crear un conjunto de pruebas confiable puede ser una tarea desalentadora, a menudo plagada de inestabilidad y complejidad. En esta charla, desglosaré un enfoque práctico y orientado a la ingeniería para escribir pruebas que realmente hagan que el desarrollo sea más fluido. Nos sumergiremos en las mejores formas de integrar Playwright con React, abandonar mentalidades de prueba obsoletas y adoptar estrategias que aseguren que tu aplicación funcione como se espera, sin dolores de cabeza. Espera ejemplos del mundo real, conclusiones prácticas y una nueva perspectiva sobre las pruebas que podría hacer que las disfrutes.

Testing React Applications Like an Engineer

Imagine the scenario of working on the Mars rover, emphasizing the importance of thorough testing. Learn to test React applications effectively like an engineer. Focus on user-centric testing over traditional paradigms. Write precise test cases as user stories using BDD for clear communication. Utilize a structured approach with arrange, act, assert steps for clear tests. TDD is valuable for bug diagnosis and solutions, emphasizing efficient bug reproduction and resolution. Annotate tests to reproduce and fix bugs, focusing on user flows and effective bug fixing.

As our React applications grow, so do the challenges of maintaining bug-free code. Crafting a reliable test suite can be a daunting task, often plagued by flakiness and complexity. In this talk, I’ll break down a practical, engineering-first approach to writing tests that actually make development smoother. We’ll dive into the best ways to integrate Playwright with React, ditch outdated testing mindsets, and adopt strategies that ensure your app works as expected—without the headaches. Expect real-world examples, actionable takeaways, and a fresh perspective on testing that might just make you enjoy it.

Austin Shelby

El Estado de React

Introduction to the State of React survey and the history of developer surveys. Detailed analysis of survey results, user demographics, and job titles. Examination of React API trends, user sentiment towards APIs, and new API challenges. Analysis of React library satisfaction, particularly with Next.js. Discussion on React state management and data loading, including pain points. Insights on React library usage patterns and application trends. Key takeaways include staying calm, appreciating foundational React elements, and relying on data for a balanced view.

React Summit 2025

The biggest React conference worldwide