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

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

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

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

¡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

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

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

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

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

Jarred Sumner

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

Sacha Greif

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

Krasimir Tsonev

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

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.

In the past few years, there have been a large number of generative AI use cases and adoption has grown increasingly. A large number of web and JS applications now leverage large language models (LLMs), vector search / RAG (Retrieval Augmented Generation) for building better user experiences. Now the tide is shifting, and we have entered the era of AI agents. This is a promising field which combines the different generative AI usecases and helps to simplify the process of interacting with Gen AI by essentially making agents act like humans and makes interactions feel more human like to solve problems in an automated fashion.In this workshop, while we give a quick over view of LLMs, RAG, we will dive deeper into concepts of AI Agents such has how one can leverage LLMs for specific tasks. How can we include tool calling / function calling in AI Agents. Thus showing how an AI Agent is a system that is capable of independently deciding which functions or data sources to used to efficiently execute users' orders.We will show how to develop an AI agent that runs purely on the browser vs running them using cloud.  This workshop is for javaScript developers, AI enthusiasts, and tech innovators who want to integrate the use of AI within web applications to create intelligent and interactive app experiences. Table of contents:  1. Intro to the general landscape of LLMs, RAG2. What are AI Agents3. Core components of AI Agents4. How to build your first AI Agent with JavaScript5. Stack to build AI Agents in the browser with open source models

Bringing and Running AI Agents in the Browser

Shivay Lamba

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

Malicious code is out to get you. Can you keep your app working as expected and hold on to your secrets? Come to this workshop and try!The entire workshop will be delivered as bite-sized hands-on exercises where increasingly advanced threats are presented and you get to defend.  No matter if you're concerned with malicious npm packages or building software to run other people's code, techniques presented in this workshop can be used to isolate JavaScript at runtime and protect against prototype poisoning. We'll explore techniques allowing cooperation with packages that intend to steal your secrets and mess with built-in functionality of JavaScript via prototype-poisoning.Another part of the workshop will focus on using tools to isolate code and scale the defensive coding practice up for larger codebases. If you're not dealing with security-critical code, it's a great opportunity to expand your awareness of rarely explored areas of JavaScript knowledge.

Defensive Coding

Zbyszek Tenerowicz

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

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

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

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.

The State of React

<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

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

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

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

Welcome to React Summit! Learn about DEC GL, a geospatial visualization framework by Uber optimized for React. Visualize geospatial data with ease using DEC GL, React, and WebGL for rendering millions of points. Focus on integrating DEC GL with React, utilizing data and state variables for visualization layers. Combine data for visualization, ensure proper layer hierarchy to avoid overlaps. Using dev.gl or react-map-gl with Mapbox for map creation. Adding properties in GeoJSON, focusing on hovering interaction, updating hover feature with onHover handler. Efficient State Management for Custom Layers in WebGL, Performance Optimization with Deck.gl Features.

Unlock the potential of geospatial data by combining React and deck.gl to create immersive web applications. This talk will demonstrate how to transform complex datasets into interactive, high-performance visualizations that captivate users. Whether you’re working on urban planning, environmental monitoring, or storytelling, learn how to elevate your projects with cutting-edge mapping technologies.

Beyond Maps: Crafting Immersive Geospatial Experiences with React and deck.gl

Marko Letic

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.

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

Elio's tips for perfect live coding: Minimize distractions, prepare well with light themes and larger fonts, adjust cursor style, avoid hover panels. Stay focused on one application during presentations. Changing settings for clarity, stressing the importance of tools like Demo Time for scripted presentations within Visual Studio Code, eliminating context switching between applications, and facilitating audience interaction with shared repositories. Exploring actions in Demo Time: creating code, opening files, highlighting code, and executing VS Code commands for a cleaner presentation. Utilizing Slides for Markdown presentations within Demo Time.

Join Elio for a talk on mastering live coding demos. Learn to script your demos for seamless, error-free execution using Visual Studio Code and the Demo Time extension. Ideal for anyone performing live coding at conferences, webinars, or team meetings, this session will help transform your presentations from stressful to impressive.

Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection

Elio Struyf

La Federación de Módulos te permite organizar el código en módulos federados, cargados dinámicamente en tiempo de ejecución dentro de una aplicación host, un mecanismo central detrás de las Super Apps. En la web, esto se maneja típicamente con Webpack.Ahora, con Re.Pack como una alternativa a Metro, React Native también lo soporta. Esto permite que las Super Apps nativas existentes hagan la transición a React Native y habilita módulos verdaderamente multiplataforma, permitiendo a los desarrolladores usar React y JavaScript sin preocuparse por dónde se ejecutan los módulos.En esta charla, exploraremos estas posibilidades, mejores prácticas y ejemplos del mundo real para ayudarte a construir Super Apps eficientes y multiplataforma.

Construcción de Módulos Federados Multiplataforma con React, React Native y Re.Pack

Introduction to building cross-platform super apps with React, React Native, and Repack. Discussion on leveraging module federation for cross-platform applications and the benefits of Repack, React Native, and module federation. Explanation of module federation's potential in React Native with Repack. Importance of Repack as an alternative bundler for React Native and the significance of sharing infrastructure. Overview of Repack V5's compatibility with React Native, migration benefits, and cross-platform micro-frontends. Integration of federated modules in React Native for seamless standalone module integration. Configuring flexible federated module dependencies with RSPack, Zephyr Cloud for versioning, and lazy loading. Integrating SDK for decoupled module development and enhancing federated module UI flexibility. Challenges and benefits of integrating external modules in React Native. Improving application development speed with Module Federation and Repack for faster deployment.

Module Federation lets you organize code into federated modules, dynamically loaded at runtime within a host application—a core mechanism behind Super Apps. On the web, this is typically handled with Webpack.Now, with Re.Pack as a Metro alternative, React Native supports it too. This allows existing native Super Apps to transition to React Native and enables truly cross-platform modules, letting developers use React and JavaScript without concern for where modules run.In this talk, we’ll explore these possibilities, best practices and real-world examples to help you build efficient, cross-platform Super Apps.

Building Cross-Platform Federated Modules With React, React Native and Re.Pack

Mike Grabowski

La optimización del rendimiento es fundamental para ofrecer experiencias de usuario rápidas y fluidas en el siempre cambiante panorama del desarrollo web. Esta charla profundiza en el uso innovador de las reglas de especulación para mejorar los tiempos de carga web y el rendimiento general. Los asistentes obtendrán información sobre los principios y mecanismos detrás de las reglas de especulación, aprenderán cómo predicen y pre-cargan recursos, y explorarán aplicaciones del mundo real y estudios de caso que demuestran su impacto. Únete a mí para descubrir cómo las reglas de especulación avanzan los límites de la optimización del rendimiento web y cómo puedes implementar estas técnicas para crear aplicaciones web más rápidas y eficientes.

Navegación de Páginas Ultrarápida con Reglas de Especulación

The talk explores the concept of building fast-navigating pages using speculation rules to enhance user experience. It delves into human impatience and the evolving perceptions of page speed. Speculation rules optimize page loading for seamless transitions based on user behavior predictions. Configuring speculation rules in HTML involves action decisions, target selection, and eagerness settings impacting loading behavior. Eagerness settings determine link loading behavior and resource optimization. The implications of speculation rules implementation include responsible pre-rendering and pre-fetching, measurement metrics assessment, and considerations for broader browser support. The talk also covers debugging speculation rules, efficient analysis of pre-rendered content, browser regulations, and bandwidth optimization techniques for improved page loading efficiency.

Performance optimization is critical to delivering fast and seamless user experiences in the ever-evolving web development landscape. This talk delves into the innovative use of speculation rules to enhance web loading times and overall performance. Attendees will gain insights into the principles and mechanisms behind speculation rules, learn how they predict and pre-fetch resources, and explore real-world applications and case studies demonstrating their impact. Join me to discover how speculation rules advance the limits of web performance optimization and how you can implement these techniques to create faster, more efficient web applications.

Blazing Fast Page Navigation with Speculation Rules

Medhat Dawoud

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.

Let's Fight: React Framework Showdown 🥊

Ankita Kulkarni

¿Qué pasaría si nunca tuvieras que tocar estilos en tu código nuevamente? Esta charla relámpago presenta un enfoque del mundo real para la implementación de diseño totalmente automatizada, donde los cambios en Figma se reflejan automáticamente en la aplicación a través de tokens y un pipeline de CI. Una mirada práctica a lo que sucede cuando se le da control visual completo a los diseñadores, y por qué eso podría ser algo bueno también para los desarrolladores.Conclusiones para la audiencia:- Una perspectiva provocativa: ¿realmente un desarrollador frontend necesita escribir estilos?- Herramientas y técnicas para sincronizar Figma → GitHub → CSS → Aplicación web.- Un replanteamiento de las responsabilidades entre diseñadores y desarrolladores.

Zero-Styling Development: ¿Utopía o el Futuro del Frontend?

Mateusz Szczygodziński presenting on Zero Styling Development and the challenges faced with manual styling implementations, leading to the adoption of a zero styling approach for efficiency and consistency in design implementation. Workflow Builder adopts a zero-styling approach beginning with design tokens in Figma, followed by automation for CSS generation and implementation using CSS variables, ensuring easy styling changes without developer intervention.

What if you never had to touch styles in your code again? This lightning talk presents a real-world approach to fully automated design implementation — where changes in Figma are automatically reflected in the app via tokens and a CI pipeline. A practical look at what happens when you give full visual control to designers, and why that might be a good thing for developers, too.Audience Takeaways:- A provocative perspective: does a frontend dev really need to write styles?- Tools and techniques to sync Figma → GitHub → CSS → Web app.- A rethink of responsibilities between designers and developers.

Zero-Styling Development: Utopia or the Future of Frontend?

Mateusz Jagodziński

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

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

Menahi Shayan, former CTO, discusses the power of React in software development beyond the browser, emphasizing its ease of use and versatility. JS developers face challenges beyond JS comfort zones when building tools for various platforms, illustrating diverse paradigms and syntaxes. Learn how to set up office add-ins with React using Yeoman, generating boilerplate for Excel add-ins and exploring code structure. Explore ExcelJS API integration with React for Excel add-ins, including manipulating Excel sheets and syncing data between JavaScript and Excel runtimes. Extract values and addresses from selected ranges in Excel using context.sync function. Display data in JSX/TSX and demonstrate accessibility of data selected in Excel sheets through JavaScript/React. Leverage NPM packages including generative AI and Tailwind CSS to create a React-powered Excel add-in. Utilize Fluent UI for consistent UI with Excel and demonstrate JS capabilities in modifying Excel content. Discussing challenges in utilizing an LCD display with limited capabilities for React implementation and highlighting the absence of CSS, state management, animations, and DOM updates in current rendering methods. Presenting a groundbreaking solution to render React on embedded system displays by utilizing the Linux system frame buffer with Chromium, achieving high FPS and full HTML, CSS, and JS support. Running a React-based package called Magic Mirror on an embedded system enables seamless API calls through JavaScript, full UI rendering, Chromium inspector access, and remote debugging experience. Leveraging all available packages beyond the browser unlocks JavaScript's full potential on embedded systems, urging users to explore unconventional setups and embrace the native development philosophy.

This talk introduces you to unconventional places where React can be rendered to solve problems outside the the boundaries of your browser window. It speciically dives into Productivity Plugins and Embedded Systems.

React Beyond the Browser

Menahi Shayan

Travis TI Kevin83 McGeehan, senior software engineer, ambassador for Task Videos, React Native specialist, task record holder in Pokemon Yellow Glitchless, TAS verification process for console input validation. Mickey Mouse $61 billion in merchandise sales, Pokemon RPGs, speedrunning concept, different categories, TASing in emulators, TAS records on TASvideos.org, TASbot mascot. TAS verification, controller interfaces, TASbot mascot, T3 Boy accessibility challenges, TAS videos preservation, Kolmogorov complexity in emulation accuracy. Qt for emulator front ends, WebAssembly benefits, T3 Boy website integration with emulation cores, T3 stack integration for game saves, custom pointer events API, T3 Boy interface overview. Integrating WASM module into Next.js boilerplate, Global function declaration in TypeScript, Important functions like cwrap for WebAssembly interaction. Cwrap function for JavaScript module interaction, Pointer concept in lower-level languages, Memory management with malloc, heapuate, and free. Loading BIOS and Memory Management, Handling Individual Values, Using Add Function for Callbacks, Quirks with Web Audio API and Resampling Limitations. Utilizing Pointer Events API, Cloud Saving Feature with Discord Auth, T3Boy Emulator, and WebAssembly Integration in React.

TiKevin83 details how he used next.js and webassembly (WASM) to port a speedrun-accurate Game Boy emulator onto the web. Topics include using emscripten to compile a C library into a WASM module, interfacing with a WASM module from a Next.js site, video and audio playback onto the canvas and audio APIs from a WASM module, and nuances of web control schemes especially in implementing multi-touch input.

T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM

Travis McGeehan

¿Qué pasaría si la arquitectura de nuestras aplicaciones web no se tratara únicamente de elecciones tecnológicas? Muchas prácticas de arquitectura backend podrían ser relevantes en el frontend pero permanecen subutilizadas. Estas prácticas capitalizan cómo funciona nuestro cerebro para mejorar la eficiencia. Dado que pasamos más del 70% de nuestro tiempo leyendo código, desarrollar la capacidad de leer de manera más eficiente, alcanzable a través de prácticas de arquitectura sólidas, sería ventajoso.

Priorizando la Arquitectura Sobre el Framework en el Desarrollo Web

Alexandre Rivet emphasizes prioritizing architecture over frameworks in web development for efficiency and project maintenance. Leveraging long-term memory improves code comprehension and speed. Effective React applications require clear component naming and caution with global state usage. Strategies for efficient React development include separate logic for DOM and smart components, reducing global state dependencies, and creating independent API clients for flexibility.

What if the architecture of our web applications wasn't solely about technological choices? Many backend architecture practices could be relevant in the frontend but remain underutilized. These practices capitalize on how our brain functions to enhance efficiency. Since we spend over 70% of our time reading code, developing the ability to read more efficiently, achievable through solid architecture practices, would be advantageous.

Prioritizing Architecture Over Framework in Web Development

Alexandre Rivest

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

¡Usa principios de React más allá de proyectos de React! Ven a esta charla para aprender cómo aplicar la componentización, la programación declarativa y la reutilización a tareas generales de JavaScript en el front-end. Eleva tus habilidades y crea bases de código escalables y mantenibles independientemente del framework o biblioteca que elijas.

Usando React Sin Usar React

The talk emphasizes component-based thinking in JavaScript development, highlighting the importance of components in non-React projects and the flexibility of JSX usage. It explores state management in React and tools like Redux, showcasing the significance of mastering web fundamentals before delving into frameworks. The discussion touches on balancing framework selection, understanding error messages in native approaches, and the importance of maintaining simplicity in design while adopting concepts in app development.

Use React principles beyond React projects! Come to this talk to learn how to apply componentization, declarative programming, and reusability to general front-end JavaScript tasks. Elevate your skills and create scalable, maintainable codebases irrespective of the framework or library you choose.

Using React Without Using React

El rendimiento del sitio web impacta significativamente en la experiencia del usuario, a menudo llevando a la frustración y el enojo cuando las páginas son lentas o no responden. Más allá de los efectos psicológicos, un mal rendimiento puede aumentar los costos de uso y los sitios web modernos requieren un enfoque matizado para capturar interacciones continuas del usuario.Esta sesión explora comportamientos como los clics de rabia y el movimiento frenético del cursor, enfatizando métricas que reflejan las emociones del usuario y la satisfacción general. Discutiremos las complejidades de la medición del rendimiento, destacando la necesidad de mirar más allá de métricas individuales. Ideal para aquellos interesados en comprender el impacto comercial del rendimiento del sitio y los sesgos que afectan las percepciones de los usuarios.

El Rendimiento Web se Encuentra con las Ciencias Humanas

Speaker discusses the challenges in defining web speed metrics and the importance of non-hackable user behavior metrics. The impact of survivorship bias on data analysis is highlighted, along with global internet access factors and the correlation between web vitals and business outcomes. User perception of app performance, UX research impact on API design, and navigating data analysis biases are also covered. The talk emphasizes the need to connect technical metrics to business outcomes for app optimization and success.

Website performance significantly impacts user experience, often leading to frustration and anger when pages are slow or unresponsive. Beyond psychological effects, poor performance can increase usage costs and modern websites require a nuanced approach to capture continuous user interactions.This session explores behaviors like rage clicks and cursor thrashing, emphasizing metrics that reflect user emotions and overall satisfaction. We'll discuss the complexities of performance measurement, highlighting the need to look beyond single metrics. Ideal for those interested in understanding the business impact of site performance and the biases affecting user perceptions.

React Summit 2025

The biggest React conference worldwide