November 18 - 21, 2025
React Summit US
New York, US & Online

React Summit US 2025

La conferencia de React más grande de USA

Network with fellow front-end and full-stack engineers, learn from industry experts, and promote your ideas all while experiencing the exciting vistas of Manhattan!

React Summit offers a hybrid format with both remote and in-person participation.The first day will be streamed from the New York venue including hybrid networking features and interactive entertainment; and the second day, as well as the numerous free workshops, will be streamed to the global audience online.

Take advantage of being a part of the React Summit US conference!



Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
How Good is AI at Coding React (really)?
33 min
How Good is AI at Coding React (really)?
Exploring AI's impact on React coding quality and the importance of context, tools, and practices in leveraging AI effectively. AI as a force multiplier, differences between vibe coding & AI-assisted engineering, AI models' competencies in React prompts, and React developers' favorable position amidst AI advancements. AI's implications for React development, complexity cliff in React work, and AI's design challenges for React developers. React work's complexity cliff, Design Arena benchmarks for AI design capabilities, AI's design challenges for React developers. AI's role in visual design control, Design Arena's insights on scaffolding impact, AI's UI scaffold capabilities and human judgment necessity. Vercell's Next.js evals, Webbench by ByteDance, and Web Dev Arena insights on AI performance in web development. Gemini 3 and GPT-5 catching up in design models, exploring website code generation, and design sensibility in AI for React workflow. Solving the purple problem in AI training, tips for using AI in React development for building sites, and managing AI like a junior developer. Evaluating AI's performance in complex tasks, lessons on using AI like a developer, and the importance of specificity and human oversight in AI usage. Enforcing productivity and supervision, addressing context failures through engineering and providing comprehensive context for agent performance. Template for context engineering, controlling tooling quality, using Context-7 for fresh docs and examples, leveraging MCP servers for real data, and improving overall quality loop. Connecting tools for closed-loop coding, Vive coding for rapid product creation, UI components for isolated, reusable components. UI components arena focus on isolated, reusable components and visual comparisons. Guidance for UI component generation and complex 3D and data visualization models for interactive experiences. AI assistants integration strategies for 3D and data visualization. Importance of specific details like libraries and scene descriptions for optimal AI assistance. Balancing control with AI model generation and the critical factors in AI code success or failure. Debugging workflow lessons applicable to all; New flow state in AI-assisted development focusing on orchestration and code creation; Gemini 3 launch for web development and design leadership. Website aesthetics and design improvements; Proactive tool utilization for React devs; Embrace AI for faster product development. AI in automated debugging with AI agents; Limitless potential of AI in coding quality; Image generation tools for slides; Addressing security and architectural regressions in AI-generated code. AI's Impact on Future Frameworks and Team Alignment in Workflow Standardization. Strategies for Context Bugs and Workflow Optimization.
Adiós, useState
29 min
Adiós, useState
Hello, React Summit and goodbye, you states. Introduction of the speaker, David K. P., creator of Xstate library. Discussion on challenges with useEffect, managing multiple useEffects, implications of state overuse, optimizing state management in React, enhancing form data handling, effective state management strategies, innovative state management approaches, state management best practices, exploring state management options, promoting best practices, and exploring state management tools.
Plug and Play Design: Construyendo Aplicaciones React Extensibles
29 min
Plug and Play Design: Construyendo Aplicaciones React Extensibles
Mateusz Jagodziński, principal developer at Synergy Codes, shares insights on Plug and Play Design Building Extendable React Applications, discussing feature flags, modularity, and real-world use cases. Challenges of feature flags, the concept of alternative modular design for feature management, and the importance of modularity in code organization and development. Configurability and limitations in feature management, showcasing a plugin-based design for flexible tool versions and code manipulation. Explanation of plug and play design for code manipulation and version control with full type safety in TypeScript projects. Exposing functions to register new plugins, organizing plugins' logic within individual folders, and implementing a build setup with a replacement mechanism for plugin files. Replacing missing plugins with a fallback code, enforcing restriction on direct plugin imports, and visualizing the relationship between plugins, adapters, and application components. Exploring pros and cons of self-contained plugins, addressing implementation overhead, and discussing the value of enforced modularity for AI coding tools. Discussing plugin management decisions based on client needs and the scalability of the approach with changing requirements and minor tweaks. Handling plugin version tracking, automated testing challenges, and feature control based on environments. Adapters and maintaining plugin compatibility through iterations and cosmetic changes, leveraging existing solutions for simplicity. Discussing the implications of not shipping separate builds for multiple customers and considering the benefits of smaller bundle size. Exploring the ease of trying out new features with separate plugins to assess overhead and developer experience.
5 Conversaciones Difíciles que los Gerentes Necesitan Tener
37 min
5 Conversaciones Difíciles que los Gerentes Necesitan Tener
Kellie emphasizes the importance of having tough conversations in management, addressing underperformance using the care framework and support strategies. The STAR framework is highlighted for handling difficult feedback effectively. Effective communication with superiors involves acknowledging trade-offs and framing discussions around revenue impact. Setting clear communication boundaries is crucial for work-life balance and team efficiency. Encouraging a feedback culture, addressing promotion discussions transparently, and handling micromanagement concerns with empathy are key points discussed.
TanStack Start 1.0 - Un Nuevo Framework Full Stack para React y Amigos
29 min
TanStack Start 1.0 - Un Nuevo Framework Full Stack para React y Amigos
The speaker introduces Tanstack Start, emphasizing type safety for better development experiences. Tanstack Start offers a client-first approach with seamless server-side integration. Tanstack Router provides server-side solutions like SSR and API routes. The demo showcases Tanstack CLI usage and server functions. Tanstack Start enables isomorphic code with server-only logic. Enhanced data validation and URL state management are highlighted. TanStack Start enhances React development speed and quality. Integration of trpc with SSR data-only mode simplifies application migration. TanStackRouter focuses on type safety and advanced functionality compared to ReactRouter.
El Viaje de un Píxel en una Aplicación React
24 min
El Viaje de un Píxel en una Aplicación React
Sze Magnezy discusses the importance of understanding web development technologies like React, HTML5, and WebSocket for optimizing websites and improving user experience. The challenges of website delivery include delivering a perfect user experience, slow network issues, DNS resolution complexities, and handling various resources efficiently. Optimization of HTML loading, resource compression, and prioritization are crucial for faster website delivery. Improving performance through code optimization, React best practices, and state management is key for enhancing user experience.
Ganando la Batalla de Hidratación: Desbloqueando el Rendimiento de React con el Poder de Suspense
20 min
Ganando la Batalla de Hidratación: Desbloqueando el Rendimiento de React con el Poder de Suspense
Gil from Wix discusses solving a React performance bottleneck with selective hydration using Suspense API, showcasing real examples. Challenges of SSR with React hydration and its impact on interactivity and performance are outlined. The importance of selective hydration, efficient component loading, promise handling, lazy loading, and real-world impact are highlighted. Selective hydration enhances performance by reducing JS load, comparing server components with Suspense, and introducing React 19 optimizations. React 19 brings cleaner promise-based behavior, selective hydration improvements, and key takeaways on SSR benefits, suspense power, and React 19 enhancements.
React Beyond the DOM
27 min
React Beyond the DOM
Eric Rasmussen discusses React beyond the DOM, React PDF, Ink tools, and rendering to Markdown. The overview includes React Reconciler, host configuration, state management with real-world entities like light bulbs, and building a traffic light state machine visually. The talk also covers securing third-party JavaScript, expanding React rendering possibilities, advanced tooling for state machines, controlling light bulbs via renderer callbacks, server functions for fetch in the cloud, and potential robot programming with React.
Diseño a Código Usando un Sistema de Diseño Personalizado con AI
19 min
Diseño a Código Usando un Sistema de Diseño Personalizado con AI
Chaitanya, Principal Engineer at Atlassian, discusses the design system at Razorpay, the impact of AI on UI development, and the integration of AI with design systems for enhanced productivity. Detailed prompts for AI to build UI components can be cumbersome. Imagine a seamless process where AI interprets Figma designs to create UI. Leveraging design expertise and focusing on business logic, not writing detailed AI prompts. Blade's MCP server facilitates the magic of transforming Figma designs into UI code by collaborating with Figma and OpenAI.
Lecciones de la Adopción de React Compiler
23 min
Lecciones de la Adopción de React Compiler
Akash Hamilwasia presenting at React Summit 2025, shares React Compiler learnings and works on an AI audio platform. Memoization in React helps optimize UI performance by preventing unnecessary re-renders. React Compiler offers automatic memoization through static code analysis. React rules emphasize purity and immutability. The compiler analyzes and memoizes code changes for optimization. React Compiler package usage improves performance through code analysis. Understanding reactivity issues is crucial for handling React state. Compiler optimization requires correct dependency arrays and usage of external libraries. Measure React Compiler impact using React Profiler for optimization and real user impact analysis.
Generative UI Más Allá de Llamar Componentes Prediseñados
30 min
Generative UI Más Allá de Llamar Componentes Prediseñados
Failed generative UI talk explanation, exploring beyond text display with React. Vercel's generative UI tool calling. Demo challenges due to CloudFlare, GPT-5 differences. Interactive artifact generation, AI News newsletter, and ChachiBT concept. Unique superpower of developers: modifying UI for needs, tool generation challenges, pair programming concept to understand codebase better, importance of human involvement in coding, control in developer experience. Importance of control in developer experience, negative impact of AI autonomy, illusion of productivity in Vibe coding apps. Combining human and AI attention, interactive planning for coding agents, parallelizable collaborative planning. Non-interactive limitations, good interactive planning, async value of depth analytics. Increased flow disruption, semi-async failure-death, focus on code-based understanding. Hierarchical code maps for better code understanding and prompt engineering. Interplay between human and AI in code control, enhancing coding ability, and investing in coding skills. Illustrating the constant human-AI interaction and the cost of syncing with AI for different modalities. Discussing the cost of multi-modality sync with AI, encouraging a balanced approach to leveraging AI for productivity. Discussing the importance of user-friendly interfaces and the potential future of generative UI. Discussing the future of user-controlled dashboard creation and the shift of power from designers to users in generative UI development. Discussing the evolution of frameworks from developer-centric to user-centric for creating customizable UIs and the concept of malleable software coined by Jeffrey Lait. Pushing for industry adoption of the Codemap concept to enhance code quality and readability, exploring its usage with WinSurf and potential new dev tools enabled by a shared language for interacting with code bases. Discussing the impact of project size on AI effectiveness, emphasizing the importance of breaking down problems and utilizing code maps for better code management and context understanding. Discussing the importance of code map guidance and keeping code maps up to date in fast-moving projects through regular refreshing and regeneration based on git commits.
Guía Práctica de Animación en React
27 min
Guía Práctica de Animación en React
The importance of animations in enhancing user experience by bridging the gap between user expectations and digital interfaces. Practical examples of creating animations using CSS transitions and keyframes for smooth and complex effects. Utilizing timing functions with cubic Bezier curves for diverse animations and accessibility considerations. Introducing Vue Transitions as a powerful web API for seamless animations with broad browser support. Customizing Vue Transitions for unique effects, optimizing usage with unique names and global disabling, and transitioning to Spring-based animations for natural UI interactions. Exploring FramerMotion and Motion Library for React animations, configuring spring behavior for smooth effects, and enhancing animations with Motion and CSS for improved user experience.
Discusión del Panel: El Futuro de React y Su Ecosistema
43 min
Discusión del Panel: El Futuro de React y Su Ecosistema
Mark Erikson
Addy Osmani
Amy Dutton
Seth Webster
Shaundai Person
Nicolas Gallagher
6 authors
Panel introduction with members from Netflix, Meta, G2I, and Replay discussing their roles. React Foundation's impact on developers' daily routines and gradual changes without sudden disruptions. Discussing React governance split, emphasizing transparency in decision-making. Foundation's goals include supporting key libraries, expanding React communities globally, and fostering idea realization. React Compiler's impact on front end development, highlighting the complexity and importance of engineering with React. Integration of AI and vibe coding enhances the compiler's ability to optimize code and provide real-time feedback. Vibe coding importance and good engineering practices. React's mental model challenges and the potential impact of the compiler on performance optimizations and simplifying the mental model. Discussing the challenges of using AI in React development and the need to simplify instructions and improve data feeding for better output quality. Discussing the empowerment of AI in guiding React code writing and the importance of sharing instructions and evaluations for framework improvement. Understanding the gaps in React documentation, translating learning into real-world applications, and navigating architectural decisions.
¡Slots, Slots, Slots, Todos!
20 min
¡Slots, Slots, Slots, Todos!
Abbe explains how slots enhance dynamic content in components and demonstrates creating a custom element with the shadow DOM. The content covers utilizing slot attributes for named slots and slot buttons for navigation within components. It explores styling effects on components, default and named slots usage in Vue components, access and management of slot props using scoped default slots in Vue, and dynamic list creation with JavaScript destructuring in Vue components. Additionally, it discusses name slots in Angular for content projection, CSS selector matching, slot selectors, conditional content projection with ng-template, and view encapsulation modes like Shadow DOM API.
Deep Dive on React Hooks Architecture
25 min
Deep Dive on React Hooks Architecture
Introduction to React Hooks and Architecture with insights into Mattermos, React components, and JSX syntax. Understanding React.createElement, React components, and createRoot for DOM rendering. Exploring React rendering process and scheduler's role in managing component work units. Exploring React fiber tree creation and hook mechanism for state management. Exploring React fiber tree mount and update mechanisms with global variable orchestration. Exploring the use of global variables for performance optimization and the process of callback updating in React Fiber tree. Exploring hook rules and different hook mechanisms like useRef and useEffect in React. Effects in React fiber, useState complexity, update mechanisms, and cost considerations. Memory storage considerations for hooks, impact on CPU, and style optimization. Insights into React Fiber storage of props and style comparisons. Summary of topics covered and acknowledgment of additional details for future exploration.
Suspenseful Component Composition
12 min
Suspenseful Component Composition
Simeon Griggs discusses Suspenseful Component Composition, the use of fallback props, and the basics of suspense in React applications with a demo showcasing data fetching and layout shifting. Exploring issues with data fetching and suspense boundaries. Addressing the challenges of using suspense boundaries and data fetching for individual rows in React applications. Creating consistent fallback elements for smooth loading experiences in tables by aligning sizes and optimizing data fetching placement. Optimizing data fetching placement for smoother loading experiences. Consider exporting suspense boundary to enhance code cleanliness and be defensive against data fetching errors. Use error boundaries to handle errors in suspenseful data fetching components for a smoother user experience.
Caching, Payloads, y Otras Artes Oscuras: Optimizando UX en Condiciones Subóptimas
28 min
Caching, Payloads, y Otras Artes Oscuras: Optimizando UX en Condiciones Subóptimas
Farris emphasizes the need to build resilient applications for real-world usage challenges like high latency and unreliable networks. Creating fast and seamless user experiences is crucial for business success. Core technologies like React and Next, along with Tanstack Query, are discussed. Strategies include optimizing state management, network requests, and data transfer methods for enhanced user experience. The talk also covers data caching, query criticality, prefetching, and handling server retries for robust application performance.
This Is How We Made Postman Launch Twice as Fast
25 min
This Is How We Made Postman Launch Twice as Fast
CEO tests Postman on cheap laptop, reveals performance issue. Ruben Casas gives 5 tips to enhance app performance, emphasizing the importance of measuring and focusing on a key metric like TTF from mobile gaming. TTU stands for Time to Usability, a key metric for app performance optimization. Measuring TTU involves adding marks for key processes like platform initialization, JavaScript evaluation, data fetching, and rendering. Need a plan of action after identifying performance issues. Transitioned from Electron to web for faster updates, impacting download size. Introducing StatusScope for bundle optimization, reducing JavaScript bundle size significantly, implementing PR checks to prevent bundle size regression, optimizing network calls by removing dead features and prefetching critical data. Challenges with v8 snapshots, preference for full bytecode caching, adapting and iterating based on metrics, organizational obstacles, and the shift towards collective performance responsibility.
Oh My GHaaD: Git Hosting as a Database
11 min
Oh My GHaaD: Git Hosting as a Database
Chris Griffin discusses the innovative concept of Git Hosting as a Database, emphasizing the importance of data, authentication, and authorization in backend development. The utilization of file-based databases like parket files and the simplicity of authentication and authorization in building platforms similar to GitHub stand out. The architecture of a Git-based backend offers flexibility in backups, privacy features, and serverless advantages. Integrating with frontend frameworks through custom hooks and considering rate limiting issues on platforms like GitHub and GitLab are key points in application development with a backend-free approach using GitHub and GitLab.
De TV a Táctil: Cómo Hicimos que React UI Funcione en Todos los Modos de Entrada
5 min
De TV a Táctil: Cómo Hicimos que React UI Funcione en Todos los Modos de Entrada
Seungho Park discusses the importance of spatial navigation for TV apps and the challenges of supporting remote, pointer, and touch inputs. Real examples are explored, including focus placement, restoring focus, and grouping elements for stable navigation. Challenges in TV app navigation such as key scrolling in grid lists and managing input mode transitions are highlighted. The talk also delves into handling input modes, designing for 5-way, pointer, and touch input, and addressing edge cases. Implementing the W3C spatial navigation standard, defining focus properties for container elements, and encouraging exploration of React UI spatial navigation support are key points.
Optimizando Aplicaciones React: Profundizando en el React Compiler
24 min
Optimizando Aplicaciones React: Profundizando en el React Compiler
Victor Alencar introduces the React compiler and discusses its potential optimizations, including evolution of state management to hooks and performance improvements. The talk delves into using memorization techniques, compiler optimizations, and code transformations for better React performance. It also covers cache utilization, automated memorization, and gradual adoption of the React compiler for enhanced UI rendering. Additionally, the discussion involves compiler assumptions, debugging recommendations, and code simplification for optimized React usage.
¿De Pull a Push? — Es Hora de Hablar Sobre Signals
23 min
¿De Pull a Push? — Es Hora de Hablar Sobre Signals
Julian explores the importance of JavaScript signals, React's paradigm, and the evolution of paradigms in the JavaScript ecosystem. The evolution of state handling in JavaScript from pull to push approaches, the framework principles of state management and observables in JavaScript frameworks, React's signal handling, virtual DOM optimization, and the push approach. Simplified state management with signals and the challenges and solutions in implementing and optimizing signal handling in modern frameworks.
Internacionalización de Frontend Que Se Lee Como Inglés (Gracias, gettext!)
19 min
Internacionalización de Frontend Que Se Lee Como Inglés (Gracias, gettext!)
Henry Lee presents a frontend internationalization approach using React and discusses challenges in naming keys for translations. The Talk addresses issues with naming keys in JSON dictionaries, refactoring keys to eliminate translation challenges using GNU GetTex, exploring GetTex workflow for efficient localization with Lingui, defining messages and extraction with Lingui workflow, optimizing Lingui compilation and translation, enhancing Lingui features for translation, and encouraging Lingui adoption for projects by addressing reasons for underutilization and promoting trial and migration.
Sistemas de Diseño y UI en un Mundo Bidireccional
19 min
Sistemas de Diseño y UI en un Mundo Bidireccional
Matt Sikathian emphasizes the importance of supporting right-to-left layouts in web development and the challenges faced in implementing Arabic scripts effectively. Adapting UI to right-to-left reading aligns with users' cognitive patterns, with CSS advancements showing promise in meeting diverse language needs. The unique considerations of Arabic script in UI design, technical adjustments necessary for Arabic typography, and handling bi-directional layout challenges using direction-agnostic approaches are discussed. The talk also covers enhancing React for logical CSS properties, building UI tools with icon mirroring, and streamlining icon management and automation for improved developer workflow.
View Transitions en React: Una Nueva Era de UI Sin Fisuras
13 min
View Transitions en React: Una Nueva Era de UI Sin Fisuras
Samuel Ouyang highlights the significance of smooth UI in modern apps and introduces the React 19 View Transition API. The View Transition API works with SSR and RSC but has limitations as a wrapper. Implementing the Use View Transition custom hook can address these limitations and make it SSR safe. The custom hook enables smooth transitions for various interactions like route changes, panel transitions, click events, and list reordering. It encourages the optimized use of the View Transition API to improve user experience and avoid DOM hacks.
React Strict Dom: React multiplataforma basado en la web
29 min
React Strict Dom: React multiplataforma basado en la web
Talk on cross-platform React using ReactStrict DOM to unify web and native React, standardizing for consistent UI development. Fragmentation challenges in React due to lack of standardized styling systems, impacting development efficiency and product consistency. Exploring unsuccessful cross-platform React approaches and the importance of minimizing migration costs. Enabling web developers to build native apps with React Native while enhancing it with web APIs for seamless code migration. Benefits of code sharing for cross-platform apps, AI integration for React Strict DOM, and the future vision for React Native as a web renderer. Unified styling in React Native, Tailwind integration, and UI best practices. Flexibility and readiness in React DOM, potential inclusion in React Foundations, and considerations for reversibility of decisions in React DOM.
Partículas, Píxeles y Propósito: Creatividad en el Frontend Más Allá de la Cuadrícula
19 min
Partículas, Píxeles y Propósito: Creatividad en el Frontend Más Allá de la Cuadrícula
Chris introduces himself as a web developer with vast experience in UX engineering, emphasizing the importance of evoking emotions through interfaces. Childhood influences from anime, Disney, and video games shape career choices. Navigating dreams of soccer and software engineering, finding joy in challenges. Reflecting on 3js experiences and the significance of the golden ratio. Explaining Fibonacci sequence, GPU shaders, and natural patterns. Using React 3 Fiber to enhance particle playground. Celebrating creativity in frontend development as a fusion of engineering and creativity.
Micro-Frontends Seguros: Magia de Autenticación en Dutch Railways
35 min
Micro-Frontends Seguros: Magia de Autenticación en Dutch Railways
Pieter Eigenmans discusses Microfrontends, authentication at Dutch railways, Model Federation, OIDC, and Kubernetes configuration. The SporeViewer app enables real-time train tracking in the Netherlands with multiple applications on one screen. Transitioning from monolithic to modular architecture allows for independent feature deployment and multifederation framework utilization. Microfrontend setup involves splitting applications into front and back end components, organizing them into verticals using domain-driven design. Efficient frontend building with module federation, Web Components, and model federation enhances speed and scalability. Authentication challenges are addressed using OIDC, MSAL integration for token management, and secure API calls via MSAL libraries. Kubernetes configuration enables versatile environment setup using config maps for loading configuration files.
Building a Hybrid AI Chatbot with Next.js 16
32 min
Building a Hybrid AI Chatbot with Next.js 16
Sam discussing Next.js features including cache components for dynamic apps with a blend of static pre-rendering for speed. Discussing a dynamic app with personal data, utilizing cookies and a database for chatting, showcasing Next 16's cache components for hybrid static and dynamic pages. Making necessary changes for cache components in Next to improve page loading speed and user experience, utilizing Suspense DevTools for enhanced rendering control. Utilizing state for real-time updates from OpenAI's async iterable stream in the front end. Using generators to streamline text data transmission from OpenAI streams for efficient UI updates. Discussing the benefits of managing less client-side state and implementing optimistic rendering for instant UI feedback. Discussing the use of temporary client state, error handling, and the concept of optimistic rendering for responsive and instant applications in Next.js. Exploring features of Next 16, cache components, and the use cache directive for dynamic rendering and runtime prefetching in Next.js.
React at 120FPS: Cuándo Hacer un Bucle
30 min
React at 120FPS: Cuándo Hacer un Bucle
This talk explores challenges and architecture decisions for realtime apps in React, focusing on frame updates and performance at high refresh rates. It delves into optimizing frame animation, managing synchronization, achieving frame rate independence, and implementing physics in animations. The discussion includes resolving data sharing issues, decoupling data for improved focus, enhancing simulation with external state, customizing animation behaviors, and optimizing continuous updates with Kuta. The talk also covers experimenting with ball physics, tool optimization, and enhancing rendering performance through Canvas, React3Fiber, Sandpack, and Kuta for animations.
Un Futuro con Menos JavaScript - Nuevas APIs de Navegador y su Impacto en el Futuro del Desarrollo de React
21 min
Un Futuro con Menos JavaScript - Nuevas APIs de Navegador y su Impacto en el Futuro del Desarrollo de React
Introduction to JavaScript Less Future, impact of new browser APIs on front-end development, S&C Electric Company overview, shift towards less JavaScript, historical perspective of web development challenges, importance of browser APIs in modern development, focus on key browser APIs for enhanced user experiences, demonstration of date picker functionality. Exploring Date Picker Functionality with Code Integration and Browser APIs. Closing Panel and Utilizing New Browser APIs for Date Time Picker. Controlling Date Time Picker Panel Position with New Browser APIs. Customizing Date Range Styling with CSS and Anchor API. Animating Date Range Picker with View Transitions and CSS Attributes. Developing Text Formatter with Dual Layers and Event Handling. Developing Plain Text Only Content Editable Layer with Highlighting API. Applying Styles with CSS Selector and Color API.
Estilizado y SASSy: Eligiendo la Solución de Estilo de React Correcta
28 min
Estilizado y SASSy: Eligiendo la Solución de Estilo de React Correcta
Bri explores React styling solutions and the CSS landscape in 2025, highlighting challenges with styled components and the emergence of Panda CSS. React 19 introduces new features like resource hoisting and form actions, impacting styling practices. Discussions revolve around CSS paradigms, Tailwind CSS for utility-first approach, and the importance of dynamic state in styling evolution. Considerations for selecting the right styling solution based on team size, experience, and interactivity needs are emphasized, along with insights on optimizing CSS tools and Panda CSS adoption.
The No Frills Frontend Migration Survival Guide
13 min
The No Frills Frontend Migration Survival Guide
Front-end migrations challenges and survival guide. Understanding types of migrations: frameworks, libraries, and infrastructure. Strategies include big bang and gradual approaches, balancing risk, time, and maintenance. Comparing outside-in and inside-out migration approaches. Emphasis on the benefits of the inside-out approach for modernization. Web Components offering a universal way to use components across frameworks. Web Components lifecycle and integration with React. Cross-framework integration of Web Components for smooth migration.
React at the Edge: Construyendo un Framework desde Cero (En Vivo)
27 min
React at the Edge: Construyendo un Framework desde Cero (En Vivo)
Daniel, a full-time open source maintainer, leads the Nuxt core team and works as a software engineer at Vercel. The Talk discussed the rewrite of the Nuxt framework, evolving it to be bundler-agnostic and introducing the Nuxt Nitro server engine. Collaboration efforts with frameworks like UNJS and NitroPack were highlighted. Advanced type safety and data fetching, building a full-stack framework, and implementing key-value storage with Nitro were discussed. Optimizing cold starts, troubleshooting module rehydration, enhancing client interaction with Vite, and transitioning to Nitro version 3 with VEET integration were key topics. The Talk also emphasized exploring the NJS ecosystem for universal utilities and encouraged collaboration and involvement in open source projects.
React Components for both the Client & the Server
16 min
React Components for both the Client & the Server
Kiko shares the process of building UI components for both client and server sides, highlighting performance benefits and challenges of using server components. Building a reusable UI library with server and client components, aiming for similarity and adaptability. Adding interactivity to a data table in a Next.js application by incorporating client components for reactivity and customization. Building customization by incorporating a custom cell, resolving errors between client and server components, and optimizing syntax highlighting and markdown processing. Achieving composition pattern at the component level by separating client and server parts, maintaining an agnostic component part, and optimizing rendering for client-specific functionalities. Achieving client-server performance optimization by keeping rendering tree agnostic, enabling separate client component extraction, and promoting interactivity within components.
Construyendo Extensiones de Navegador con React - Que No Rompen Navegadores
20 min
Construyendo Extensiones de Navegador con React - Que No Rompen Navegadores
Jonny Fekete discusses building web extensions with React, the simplicity of manifest.json, the shift from manifest.v2 to manifest.v3 in Chrome, and the impact on functionalities like persistent background scripts and access restrictions. The transition to manifest.v3 for web extensions, the siloed contexts of web extensions, and the use of sendMessage API for communication between different contexts. Challenges in web extension development, complexities of setting up custom configurations, and the modern approach with the WXT framework for easier development and state persistence. Challenges in state persistence and data storage in web extensions, including local, session, and event sync storage methods. Managing multiple tabs' state and data storage with consideration for tab IDs to prevent memory leaks. Consider using storage over Redux for better debugging and architecture. Address CSS collision with Shadow DOM and custom web components to isolate styles from the underlying web page. Utilize background script for throttling and debouncing, efficient storage utilization, and the WXT framework for ease of development and communication.
Cuando Raspberry Pi Dijo No a Node: Cómo Reconfiguramos Nuestra App de Next.js
20 min
Cuando Raspberry Pi Dijo No a Node: Cómo Reconfiguramos Nuestra App de Next.js
Welcome to a storytelling session intertwined with technology aspects, showcasing how a Nexus application was rewired due to unexpected constraints after deployment for an EV client on Raspberry Pi without Node.js. Discussing the initial architecture of a battery management application for electric vehicles using NixJS, D3JS, and edge caching. Challenges faced when Node.js was removed and the impact on server-side rendering and application performance. Facing constraints without Node.js in NixJS app, investigation on adapting to hardware realities, and finding a solution by dissecting NixJS to remove dependencies. Replacing ISR without Node.js, adapting to static export in Next.js, optimizing API calls for client-side performance, rewiring to local setup for enhanced performance, and accidental discovery of static advantage over dynamic. Design for hardware constraints, understand tools and frameworks deeply, stay adaptable, and keep solutions portable.
El Pastel Es una Mentira... Y También lo Es la Accesibilidad de Tu Inicio de Sesión
25 min
El Pastel Es una Mentira... Y También lo Es la Accesibilidad de Tu Inicio de Sesión
Exploring accessibility and confusion in the Portal game, character development with challenges and promises, understanding accessibility laws and challenges in projects, enhancing visibility and navigation for better user experience, addressing error handling and screen reader usage, focusing on login accessibility and error messages, recommendations for authentication accessibility practices including inclusive multi-factor authentication.
Por qué escribir un componente de Pinch-to-Zoom es más difícil de lo que piensas
26 min
Por qué escribir un componente de Pinch-to-Zoom es más difícil de lo que piensas
Introduction to pinch-to-zoom component challenges, pursuit of independent X and Y-axis control, user-centric touch design, touch offsets exploration, equation implementation for Z-min and Z-max, React integration for robust design, CSS transformation calculations, normalized coordinate space understanding, realistic touch gestures exploration, AG Charts library discussion, performance considerations with CSS transform, importance of accessibility features, AI theory understanding significance, and challenges with screen readers in data visualization.
El Viaje de Rebranding de una App de Más de 7 Años
30 min
El Viaje de Rebranding de una App de Más de 7 Años
Kasia Trzemska introduces the rebranding journey of a seven-year-old app, emphasizing challenges and technologies involved. Challenges in A-B testing include handling winning and losing sides, codebase growth, and user feedback importance. Struggles with component styling, data analysis for understanding design systems, and codebase cleanup for rebranding. Efforts in code automation, typography unification, and promoting design system adoption. Lessons learned include transparency, communication, data-driven decisions, and delegation for success in rebranding projects.
It’s Always Been Vibes
29 min
It’s Always Been Vibes
Welcome to New Jersey. The AI landscape poses challenges in distinguishing valuable content from noise. Two camps exist: excited AI promoters and silent users. Vibe coders face stereotypes and labels in this dynamic field. Vibe coding, derived from a tweet, resembles our daily coding tasks. LLMs assist in research and typing, akin to our processes. Comparison to Prettier shows the potential impact of improved LLM capabilities. Emphasis on domain knowledge in coding. Experience crucial for effective coding results. Understanding fundamentals essential for successful programming. Reading every line is crucial in coding. Provide relevant context and examples. Question everything to avoid being misled. Determinism in using AI is crucial. Utilize high-quality context, tools, and examples for better outcomes. Vibe coding can be beneficial with proper structuring and tools usage. Coding adjacently with vibe coding agents for personal software projects. Building a personalized Disney app for quick access and efficiency while multitasking. Building personalized features like locating turkey legs, utilizing mousketool.ai for tailored experiences, and integrating Repl.it for immersive vibe coding sessions. Creating a map with markers for hunting, integrating a tablet for mission objectives, and developing a personalized app for waypoint tracking. Utilizing a vibe coded app for navigating in the woods and showcasing hardware vibe coding with a hydroponic garden. Automated gardening system for indoor plants, Wyze cam setup for outdoor monitoring, and interaction with OpenAI for feedback on plant status. Development of an official setup with Chad GVD involving solar controller, Raspberry Pi, relays, soil moisture sensors, and a battery. Setting up SSH, tail scale, and Cloud Code for remote access and intense VIBECODING to create temperature scripts and Grafana dashboard for real-time garden metrics. Installing Cloud Code, VIBECODING intensely, and setting up Grafana dashboard for real-time garden metrics remotely. Discussing the impact of vibes on future engineers, considering the role of AI and the evolving nature of engineering in the next five years. Discussing the evolving nature of software engineering, challenges with 3D modeling tools, and the time disparity between software and hardware development in a project. Discussing the rapid development process, iteration in hardware and software, and the importance of caring about the project for effective iteration cycles. Discussing challenges of bootstrapping, overcoming stigma in the tech community, deploying web apps using AI for dev-ops, and hosting Plant Grafana on Raspberry Pi.
DX vs. UX: La falsa dicotomía de RSC
28 min
DX vs. UX: La falsa dicotomía de RSC
Amy Dutton discusses the transition to React server components in 2022, addressing challenges in implementation. Challenges include server-side rendering, hydration, caching, and server actions. Peter emphasizes the importance of choosing the right tools for product development. React server components impact development workflows and ecosystem perspectives, leading to a shift in developer perspective. RSE benefits include lighter UI, smaller Java bundles, and improved code security. Embracing RSE as an ecosystem effort aims for architectural alignment with frameworks and natural advancements in the development environment.
Sincronización sin fisuras de BLE a Live Activity en React Native — No se necesita Push
25 min
Sincronización sin fisuras de BLE a Live Activity en React Native — No se necesita Push
Introduction to React Summit 2025 focusing on seamless Bluetooth Low Energy integration with iOS Live Activity. Understanding custom modules in React Native and Bluetooth Low Energy basics. Challenges with iOS Live Activity updates on Bluetooth devices without push notifications. Exploring UI background mode in iOS for Bluetooth communication wake-up. Utilizing React Native Bluetooth manager for seamless integration with iOS native modules. Demonstrating Bluetooth communication between peripheral and central devices using iOS Core Bluetooth. Exploring challenges and best practices for live activity development in iOS.
Optimizando el Camino Desde el Diseño hasta la Producción en Flujos de Trabajo de Ingeniería
7 min
Optimizando el Camino Desde el Diseño hasta la Producción en Flujos de Trabajo de Ingeniería
Akbar, developer advocate at Figma, highlights the importance of exploration, representation, and production in product development. Figma leverages design systems and AI tools for efficient transition from representation to production, optimizing expertise and automating non-critical tasks. Seamless integration between design elements and the app is achieved through tools like Code Connect and Copilot, fostering collaboration between design and code.
Optimización de Video para la Web: La Pieza que Falta en Lighthouse
7 min
Optimización de Video para la Web: La Pieza que Falta en Lighthouse
Rahul introduces video optimization principles, emphasizing modern formats, compression, bitrate reduction, and lazy loading. ImageKit simplifies video loading by compressing videos significantly and adapting to network conditions. Pausing videos when not in view saves data costs and enhances user experience.
Cómo Sacar El Máximo Provecho De La Nube Como Desarrollador Front-End
7 min
Cómo Sacar El Máximo Provecho De La Nube Como Desarrollador Front-End
Front-end developers benefit from cloud services like AWS S3 and Lambda. AWS offers services like Cognito for identity management and Bedrock AI models. AWS Amplify provides Hosting and Cloud Development Kit for efficient development. The Cloud Development Kit is recommended for TypeScript deployment. AWS Amplify connects front-end to AWS services and SDK for back-end. QR code feedback is available for the talk.