Name: React Summit US 2024
Start: 2024-11-18T23:00:00.000Z
End: 2024-11-22T22:30:00.000Z

Get ready for an exciting journey through the latest in Chrome DevTools and React DevTools as we dive into the State of the Union for 2024. We'll explore the powerful tools and features that continue to empower developers to craft high-performance web experiences. We’ll also touch on the latest in React debugging including updates like React Compiler support. Whether you're a veteran user or new to the DevTools magic, this session will equip you with actionable tips and insights to level up your development process.

Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

Addy Osmani

The network that stands between our server and the client is what causes the most complexity in our development process. Whether it be the initial UI we generate on the server, the API calls we make as the user navigates around, or the form submissions our user makes, keeping the application responsive and up-to-date is a massive chore. What would it be like if all of that complexity just disappeared? Freaking great, that's what it would be like. And React Server Components and Actions are what's making that possible. In this talk we'll look into how that's happening and how we can take advantage of this amazing developer experience to deliver even better user experiences.

Abracadabra: The Vanishing Network

Kent C. Dodds

Panel Discussion: Future of React

Shruti Kapoor

Mark Erikson

Eli White

Mofei Zhang

Theo Browne

Tom Occhino

Influence isn't tied to having "Manager" in your job title; it's about the connections you build and the legacy you leave. This session will teach you the skills necessary to build influence within your organization whether you're an IC or EM.

Influence Without Authority: Making an Impact in Your Organization Regardless of Job Title

Kelly Vaughn

Join us for a fast paced introduction to TanStack’s full stack client-side first React framework. Based on TanStack Router, it’s jam packed with Type Safety, server functions, SSR, powerful URL state management and couple more awesome surprise features that make building apps easy, fast and fun again!

Tanstack Start - A Client-Side First Full-Stack React Framework

Tanner Linsley

Construye Apps de IA en 5 Minutos: Demostración en Vivo con Vercel AI SDK, v0.dev y RAG! Sumérgete en el futuro del desarrollo de IA con una demostración en vivo sobre cómo construir una aplicación potenciada por IA en solo 5 minutos usando el AI SDK de Vercel, v0.dev y Retrieval-Augmented Generation (RAG). Aprende los secretos de ajustar modelos y de integrar sin problemas herramientas de vanguardia para crear aplicaciones potentes y receptivas. Ya seas un novato en IA o un profesional experimentado, esta charla te proporcionará el conocimiento práctico y las habilidades para desarrollar y desplegar rápidamente soluciones innovadoras de IA.

Construye Apps de IA en 5 Minutos: Demostración en Vivo con Vercel AI SDK, v0.dev y Rag!

I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.

Build AI Apps in 5 Minutes: Live Demo with Vercel AI SDK, v0.dev, and RAG! Dive into the future of AI development with a live demonstration on building an AI-powered app in just 5 minutes using Vercel’s AI SDK, v0.dev, and Retrieval-Augmented Generation (RAG). Learn the secrets of fine-tuning models and seamlessly integrating cutting-edge tools to create powerful, responsive applications. Whether you're an AI novice or a seasoned pro, this talk will provide you with the practical knowledge and skills to rapidly develop and deploy innovative AI solutions.2

Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!

Tracy Lee

Learn how to handle forms in React using the latest features, such as startTransition, useTransition, useOptimistic, and useActionState, with and without React 19 server actions, alongside proper validation, error handling, and best practices.<div> </div>Overview The workshop will begin by demonstrating traditional form handling using useState and useEffect for client-side rendering. Gradually, we'll transition to using the latest React 19 features, including server-side forms and the newest hooks for managing form states and errors. By the end of the workshop, participants will understand how to create robust forms with proper validation and error handling.<div> </div>Learning Goals<ul><li>Latest React 19 Hooks — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValue</li><li>Server Actions</li><li>Revalidations</li><li>Server-side Validation</li><li>Error handling</li><li>Security practices</li></ul>

Evolution of Form Management in React 

Adrian Hajdin

Anyone can publish a library to NPM. But what happens when that library is used by millions of developers? How do you juggle the complexities of publishing one of the most widely used packages in the ecosystem, and also deal with supporting and maintaining a community? We'll look at the mindset and and approach to dealing with these challenges and what it means to be a "maintainer" today, including practices for providing user support across platforms, keeping a "devrel" mindset, designing documentation, designing features and APIs, how to consider package versioning and compatibility, when to ship breaking changes, technical challenges with publishing packages, and keeping up with the ever-evolving ecosystem.

Maintaining a Library and a Community

As React continues to dominate the web development landscape, securing the vast ecosystem of open source dependencies has never been more critical. In 2024, the challenges around React and JavaScript security have evolved, and the risks associated with software supply chain attacks are more pronounced than ever. In this talk, we’ll explore the current state of JavaScript security, highlighting recent high-profile supply chain attacks and their impact on the development community. We’ll discuss the latest trends, tools, and best practices for managing and securing your JavaScript dependencies. Key topics will include: •        An overview of recent supply chain attacks and lessons learned •        Effective strategies for mitigating risks from malicious dependencies •        How modern tools and standards are improving the security landscape •        The role of developers and organizations in fostering a secure open source ecosystem Join Feross Aboukhadijeh, a seasoned open source maintainer and security expert, as he shares insights and practical advice on navigating the complex world of JavaScript security in 2024. This session is essential for developers, security professionals, and anyone invested in maintaining a secure and resilient software supply chain.

The State of JavaScript Security in 2024

Feross Aboukhadijeh

AI Will Revolutionize UI

Jack Herrington

React 19 introduces Actions, a new way to simplify form management by simplifying form handling, adding loading states, and making data retrieval easier. This hands-on talk explores transitioning to React 19 using Form Actions, with code demos of managing form submission, displaying loading indicators, and retrieving form data efficiently.

Everything You Need to Know About React 19

React 19 introduces a huge number of new capabilities and APIs. So, what do you need? What can you implement today? And what should leave for framework authors to integrate? Even if you don't plan to embrace Server Components, there are new capabilities in React 19 to improve speed, clarify code, and even eliminate long standing dependencies. In this practical and progressive overview, you'll learn everything you need to be prepared for a React 19 upgrade.

An App Developer's Guide to React 19: What You Need to Know and Everything You Can Safely Ignore

Michael Chan

If you had the same goals as React Compiler, what kind of React component would you write? In this talk Tony and the audience imagine they are React Compiler, rewriting a React component in the exact same way the compiler does. Along the way, we'll gain a deeper insight into React internals, to fully grasp how the compiler works, why it works that way, and how to decide if you should use it.

If You Were a React Compiler

Tony Alicea

Attendees will dive into the world of creative coding with p5.js, a powerful JavaScript library designed for producing interactive art and dynamic visual experiences. The talk will begin by covering the foundational concepts of creative coding, guiding participants through the essentials needed to create sketches and manipulate visuals using JavaScript. From there, we’ll explore how p5.js can be seamlessly integrated into a React environment, unlocking the ability to combine React’s declarative power with the creative potential of p5.js. By the end of the session, attendees will not only have a solid grasp of how to get started with p5.js and React but will also feel empowered to embark on their own creative coding experiments, applying these tools to build immersive, interactive web experiences.

Sketching with Code: Integrating React and p5.js

Monica Powell

Maintaining a unified design language contract between Figma and code is crucial in today's fast-paced product development environment. Without this alignment, the disconnect between designers and developers can lead to inconsistencies in product design, failing to achieve pixel-perfect precision.

The Cohesive Workflow for Creating a Wysiwyg Design System

Kamlesh Chandnani

En el panorama digital actual, la multiinquilinidad se ha convertido en una arquitectura crítica para plataformas SaaS, mercados y soluciones empresariales. Next.js ha evolucionado continuamente, lo que lo convierte en una opción cada vez más popular para construir aplicaciones full-stack. Con cada iteración, se ha vuelto aún más fácil desarrollar aplicaciones multiinquilino escalables. Hablemos sobre por qué la multiinquilinidad es vital y cómo las características de Next.js, como el enrutamiento dinámico, el middleware mejorado y las funciones de borde, simplifican el proceso de construcción y escalado de aplicaciones multiinquilino. Hablaremos sobre las mejores prácticas, discutiremos escenarios del mundo real y veremos algunos ejemplos en acción. Únete para ver cómo puedes aprovechar Next.js para crear aplicaciones multiinquilino seguras, eficientes y escalables.

Construyendo aplicaciones multiinquilino escalables con Next.js

Hello and namaste, New York. I'm excited to talk about building scalable multi-tenant applications with Next.js. We'll cover what multi-tenancy is, its advantages, key considerations, and how Next.js aids in development. Before starting multi-tenancy, let's understand what a tenant is. In multi-tenant architecture, all tenants share the same app but have different access, roles, and permissions. Easy maintenance, efficiency, scalability, and cost-effectiveness are some of the benefits of multi-tenancy. However, challenges include scalability, isolation, security, and customization. Next.js allows for easy organization of different domains and paths. Dynamic routing in Next.js enables the customization of layouts for each tenant, ensuring a personalized look and feel. Next.js API routing allows for isolating data fetching for different tenants. Middleware can handle request validation and provide features like authentication, authorization, server-side redirects, conditional redirects, and data isolation. Next.js offers scalability through caching, a component-based and modular approach, load balancing, serverless functions and platforms, and different types of rendering. Next.js continues to evolve and is a popular choice for multi-tenant architecture.

In today’s digital landscape, multi-tenancy has become a critical architecture for SaaS platforms, marketplaces, and enterprise solutions. Next.js has continuously evolved, making it an increasingly popular choice for building full-stack applications. With each iteration, it has become even easier to develop scalable multi-tenant applications. Let’s talk about why multi-tenancy is vital, and how Next.js features such as dynamic routing, enhanced middleware, and edge functions simplify the process of building and scaling multi-tenant applications. We will talk about best practices, discuss real-world scenarios, and see a few examples in action. Join to see how you can leverage Next.js to create secure, performant, and scalable multi-tenant applications.

Building Scalable Multi-Tenant Applications With Next.js

Chakit Arora

“Está bien, solo actualizaré Typescript, yyyyy ahora todo está roto” Construir un proyecto complejo de JavaScript puede sentirse como un enredo de hilo. ¡No temas, compañero desarrollador! Esta charla te proporcionará las herramientas y técnicas para desenredar suavemente tus dependencias y tejer una base de código bien estructurada y mantenible. Nuestra cesta de herramientas incluye usar npm why como nuestra aguja de hilo, descomponer tareas en puntadas manejables, actualizar estratégicamente para el progreso, utilizar técnicas de ramificación para evitar que tu proyecto se deshaga, ¡y mucho más! Únete a nosotros mientras desvelamos los secretos de la gestión de dependencias, dejándote con un proyecto que no solo es funcional sino bellamente mantenible, puntada a puntada.

Desenredando tus Dependencias: Un Patrón para un Proyecto de React Bien Tejido

Thank you for joining my session on untangling your dependencies. I encountered errors when trying to update dependencies in the project, leading to a tangled mess of issues. Managing dependencies can be like working with a ball of yarn, trying to knit a project. I'll share my favorite practices for managing dependencies and provide some background about myself. Leonardo da Vinci said, 'art is never finished, only abandoned,' and this applies to software as well. I'll share tricks and tips for managing complex dependency management systems and understanding different types of dependencies. Working with dependencies often comes with challenges, especially when using React Native. Examples of tools that assist with managing dependencies include yarn upgrade interactive, NPM check updates, and React Native upgrade helper. When encountering issues, breaking them down into smaller chunks helps find solutions. To tackle dependency issues, focus on one platform at a time and choose the right tools. Tools like NPM why and Clip can help identify unnecessary dependencies and unused files. Monorepos and tools like Yarn workspaces and npm shrinkwrap are useful for managing monorepos. Bleeding edge branches and dependency updates allow for incremental and broken commits. Regular updates are recommended to stay aligned with platform changes.

“Alright I’ll just upgrade Typescript, aaaaaand everything is broken now” Building a complex JavaScript project can feel like a tangled mess of yarn. Fear not, fellow developer! This talk will provide you with the tools and techniques to gently untangle your dependencies and knit a well-structured, maintainable codebase. Our basket of tools include using npm why as our yarn needle, breaking down tasks into manageable stitches, strategically upgrading for progress, utilising branching techniques to keep your project from unraveling, and much more! Join us as we unravel the secrets of dependency management, leaving you with a project that’s not only functional but beautifully maintainable, stitch by stitch.

Untangling Your Dependencies: A Pattern for a Well-Knit React Project

Carmen Huidobro

If you suffer from: Writing SQL to express your product logic, trying to remember esoteric authorization DSLs, fighting your frontend cache, fighting your backend cache, slow backend deployments, inconsistent or stale UI state, lack of end-to-end type safety, lack of transactional guarantees, low database write throughput, database cold starts or unpredictable database read performance - then tune in to this talk and let me show you the light at the end of the tunnel.

Supercharge Your Full-stack App with a Reactive Database

Tom Redman

Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing. Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session. You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.

Tracing: Frontend Issues With Backend Solutions

Lazar Nikolov

Sarah Guthals

¿Recuerdas aquella vez que una simple vulnerabilidad XSS expuso millones de registros de usuarios? ¿O cuando una variable de entorno mal configurada llevó a comprometer por completo la base de datos? Es la pesadilla de un desarrollador frontend, y ocurre más a menudo de lo que crees. React te proporciona algunas herramientas de seguridad de serie, pero seamos sinceros: no son suficientes. Si estás construyendo algo más que una aplicación básica, necesitas mejorar tu juego de seguridad. Esta sesión revelará 7 técnicas poderosas para fortalecer tus aplicaciones frontend contra los ataques más comunes.

¡La seguridad también importa en el frontend! 7 pasos para aplicaciones React más seguras

This talk covers seven steps to secure React apps, including dependency management, validation, secrets management, code exposure, content security, security implementation, and additional security measures. It emphasizes the importance of understanding dependencies and risks, using tools like NPM Audit and Socker.dev. It also highlights the need for dependency validation and package namespace, as well as input validation using libraries like Zod and Valobot. Secrets should be managed using tools like .env and a secrets manager, while code exposure can be minimized by separating server-side and client-side code. Content security policies and tools like Next Safe and Helmet are recommended for implementation. Additional measures include deep code analysis, code execution monitoring, and strict content security policies.

Remember that time a simple XSS vulnerability exposed millions of user records? Or when a misconfigured environment variable led to full database compromise? It's a frontend developer's nightmare, and it happens more often than you think. React gives you some security tools out of the box, but let's face it – they're not enough. If you're building anything beyond a basic app, you need to step up your security game. This session will reveal 7 powerful techniques to fortify your frontend applications against the most common attacks.

Security Matters for Frontend Too! 7 Steps to More Secure React Apps

David Mytton

Desde bridgeful, a bridgeless, hasta Expo Modules y Static Hermes, el panorama de los módulos nativos en React Native está en constante evolución. La polinización cruzada, sin embargo, siempre ha sido limitada: es raro que React Native use módulos nativos de otros ecosistemas, y viceversa. En esta charla, presentamos Node-API, un estándar popular para exponer APIs nativas a JavaScript de manera ABI-estable, sin importar el motor. Usado en Node.js y la mayoría de los otros entornos de ejecución de JavaScript importantes, es la tecnología ideal para compartir módulos nativos entre ecosistemas. ¡Mostraremos cómo ya está siendo utilizado por Microsoft en React Native Windows, y lo que puede significar para el futuro de React Native!

React Native, Meet node.js Native Addons

We'll be going over the use cases of Node.js native add-ons and how they are written with NodeAPI. ABI stability allows swapping out older versions of a library for newer ones without recompiling the rest of the app. Node API enables the use of the latest Hermes regardless of React Native Windows. NativeScript is a library for calling native APIs from JavaScript, eliminating the need for dealing with native code. To initialize the addon in React Native, we modified the approach by auto-linking the native script XC framework. We can read the battery level using inline JavaScript and make view changes like setting the background color. React Native reanimated can be used to work on the UI thread. Support for Node.js native add-ons and completion of the official ABI stable Hermes API would open up the ecosystem.

From bridgeful, to bridgeless, to Expo Modules and Static Hermes, the landscape of native modules in React Native is ever-evolving. Cross-pollination, however, has always been limited – it is rare for React Native to use native modules from other ecosystems, and vice versa. In this talk, we introduce Node-API, a popular standard for exposing native APIs to JavaScript in an ABI-stable manner, no matter the engine. Used in Node.js and most other major JavaScript runtimes, it is the ideal technology for sharing native modules cross- ecosystem. We'll show how it's being used by Microsoft in React Native Windows already, and what it may mean for the future of React Native!

Jamie Birch

Ever wonder how React can "update" a page while it's still loading? We've gotten so lost in the discussion of things like Next.js, Suspense, Signals, Server Components, and Server Actions, that most React devs have totally missed one of React's most recent pieces of magic: Out Of Order Streaming.

Out Of Order Streaming (The Secret Powering Modern React)

At Knock we power real-time in-app messaging experiences via our React SDK, enabling product teams to drop in components and have fully featured in-app notification feeds, modals, banners, and more instantly available. In this talk, we'll take a look at how we structured our React library in a composable way, giving teams the power to use our components out of the box, override styling with their own tokens, or bring their own UI components via hooks. We'll dive into how we structured our SDK to provide maximum flexibility for engineering teams, while preserving ease of maintenance.

Building React Primitives to Power In-App Messaging

Chris Bell

React Server Components ofrecen un método efectivo para mejorar el rendimiento de las aplicaciones web al renderizar componentes en el servidor y transmitirlos al cliente en tiempo real. Esta sesión cubrirá la funcionalidad y los beneficios de React Server Components, mostrando cómo pueden aumentar la velocidad y la capacidad de respuesta de la aplicación. Examinaremos el papel de los componentes asíncronos, la gestión eficiente de datos y el uso estratégico de las características modernas de React para optimizar los tiempos de carga y la interactividad. Con ejemplos del mundo real y consejos prácticos, aprenderás cómo integrar estos componentes para mejorar el rendimiento de tu aplicación web y proporcionar una mejor experiencia de usuario.

React Server Components: Elevando la Velocidad, Interactividad y Experiencia del Usuario

My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.

React Server Components offer an effective method for improving web app performance by rendering components on the server and streaming them to the client in real time. This session will cover the functionality and benefits of React Server Components, showing how they can increase application speed and responsiveness. We will examine the role of asynchronous components, efficient data management, and the strategic use of modern React features to optimize load times and interactivity. With real-world examples and practical advice, you'll learn how to integrate these components to enhance your web app’s performance and provide a better user experience.

React Server Components: Elevating Speed, Interactivity, and User Experience

Aurora Scharff

Vite es una herramienta esencial para el desarrollo front-end moderno. Lo usamos a diario, pero sabemos poco sobre su funcionamiento interno. Escribimos archivos .jsx o .vue, pero ¿cómo se transpilan a archivos .js? Probablemente haya algo de magia detrás de los plugins de Vite, pero ¿cómo funcionan? En esta charla, comenzaremos creando un plugin simple y progresaremos hacia otros más avanzados. Después de esta sesión, comprenderás cómo funcionan los plugins de Vite y el flujo general, incluso sin conocimiento previo de los plugins de Vite. Con este nuevo conocimiento, puedes realizar cálculos durante el proceso de construcción que no necesariamente ocurren en tiempo de ejecución. Esto puede resultar naturalmente en un rendimiento más rápido en tiempo de ejecución. En algunos casos, los resultados de los cálculos se incluyen directamente en la salida del paquete, reduciendo el tamaño final del paquete (ya que no necesitas incluir los datos o la lógica para el cálculo). Además, puedes mejorar la experiencia del desarrollador automatizando ciertas tareas manuales. Esta charla te introducirá a algo que no habías considerado aprender antes. Te hará darte cuenta de que no es tan difícil como podrías haber pensado, y con suerte, esta charla aumentará tu confianza en el aprendizaje.

Escribiendo tu Primer Plugin de Vite

Let's talk about writing your first Vip plugin. VIT, rollup, and Vip plugin are important tools in front-end development. Rollup is a bundler that can bundle JavaScript files into a single file. VIT goes through all the plugins and transforms files to JS modules. VIT and rollup have similar plugin architectures, allowing the use of existing rollup plugins in VIT. I'll discuss three plugin properties: resolve ID, load function, and more. Let's take a deeper look at the transform function. The resolve ID function determines the ID of the file or module, and the load function reads the file or module and returns its content. The transform function actually transforms the file or module into something else. For example, it can modify the code depending on the file extension. We can transform the result object into code by using object keys and map. This allows us to extract specific data and include it in the output. By making the code flexible, we can add additional information like 'built at' and utilize it for various purposes, such as displaying branch name or commit hash during deployment. You can implement various functionalities in the Vip plugin, such as reading Markdown files, implementing file-based routing, and creating domain-specific languages.

Vite is an essential tool for modern front-end development. We use it daily, but we know little about its inner workings. We write  .jsx or .vue files, but how do they get transpiled into .js files? There's likely some magic behind Vite's plugins, but how do they work? In this talk, we'll start by creating a simple plugin and progress to more advanced ones. After this session, you'll understand how Vite plugins work and the overall flow, even without prior knowledge of Vite plugins. With this new knowledge, you can perform computations during the build process that don't necessarily occur at runtime. This can naturally result in faster runtime performance. In some cases, the computation results are included directly in the bundle output, reducing the final bundle size (as you don't need to include the data or logic for the computation). Additionally, you can improve the developer experience by automating certain manual tasks. This talk will introduce you to something you hadn't considered learning before. It will make you realize that it's not as difficult as you might have thought, and hopefully, this talk will boost your confidence in learning.

Writing Your First Vite Plugin

Eunjae Lee

Ada Lovelace, Hedy Lamarr, las 'ENIAC Girls,' Grace Hopper, Joan Clarke... Partiendo del papel de calculadora, la profesión de desarrolladora se consideraba inicialmente un trabajo de mujeres, mientras que el diseño de hardware se veía como un trabajo de hombres. Sin embargo, ¿quiénes son estas mujeres que han moldeado el mundo de la tecnología? ¿Por qué no escuchamos más sobre ellas? Con Laura Durieux, intentarás poner las cosas en su lugar poco a poco y proporcionar modelos a seguir en tecnología que siempre has necesitado.

¿Dónde Han Ido las Mujeres de la Historia de la Tecnología?

Hi everyone and welcome to my talk about the women in the history of computer science. I want to pay tribute to women who have done fantastic work in computer science. The history of computer science begins in 1840 with Ada Lovelace, who invented the concept behind the analytical engine and provided the first algorithms. Women played a significant role in early computing, such as the programmers of the ENIAC. Grace Hopper made significant contributions to the field, including the development of COBOL. Women have made significant contributions to artificial intelligence, such as Karen Spike Jones and her development of the TF-IDF method. It is important to highlight women in the tech field and provide role models for young girls. The talk aims to inspire and encourage.

Ada Lovelace, Hedy Lamarr, the 'ENIAC Girls,' Grace Hopper, Joan Clarke... Stemming from the role of a calculator, the profession of a developer was initially considered a women's job, while hardware design was seen as a man's job. However, who are these women who have shaped the world of tech? Why don't we hear more about them? With Laura Durieux, you'll attempt to set the record straight bit by bit and provide role models in tech that you've always needed.

Where Have the Women of Tech History Gone?

Laura Durieux

While Refs are considered an escape hatch there are times when you might just need to use them.In this talk, with the help of real world examples, we will look at what Refs can do for us in terms of code clarity and also performance gains. Think along the lines of minimising renders and avoiding flickering UIs. We will cover the restrictions for safe usage and for those of you already using these patterns make sure you are prepared for the changes coming in React 19.

What Refs Can Do for You

Stephen Cooper

Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications. Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints. Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic. Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

Mastering React Server Components and Server Actions in React 19

Maurice de Beijer

Explora el innovador proceso de despliegue y la estructura de equipo de HubSpot que aceleran la creación de valor al permitir que los desarrolladores naveguen por los proyectos de manera eficiente. Obtén ideas prácticas para adoptar prácticas similares en tu organización, mejorando la productividad, la colaboración y el crecimiento empresarial.

Acelerando el Valor con el Proceso de Despliegue Único y la Estructura de Equipo de HubSpot

Welcome to Accelerating Value with HubSpot's deployment process and team structure. HubSpot is a leading growth platform that empowers businesses of all sizes to scale and succeed in the digital age. HubSpot's customer-centric approach focuses on value delivery, prioritizing the user experience, and building trust through consistent interactions. The front-end tech stack includes TypeScript, React, Redux, Styled Components, and GraphQL. HubSpot utilizes various developer tools to streamline workflows and reduce the technical burden on engineers. The testing philosophy at HubSpot emphasizes comprehensive testing, with a focus on unit, integration, and acceptance testing. HubSpot prioritizes customer-centricity, fosters innovation with small teams, and enhances developer efficiency with custom tooling.

Explore HubSpot's innovative deployment process and team structure that accelerate value creation by enabling developers to navigate projects efficiently. Gain actionable insights to adopt similar practices in your organization, enhancing productivity, collaboration, and business growth.

Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure

Bree Hall

¿Sabías que los micro frontends pueden ser mucho más rápidos que sus contrapartes monolíticas? ¿Qué tal los rollbacks de características específicas? En esta charla escucharás y verás 8 ejemplos de cosas que no solo te enseñarán un poco sobre los micro frontends, sino también en qué casos son más útiles.

8 Cosas que No Sabías que los Micro Frontends Pueden Hacer

Welcome to the session on microfrontends. Microfrontends allow for independent implementations and local development. It is possible to develop and integrate microfrontends locally using an emulator and achieve automatic updates. Fine-tuning modules and user experience can be done using a discovery service. Rules can be created in the discovery service to selectively load microfrontends for specific browsers. AI can be leveraged to generate AI-enhanced variants and compare them with the original implementation. Microfrontends are highly portable and can be used in different applications. Code isolation and enhanced performance are important considerations in microfrontends. The benefits of microfrontends include improvements in file name changes and performance overhead. The Netflix application is a case study for microfrontends. Overall, microfrontends offer various benefits and opportunities for architectural discussions.

Did you know that micro frontends can be much faster than their monolithic counter parts? How about rollbacks of specific features? In this talk you will hear and see 8 examples of things that will not only teach you a bit about micro frontends, but also in what cases they are most useful.

8 Things You Did Now Know Micro Frontends Can Do

Florian Rappl

Construir módulos C++ para React Native es más fácil de lo que podrías pensar (si sabes cómo). En esta charla compartiré las mejores prácticas actuales sobre cómo iniciar los módulos nativos C++ para React Native.

Construcción de módulos nativos C++ / JSI para React Native en 2024

In this talk, the speaker discusses the process of building C++ native modules for React Native. They explain that native modules allow for tighter platform integration and access to platform-independent performance code, but come with trade-offs such as increased build times and potential issues with crashes and package dependencies. The speaker clarifies the differences between the old and new architecture of React Native, highlighting the introduction of the JavaScript interface (JSI) and its benefits. They also explore alternative React Native architecture options, including TurboNativeModules and LegacyNativeModules. The speaker discusses the challenges of working with legacy native modules and the benefits of using NitroModules and pre-building native code. They conclude with recommendations for using Nitro modules, pre-building, and utilizing a compiler cache to optimize build times.

Building C++ modules for React Native is easier than you might think (if you know how). In this talk I’ll be sharing the current state best practices on bootstrapping of native C++ modules for React Native!

Building C++ / JSI Native Modules for React Native in 2024

Kræn Hansen

Discussion Room: Practical AI

Joran Quinten

Piensa en las veces en las que tienes que colaborar con unidades de negocio, equipos interdepartamentales y otras funciones. Con demasiada frecuencia, las ideas complejas y el lenguaje técnico pueden afectar la comunicación y colaboración efectiva y eficiente entre departamentos. En esta sesión, compartiré herramientas prácticas que puedes implementar para explicar, comunicar e incluir a miembros no técnicos del equipo en una conversación técnica. Ya sea que estés colaborando con un equipo no técnico, presentando ideas a un público de negocios o no técnico, o solucionando problemas en los que necesitas comunicar jerga técnica, en esta sesión aprenderás cómo comunicar de manera rápida y efectiva ideas complejas a través de historias, datos y experiencias para una conversación más productiva.

Cómo comunicar ideas técnicas a audiencias no técnicas

Welcome to the session on communicating technical information to non-technical audiences. Today, we will explore how to apply your existing communication skills to share technical jargon. Understanding your audience through asking questions, making observations, and doing research is key to successful communication. When communicating with non-technical audiences, consider their baseline knowledge and avoid making assumptions. Use jargon when it is understood by all and explain unfamiliar terms when necessary. Analogies and stories can be effective in explaining complex concepts. Visual aids and experiences can enhance presentations. Clarify the purpose of communication to avoid misunderstandings. Utilize resources like written communication, podcasts, and videos to educate team members. Include others in technical conversations to learn and build something bigger. Effective communication requires context and understanding. Utilize the course 'Technical Communication for Non-Technical Audiences' on Pluralsight for further guidance.

Think of the times when you have to collaborate with business units, cross-departmental teams, and other functions. Too often, complex ideas and jargon can impact cross-departmental communication and collaboration effectiveness and efficiency. In this session, I will share practical tools you can implement to explain, communicate, and include non-technical team members in a technical conversation. Whether you are collaborating with a nontechnical team, presenting ideas to a business or nontechnical audience, or troubleshooting problems where you need to communicate technical jargon - in this session, you will learn how to quickly and effectively communicate complex ideas through stories, data, and experiences for a more productive conversation.

How to Communicate Technical Ideas to Non Technical Audiences

Amber Vanderburg

Explora los Componentes del Servidor a través de la lente de Componentes de IU reutilizables, donde todo "depende" de los requisitos individuales del caso de uso y las necesidades individuales de la aplicación. En lugar de luchar entre 'servidor' y 'cliente', tengamos lo mejor de ambos mundos.

Componentes React Polimórficos para el Cliente y el Servidor

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

Explore Server Components through the lens of reusable UI Component, where everything "depends" on the individual requirements of the use-case and individual application needs. Instead of fighting over 'server' vs 'client' - let's have the best of both worlds.

Polymorphic React Components for Both the Client and the Server

Kiril Peyanski

La accesibilidad ya no es una opción; es un requisito obligatorio para el éxito de los lanzamientos de productos. Si bien podemos implementar características básicas de accesibilidad utilizando roles y propiedades ARIA en los componentes de React, los escenarios del mundo real presentan complejidades adicionales. Cuando nos enfocamos en elementos como el deslizador de configuración de contraste, ¿cómo leemos los nombres de los menús, los valores seleccionados y las indicaciones en las interfaces de TV? ¿Cómo leemos solo los valores cambiados posteriormente? En esta charla, compartiré conocimientos prácticos basados en nuestra experiencia en la creación de componentes de React accesibles para decenas de millones de televisores webOS anualmente.

Accesibilidad de la interfaz de usuario de React en TV - Estudio de caso práctico en producción real

I'm excited to talk about React UI accessibility on TV. Enact is a React-based framework designed for TV UI components. Keyboard navigation is the minimum requirement for accessibility. The Enact framework has a module called Spotlight for TV remote direction keys. All attributes and roles are supported in JSX. Practical cases include reading a Dingbae font icon with no text, handling range widgets, alert popups, and virtual components. Testing on actual devices is important. Useful tools for accessibility development include custom message announcements, static analysis with JSX A11y, and accessibility testing with Chrome DevTools.

Accessibility is no longer an option; it’s a mandatory requirement for successful product launches. While we can implement basic accessibility features using ARIA roles and properties in React components, real-world scenarios present additional complexities. When focusing on elements like the Contrast setting slider, how do we read menu names, selected values, and hints in TV interfaces? How do we read only changed values afterward? In this talk, I’ll share practical insights from our experience in making React components accessible for tens of millions of webOS TVs annually.

React UI Accessibility on TV - Practical Case Study in Real Production

Seungho Park

Repasaremos los desafíos únicos, soluciones y cosas extrañas que encontramos al integrar React en la extensión de Chrome de Ibotta. ¡Aprende sobre la optimización del rendimiento del script de contenido, la gestión del estado y cómo superar problemas con las herramientas de compilación!

Haciendo que React funcione en extensiones de Chrome

We're going to talk about making React work in Chrome extensions. We started building Chrome extensions during our freshman year and have learned a lot along the way. Chrome extensions have two parts: the content script and the background script. Our story begins before React, and we created the UT Registration Plus extension to simplify class registration. We initially built the extension using HTML strings and then tried using jQuery, resulting in unmaintainable code. When building Octoshop, we chose React for its support and package system, but integrating it with Ibotta's Vue extension led to a messy codebase. We centralized our code and managed Chrome's state using React portal and hooks, improving maintainability.

We will go over the unique challenges, solutions, and down right weird things we encountered while integrating React into the Ibotta Chrome extension! Learn about optimizing content-script performance, managing state, and overcoming issues with build tools!

Making React Work in Chrome Extensions

Sriram Hariharan

Darshan Bhatta

Hablaremos principalmente sobre el cambio de la industria hacia el tiempo de construcción y por qué te quedarás rezagado si no aprendes sobre las complejidades de las optimizaciones de tiempo de construcción y las arquitecturas modernas, y cómo puedes aprovechar esta nueva arquitectura de tendencia para mejorar el rendimiento de tu producto muchas veces.

¡Gana rendimiento! Lleva tu tiempo de ejecución al tiempo de construcción

Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.

We'll be discussing mainly the industry shift towards build time and why you'll be lacking behind if you don't learn about the intricacies of build time optimizations and modern architectures, and how you can leverage this new trending architecture to boost your product's performance many times.

Gain Performance! Take Your Run Time to Build Time

Rohit Singh

Esta presentación proporciona una descripción práctica del desarrollo de una Progressive Web App (PWA) dentro del alcance del proyecto BelIS (Sistema de Información de Iluminación) con énfasis en la disponibilidad sin conexión. Este proyecto, iniciado por la ciudad de Wuppertal, sirve como respuesta a las demandas de la gestión de la iluminación urbana y es utilizado diariamente por el Departamento 104 de la Ciudad, los Servicios Municipales de Wuppertal y el socio contratista actual, SPIE AG.

Shining Offline: La Experiencia Móvil BelIS-Online Wuppertal

Hi, welcome to Shining Offline. I'll share how using the offline first approach saved us in the mobile urban lighting system. We'll discuss Kismet, the Bayless system, and the transition to a progressive web app. The system handled work orders, but the manual process caused unnecessary effort. In 2015, we built a native iOS app, but faced challenges with updates and communication. Eventually, we convinced the client to switch to a progressive web app. The new PWA's design improves usability and uses maps and services from the city's own infrastructure. Implementing the offline-first principle addressed many issues, and providing offline maps required using MapLibreGL app protocol. Offline communication with the iOS app endpoint and managing conflicts were also discussed. Offline-first requires significant effort but leads to user satisfaction. iPads are the devices of choice.

This presentation provides a practical overview of developing a Progressive Web App (PWA) within the scope of the BelIS project (Lighting Information System) with an emphasis on offline availability. This project, initiated by the city of Wuppertal, serves as a response to the demands of urban lighting management and is used daily by the City's Department 104, the Wuppertal Municipal Services and the current contract partner, SPIE AG.

Shining Offline: The Mobile BelIS-Online Wuppertal Experience

Thorsten Hell

Todos han oído hablar de las banderas de características: interruptores booleanos en tu código que puedes cambiar en tiempo de ejecución para diferentes usuarios, entornos, etc. Pero son solo una parte de una práctica recomendada mucho más amplia llamada "configuración de aplicaciones". Grandes empresas de tecnología como Meta y Google tienen herramientas internas para la configuración de aplicaciones estructuradas y seguras que les ayudan a acelerar el desarrollo de productos y servicios backend. Esta charla explora qué es la configuración de aplicaciones y cómo puede capacitar a todo tu equipo para moverse más rápido, incluidos tus colegas no técnicos.

Configuración de aplicaciones segura: una forma poderosa y emergente de acelerar el desarrollo de productos

Today's Talk discusses type-safe app configuration and its benefits. It explores how app configuration can accelerate software development using the example of a SaaS company called Potion. The Talk highlights the use of feature flags to control app discounts and the advantages of decoupling discount control from the engineering team. It also covers the ability to run A-B tests, personalize discount messaging, and optimize for upgrades using an AI loop. The Talk emphasizes the flexibility of the app configuration system, allowing for managing multiple overlapping discounts and controlling various aspects of the app. Lastly, it mentions the necessary components of building a flexible app configuration system and how Hypertune offers these features.

Everyone has heard of feature flags: boolean switches in your code that you can flip at runtime for different users, environments, etc. But they are just one part of a much broader best practice called “application configuration”. Big tech companies like Meta and Google have internal tools for structured, type-safe app configuration that help them accelerate development of products and backend services. This talk dives into what app configuration is and how it can empower your whole team to move faster, including your nontechnical colleagues.

Type-Safe App Configuration: A Powerful, Emerging Way to Accelerate Product Development

Miraan Tabrez

Design workflows can sometimes be at odds with development—but establishing common patterns between disciplines can set the foundation for automation and enable teams to design and ship faster. Figma allows you to get what you need from design and get back to writing code—whether that’s building front-end for the first time, or building with a reusable design system in your code base.

Aligning Patterns Across Design and Development

Jake Albaugh

A medida que el péndulo del desarrollo web se inclina de nuevo hacia el servidor, la transmisión se ha vuelto cada vez más popular. Específicamente, la transmisión fuera de orden a través de características como React Suspense, los poderes mágicos detrás de los Server Components. Construyamos nuestra propia versión simplificada para explorar cómo funciona, qué problemas estamos tratando de resolver y cómo se ve este futuro del desarrollo web.

Construyamos Suspense 🥁

Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.

As the pendulum of web development swings back towards the server, streaming has become increasingly popular. Specifically, out-of-order streaming through features like React Suspense, the magical powers behind Server Components. Let's build our very own simplified version to explore how it works, what problems we are trying to solve, and what this future of web development looks like.

Let's Build Suspense 🥁

Julian Burr

¡Yay, acaban de lanzar la versión 1.0 de su sistema de diseño, pero ahora qué? El lanzamiento de un sistema de diseño puede parecer una tarea fácil, pero mantenerlo es lo que importa. En esta charla discutiremos cómo su sistema de diseño debe madurar con su empresa mediante la construcción de un sitio de documentación extensible, pensando más allá del código, recopilando estadísticas de uso de componentes y mucho más!

Más allá de 1.0 - Lecciones aprendidas y cosas que hacer después del lanzamiento 1.0 de un sistema de diseño

Welcome to Beyond 1.0, a talk about scaling and maintaining design systems. A design system is a collection of reusable components, principles, constraints, and best practices governed by clear standards. We have expanded our design system over six and a half years to include over 70 components and support over 50 developers. To maintain a maintainable code base for your design system, enforce a singular code style across your entire code base through a linter. Use Next.js for a comprehensive and custom design system documentation site built with Markdown. We've improved our design system documentation by using react.gen typescript to dynamically parse out component props, allowing for more interactive and maintainable documentation.

Yay you just launched v1.0 of your design system but now what? Launching a design system can seem like an easy task but maintaining it is what will get you. In this talk we'll discuss how your design system should mature with your company by building an extensible documentation site, thinking beyond the code, collecting component usage statistics, and much more!

Beyond 1.0 - Lessons Learned and Things to Do After 1.0 Release of a Design System

Ameer Sami

¿Tu app de React sirve a una audiencia global, pero solo está disponible en inglés? Cambiemos eso. En esta charla, te mostraré cómo i18n puede convertirse en una parte automática de tu flujo de trabajo CI/CD, permitiendo a tu equipo, sin importar su tamaño, entregar tu app de React en más de 100 idiomas diferentes sin ningún esfuerzo adicional.

¡Cómo Soporto Más de 100 Idiomas en Mi App de React...y Tú También Puedes!

I'm Richard Kerrigan and I'll show you how to add multilingual support to your React apps. We need a way to support other languages on our websites and web apps without affecting team productivity. We'll explore a low-cost solution using AI and automation. When my team started tackling this problem, we looked at Azure and found the Azure AI Translator service, which offers both ad-hoc text translation and document translation. Key features include language support for over 100 languages and dialects, a generous free tier, Neural Machine Translation for accuracy, and the ability to use custom glossaries. Designing workflow for translating JSON content at runtime or incorporating translation process into CICD workflow for HTML or Markdown files. Exploring how to translate HTML files within a CICD pipeline. Translation service and storage account setup. Function app building and deployment. Configuring translation to Spanish with a glossary in CSV format for file translation. Sending a request to the translator and receiving the translated file. Discussing the problem of websites not offering content in additional languages. Highlighting the benefits of Azure AI Translator and its alternatives. Showcasing different versions of the app for translating JSON, HTML, and markdown content. Checking the progress of the workflow, deployment of Azure resources and function, and translation of markdown files. Quick explanation of infrastructure as code and deployment options. Changing languages shows translated title and excerpt while maintaining original formatting.

Does your React app serve a global audience, but is only available in English? Let's change that. In this talk, I'll show you how i18n can become an automatic part of your CI/CD workflow, enabling your team, regardless of size, to deliver your React app in over 100 different languages without any extra effort.

How I Support More Than 100 Languages in My React app...and You Can Too!

Richard Carrigan

Únete a mí en esta retrospectiva de 4 años mientras exploramos las lecciones aprendidas al construir un reproductor de video desde cero con React Native. Compartiré ideas, obstáculos y conclusiones clave de este proceso de desarrollo. Exploraremos consideraciones esenciales antes de adentrarnos en el desarrollo personalizado de un reproductor de video con React Native, incluyendo desafíos como la gestión de audio en segundo plano, las diferencias entre Android e iOS, la implementación de subtítulos y los controles personalizados. Ya seas un desarrollador experimentado o nuevo en React Native, esta retrospectiva te ayudará a navegar por los desafíos que enfrentamos al desarrollar un reproductor de video, asegurando un proceso de desarrollo más fluido para tus propios proyectos.

Una Retrospectiva de 4 Años: Lecciones Aprendidas al Construir un Reproductor de Video desde Cero con React Native

Hello, React Summit. Welcome to this talk, a retrospective on four years in the making of our React Native video player. We will cover what went well, what didn't go well, and the lessons learned. We used React Native Video 5.2.1 and custom components to optimize the player. Streaming HLS, subtitles, and transcripts worked well. iOS performance was good, but the Android player and background audio management caused issues. Different media players and syncing audio players were challenges. Managing dependencies and versions was difficult. Upgrading React Native Video to version 6.4 improved stability and added notification features. Future updates will include DLL support and player-control separation.

Join me for a 4-year retrospective as we explore the lessons learned from building a video player from scratch with React Native. I'll share insights, pitfalls, and key takeaways from this development journey. We'll explore essential considerations before diving into custom video player development with React Native, including challenges like background audio management, platform nuances between Android and iOS, subtitles implementation and custom controls. Whether you're a seasoned developer or new to React Native, this retrospective will help you navigate the challenges we faced when developing a video player, ensuring a smoother development process for your own projects.

A 4-Year Retrospective : Lessons Learned From Building a Video Player From Scratch With React Native

Omar Diop

In the rapidly evolving landscape of technology, Artificial Intelligence (AI) stands out as a game-changer our industry. But what are the implications for accessibility and building compliant and inclusive experiences? In this talk, we will discuss AI and accessibility in all its nuances. From significant advancements that improve experiences for all users to major concerns around the ethics and organizational investments in accessibility, we will cover it all. Either way, AI is here and we got a lot to talk about to ensure accessibility remains at the forefront of our work.

React Summit US 2024

The biggest React conference in the US