Name: React Advanced Conference 2023
Start: 2023-10-20T12:30:00.000Z
End: 2023-10-23T22:00:00.000Z

En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan. Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code. Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras

Fetch, useEffect, React Query, SWR, ¿qué más?

This workshop covers data fetching strategies in JavaScript, focusing on Fetch API, Axios, SWR, and React Query. It provides examples and guidance on implementing these strategies in a React application. Troubleshooting and deployment issues, such as CORS, are also addressed. The workshop concludes by highlighting the advantages and use cases of SWR and React Query, and encourages participants to choose the best strategy based on their project's needs.

In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work. While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code. You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others

Fetch, useEffect, React Query, SWR, what else?

Ondrej Polesny

Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, ve cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.

Monitoreo 101 para Desarrolladores de React

In this workshop, we will discuss monitoring and debugging with Sentry, focusing on Next.js. We'll cover setting up a Sentry project, configuring source maps, adding event context and custom tags, and resolving errors. Sentry helps developers quickly identify and resolve issues in their code, providing valuable context like stack traces, breadcrumbs, and session replay. Integrations with services like GitHub and Slack enhance error management, and alerts can be customized based on specific metrics. Distributed tracing allows for tracking performance issues, and session replay provides valuable context for debugging errors.

If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.

Monitoring 101 for React Developers

Lazar Nikolov

Sarah Guthals

I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

The Workshop covered various topics including building a homepage with Hydrogen and Storyblok, querying data using storefront.query and storefront.mutate, building collection indexes and details, adding items to the cart and displaying cart data, connecting Storyblok and adding a development server, setting up environments and creating page routes, using Storyblok and creating page components, personalizing the homepage based on user behavior, integrating Storyblok with Shopify components, and closing remarks.

I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation

Building High-Performance Online Stores with Shopify Hydrogen and Remix

Alexandra Spalato

Los Componentes del Servidor son posiblemente el cambio más grande en React desde su lanzamiento inicial, pero muchos de nosotros en la comunidad hemos tenido dificultades para entenderlos. En esta charla intentaremos desglosar las diferentes partes móviles para que tengas una buena comprensión de lo que está sucediendo bajo el capó, y exploraremos la línea entre React y los marcos que se construyen sobre él.

Simplificando los Componentes del Servidor

React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.

Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.

Simplifying Server Components

Mark Dalgleish

Los Componentes de Servidor son la nueva gran cosa, pero hasta ahora gran parte del discurso a su alrededor ha sido abstracto. Cambiemos eso. Esta charla se centrará en el lado práctico de las cosas, proporcionando un mapa de ruta para navegar el viaje de migración. Comenzando desde una aplicación que utiliza el antiguo enrutador de páginas de Next.js y React Query, desglosaremos este viaje en un conjunto de pasos accionables e incrementales, deteniéndonos solo cuando tengamos algo que se pueda enviar y que sea claramente superior a lo que comenzamos. También discutiremos los próximos pasos y estrategias para adoptar gradualmente más aspectos de este paradigma transformador.

Una Guía Práctica para Migrar a Componentes de Servidor

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

A Practical Guide for Migrating to Server Components

Fredrik Höglund

En Microsoft, estamos comprometidos a proporcionar a nuestros equipos las mejores herramientas y tecnologías para construir aplicaciones móviles de alta calidad. React Native ha sido durante mucho tiempo una opción preferida por su alto rendimiento y gran experiencia de usuario, pero conseguir que los stakeholders se suban al carro puede ser un desafío. En esta charla, compartiremos nuestro viaje de hacer de React Native una opción preferida para los stakeholders que priorizan la facilidad de integración y la experiencia del desarrollador. Discutiremos las estrategias específicas que utilizamos para alcanzar nuestro objetivo y los resultados que logramos.

Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida

This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.

At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.

Raising the Bar: Our Journey Making React Native a Preferred Choice

Lorenzo Sciandra

Para muchos desarrolladores de aplicaciones, GraphQL es fundamental para construir excelentes experiencias de usuario. Con la introducción de React Suspense, los desarrolladores tienen una forma ergonómica de orquestar estados de carga para mejorar el status quo. En esta charla, el equipo de Apollo Client te mostrará cómo construimos una aplicación no trivial utilizando las nuevas características de Suspense de Apollo Client, características de GraphQL como la directiva @defer, y cómo combinarlas para construir excelentes experiencias de usuario en tus propias aplicaciones.

Cómo utilizar Suspense y GraphQL con Apollo para construir excelentes experiencias de usuario

This Talk discusses using suspense and GraphQL with Apollo client to build great end user experiences. It explains the core concepts of React suspense and how to fetch data in suspense with Apollo client's new suspense hooks. The Talk also covers optimizing the loading experience by adding suspense boundaries, using the defer directive in GraphQL, and integrating suspense hooks with React 18 transitions. Future plans include new APIs like suspenseful use fragment and lazy use background query in Apollo client 3.9. Testing strategies for suspense in components and customizing loading states are also mentioned.

For many app developers, GraphQL is instrumental in building great user experiences. With the introduction of React Suspense, developers have an ergonomic way to orchestrate loading states to improve upon the status quo. In this talk, the Apollo Client team will show you how we built a non-trivial application using Apollo Client’s new Suspense features, GraphQL features like the @defer directive, and how to combine them to build great user experiences in your own apps.

How to Use Suspense and GraphQL with Apollo to Build Great User Experiences

Jerel Miller

Alessia Bellisario

Hace algunas semanas hice mi propia implementación de señales, capaz de actualizar 300k veces el DOM en aproximadamente 600ms. Aprovechando la Cola de Microtareas, pude reducir ese número a 6ms, mejorando efectivamente el rendimiento en 100x. Quiero compartir cómo funciona la Cola de Microtareas y cómo puedes aprovechar el Bucle de Eventos para mejorar el rendimiento.

¡Aprovechando el Bucle de Eventos para Aplicaciones Súper Rápidas!

This talk covers the event loop, microtask queue, and provides a live demo. JavaScript is single-threaded but can perform tasks that only a multithreaded environment can. The event loop consists of a call stack and microtask queue, which allow JavaScript to run non-blocking operations. Leveraging the microtask queue can lead to significant performance improvements in applications, such as React. However, it is important to use it correctly to avoid issues like infinite loops.

Some weeks ago I made my own implementation of signals, capable of updating 300k times the DOM in circa 600ms. Leveraging the Microtask Queue, I was able to bring that number down to 6ms, effectively improving performances by 100x. I wanna share how the Microtask Queue works and how you can leverage the Event Loop to improve performances.

Leveraging the Event Loop for Blazing-Fast Applications!

Michael Di Prisco

La improbable amistad entre React y Rust

This Talk explores the unlikely friendship between React and Rust, showcasing how they can be used together. The speaker demonstrates live coding and explains the process of calling Rust functions from JavaScript using the Tauri framework. The Talk also covers retrieving system information and disk details using Rust's sysinfo library. The speaker emphasizes the importance of serializability and showcases a button and SD card reader as examples of practical applications.

The Unlikely Friendship Between React and Rust

Sara Vieira

Si usas el directorio de aplicaciones Next.js, es posible que ni siquiera lo hayas notado, pero no solo estás usando Componentes de Servidor de React, sino que también estás usando la nueva característica de SSR de transmisión de React.Eso significa que en la primera carga de página, tus Componentes de Cliente ahora serán renderizados en el lado del servidor, límite de suspense por límite de suspense, y constantemente transmitidos al cliente, donde son rehidratados pieza por pieza. Si combinas eso con suspense para la obtención de datos en tus componentes de cliente, de repente te enfrentarás a desajustes de rehidratación - ya que tus componentes de cliente comenzarán a buscar datos en el servidor, pero los datos no serán transportados al cliente. En esta charla, repasaré el camino rocoso que tuvimos que atravesar para soportar suspense para la obtención de datos en SSR de transmisión con Apollo Client, mirando todos los curiosos problemas de tiempo que surgen con estas tecnologías, y cómo intentamos resolverlos lo mejor que podemos - siempre con la mejor experiencia posible para el usuario y el desarrollador en mente.

El Camino Rocoso de las Bibliotecas de Obtención de Datos en el Nuevo SSR de Transmisión de React

This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.

If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece. If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client. In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.

The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR

Lenz Weber-Tronic

Cuando trabajamos con React es importante que utilicemos la herramienta correcta para el trabajo correcto. Si no lo hacemos, nos perderemos el mejor rendimiento y la mejor experiencia de desarrollo. Mientras optimizábamos la Tabla React de AG Grid, descubrimos una serie de patrones que mejoraron significativamente el rendimiento de las tablas.

Patrones para el Rendimiento

This Talk discusses patterns for performance in React development, including addressing slow resizing in custom cell renderers. It explores optimizing React render performance by reducing excessive re-rendering and using direct style updates. The use of layout effect and callback refs is also highlighted as techniques to improve performance. Additionally, the Talk mentions the AG Grid and TanStack Table libraries, as well as upcoming features like grid state restoration.

When working with React it is important that we use the right tool for the right job. If not we will be missing out on the best performance and developer experience. While optimising AG Grid React Table we discovered a number of patterns that made significant improvements to the tables performance.

Patterns for Performance

Stephen Cooper

¿Cuántas veces has tenido que esperar a que tu equipo de backend termine de construir la API para poder comenzar tus tareas? ¿Y si todo lo que necesitaras para mover esa tarea a en progreso fuera el contrato de la API? ¿Y si hubiera una biblioteca que hiciera esto para las API de REST y GraphQL y, al mismo tiempo, llevara tus pruebas al siguiente nivel? Únete a mí y prepárate para mejorar tu experiencia de desarrollo mientras aprendes todas las experiencias ganadas en batalla de usar una de mis bibliotecas favoritas: Mock Service Worker.

Todo lo que necesitas es un contrato...

The speaker discusses the challenges of server state and test maintenance, and how they found solutions using React Query and Mock Service Worker. They emphasize the benefits of defining contracts for faster development and stress reduction. The speaker also highlights the advantages of using Mock Service Worker over mock servers and explains how it allows for easy customization and test overrides. They mention the upcoming release of V2 of MS-Double and encourage the audience to stay updated.

How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.

All You Need Is a Contract…

Daniel Afonso

NextJS 13.4 cambió el juego con el Enrutador de la Aplicación y los componentes del Servidor React. El cambio al modelo de gestión de estado parece simple al principio, pero se vuelve complejo muy rápidamente cuando intentas crear las experiencias prácticas diarias del usuario que eran sencillas en el modelo de páginas. Hablaremos sobre los diferentes modelos de gestión de estado, cómo funcionan en el Enrutador de la Aplicación y cómo decidir cuál deberías usar.

El Estado del Estado en el Enrutador de la Aplicación

React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.

NextJS 13.4 changed the game with the App Router and React Server components. The change to the state management model looks simple to start, but gets complex very quickly as you try to create the practical every-day user experiences that were straightforward in the pages model. We'll talk about the different state management models, how they work in the App Router, and how to decide which you should use.

The State of The State In The App Router

Jack Herrington

El modelo de componentes de React y el flujo de datos unidireccional nos proporcionan un excelente modelo mental para construir nuestras aplicaciones, pero la depuración de las aplicaciones de React todavía puede ser confusa. Los detalles internos de React son una caja negra, y a menudo es difícil entender por qué se renderizaron los componentes o qué causó los errores. El depurador de viaje en el tiempo Replay facilita la depuración de las aplicaciones de React al permitirte inspeccionar lo que está sucediendo en cualquier momento. Pero, ¿y si pudiéramos ir más allá de las características habituales del depurador, y construir nuevas características de depuración que nos digan más sobre lo que está haciendo React? Veamos cómo la API de Replay hace eso posible.

Construyendo Mejor Depuración de React con Análisis de Replay

Today's Talk focused on building better React dev tools with replay time travel analysis. The React DevTools provide valuable insights into React apps, using a fiber data structure to represent component instances. Replay is a time-traveling debugger for React, with plans to make Chrome their primary recording browser. They extract React information from recordings using their time travel API and have built a UI for debugging and inspecting the content. The long-term goal is to have Replay work offline and in permanent record mode.

React's component model and one-way data flow give us a great mental model for building our apps, but debugging React apps can still be confusing. React's internals are a black box, and it's often hard to understand why components rendered or what caused errors. The Replay time-travel debugger makes it easier to debug React apps by letting you inspect what's happening at any point in time. But what if we could go beyond the usual debugger features, and build new debugging features that tell us more about what React is doing? Let's see how Replay's API makes that possible.

Building Better React Debugging with Replay Analysis

Mark Erikson

Probablemente hayas construido uno de estos antes: tooltips, selectores de fecha, menús, UI de enseñanza... todos son ejemplos de contenido de “popover”. Buenas noticias: va a ser mucho más fácil construir estos, con algunas características propuestas para la plataforma web. Es posible que ni siquiera necesites JavaScript. En esta charla, aprenderás todo sobre el próximo atributo ‘popover’, cuándo usar la modalidad y el acceso a la capa superior.

Cómo los Popovers Están a Punto de Ser Mucho Más Fáciles de Construir

This talk explores the challenges and guidance for building well-designed popovers and dialogues in HTML. It discusses the differences between dialogues and popovers, their use cases, and the importance of semantics in differentiating them. The talk also covers UI considerations, implementation, and positioning of popovers. Additionally, it highlights the use of modals for blocking access to the rest of the page and the role of semantics in making accessible dialogues and popovers.

You've probably build one of these before: tooltips, date pickers, menus, teaching UI… they're all examples of “popover” content. Good news: it's going to get a whole lot easier to build these, with some proposed web platform features. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, when to use modality and access to the top layer.

How Popovers Are About to Become a Whole Lot Easier to Build

Hidde de Vries

Panel Discussion: Open Source & “Perceived Competition” Between Projects

Michel Weststrate

Dan Abramov

React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.

Compilador React Forget - Entendiendo React Idiomático

The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.

React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization.

React Compiler - Understanding Idiomatic React (React Forget)

Joe Savona

Mofei Zhang

Los usuarios han llegado a esperar colaboración en tiempo real de aplicaciones de primera clase como Notion o Figma. Pero las herramientas e infraestructuras ampliamente disponibles para construir aplicaciones multijugador están apenas emergiendo. En esta charla, exploraremos el marco de trabajo de código abierto Jazz y las dos nuevas ideas que lo impulsan: Tipos de Datos Replicados sin Conflictos (CRDTs) y permisos verificables. Al construir una aplicación completa con nada más que React y Jazz, veremos cómo este nuevo enfoque simplifica radicalmente la construcción no solo de aplicaciones multijugador en tiempo real, sino de cualquier tipo de aplicación en la que los usuarios interactúan.

Jazz: Construye Aplicaciones React en Tiempo Real, Locales con Sincronización y Datos Colaborativos Seguros

JAS is a new framework for building apps around sync and secure collaborative data, promising to simplify app development by eliminating unnecessary complexity. CoJson is an abstraction that simplifies app development by implementing multi-device co-editing, user identities, permissions, sync, caching, and persistence. Jazz is an open source framework that provides idiomatic bindings for CoJSON, specifically in the browser. JAS provides powerful sync and storage capabilities, eliminating the need for external blob storage. Jazz React allows developers to use React and provides automatic subscriptions for reactive updates to core values. JAS offers instant interaction, offline sync, and the ability to rebuild Twitter with Jazz.

Users have come to expect real-time collaboration from best-in-class apps like Notion or Figma. But widely available tools and infrastructure for building multiplayer apps are only just emerging. In this talk, we’ll explore the open-source framework Jazz and the two new ideas powering it: Conflict-free Replicated Data Types (CRDTs) and verifiable permissions. By building a whole app with nothing but React and Jazz, we’ll see how this new approach radically simplifies building not only real-time multiplayer apps, but any kind of app in which users interact.

Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data

Anselm Eickhoff

¡Nuestro ecosistema puede ser abrumador! Primero, tuvimos el auge de SSR y SSG, y cada uno tenía su propia pila gigantesca de marcos y herramientas. Luego, la hidratación parcial nos permitió hidratar solo algunos de nuestros componentes en el cliente, lo que hemos visto en los Componentes del Servidor de React. ¿Pero qué pasa con las islas? ¿Tienen alguna relación con el Streaming SSR? Además, ¿qué es la reanudabilidad y por qué sigo oyendo hablar de ella? […] Oh, ¿alguien dijo renderizado en el Edge? Bueno... Hay muchos enfoques por ahí, y todos ellos argumentan que su filosofía es la mejor. En esta sesión, repasaremos estos patrones de arquitectura/renderizado, para ayudar a arrojar algo de luz sobre cómo se implementan algunos y los conceptos detrás de ellos.

Hidratación, Islas, Streaming, Reanudabilidad... ¡Oh Dios Mío!

Today's Talk introduces the concepts of hydration and off islands, explores the benefits of islands for enhancing server-side rendered HTML with client-side JavaScript, discusses the lazy approach of re-zoomability and its advantages over traditional hydration, highlights the use of resumability and concurrent React for improved rendering performance, examines the features and concerns of React server components, touches on the co-location of client and server code, and explores future trends in rendering and navigation. The Talk also reflects on past ideas and emphasizes the importance of identifying core metrics for performance optimization.

Our ecosystem can be overwhelming! First, we had the rise of SSR and SSG—and each had its own gigantic pile of frameworks and tools. Then partial hydration enabled us to hydrate only some of our components on the client, which we've seen in React Server Components.  But what about islands? Do they relate at all to Streaming SSR? Moreover, what is resumability, and why do I keep hearing about it? […] Oh, did anyone say rendering on the Edge? Well… There are many approaches out there, and all of them argue that their philosophy is best. In this session, we’ll go over these architecture/rendering patterns, to help shed some light on how some are implemented and the concepts behind them.

Hydration, Islands, Streaming, Resumability… Oh My!

Matheus Albuquerque

¿Sabías que aproximadamente 1 de cada 7 personas es neurodivergente? Dentro de ese grupo hay un espectro completo de personas cuyos cerebros procesan la información de manera diferente. Sin embargo, como ingenieros de frontend, a menudo olvidamos tener en cuenta estas idiosincrasias, o elegimos simplemente aplicar estándares de la industria como WCAG 2.1 AA sin profundizar más. En esta charla, Steph comparte algunas de las formas en que puedes crear mejores experiencias web para los neurodivergentes.

Pensando Diferente Acerca de a11y – Diseño de Sitios Web Accesibles para los Neurodivergentes

Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.

Did you know that approximately 1 in 7 people are neurodivergent? Within that group there is an entire spectrum of people whose brains process information differently. However, as frontend engineers we often forget to take these idiosyncrasies into account, or choose to simply apply industry standards such as WCAG 2.1 AA without digging deeper. In this talk, Steph shares some of the ways you can create better web experiences for the neurodivergent.

Thinking Differently About a11y – Accessible Website Design for the Neurospicy

Stephanie Shaw

El consejo predominante sobre cómo usar React hoy en día es usar un marco de trabajo: ya sea para comenzar con uno o para adoptar uno de manera incremental. Esta charla de inmersión profunda explorará por qué, y cómo hacerlo con ejemplos de código en vivo.

Por qué Todos Necesitan un Marco de Trabajo

Today's Talk explores the value of using frameworks in software development, specifically focusing on React and its impact on web development. The Talk delves into the benefits of frameworks, such as solving routing and data fetching challenges, handling edge cases, and providing server-side rendering. It also introduces the concept of server components and their role in server-side rendering. The Talk highlights the advantages of soft navigation and the seamless communication between client and server. Overall, frameworks offer valuable functionality that enhances productivity and addresses common development challenges.

The prevalent advice on how to use React today is to use a framework: either to start with one or to incrementally adopt one. This deep-dive talk will explore why, and how to go about this with live code examples.

Why Everybody Needs a Framework

Tejas Kumar

Al adoptar una nueva tecnología, los desarrolladores se apegan a los valores predeterminados. Es un hecho que cada herramienta desde JQuery hasta NextJS ha tenido que enfrentar. En su peor momento, los valores predeterminados envían cientos de kilobytes de JS desperdiciados para enrutamiento, estado y otro equipaje que los desarrolladores pueden nunca usar. Pero en su mejor momento, los valores predeterminados nos dan una línea de base simple para comenzar, con un camino claro para agregar el conjunto exacto de características que nuestro proyecto exige. Esta es la magia del diseño opt-in. Vamos a ver cómo las opciones predeterminadas inteligentes guían las herramientas de frontend modernas desde Astro hasta los Componentes del Servidor de React, y por qué esta nueva era remodela tu flujo de trabajo, y las métricas de rendimiento, para mejor.

Diseño Opt-in – La Nueva Era de los Marcos de React

This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.

Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design. Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.

Opt in Design – The New Era of React Frameworks

Benjamin Holmes

¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Y si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser SSR y retrasar la hidratación, y en algunos casos, omitir la hidratación por completo. Y todo esto de manera incremental sin una reescritura.

Acelerando Tu Aplicación React Con Menos Javascript

Quick React is a tool that speeds up React applications with less JavaScript, and Builder.io is a visual CMS that empowers marketing teams. Web performance is a challenge, with most websites scoring poorly. Island architecture and reasonability are alternative approaches to hydration that improve performance. QUIC allows for resumable applications and Quick React enables island architecture for faster startup times. Hydration and inter-island communication are crucial for interactivity in React applications.

Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

Speeding Up Your React App With Less Javascript

Miško Hevery

¿Y si pudieras usar el código de la misma manera que usas Netflix o Spotify? Imagina toda tu base de código organizada en pequeños componentos en la nube, donde puedes importar solo lo que necesitas en cualquier espacio de trabajo. De hecho, puedes crear un espacio de trabajo ad hoc donde puedes usar y modificar solo los componentes que necesitas y exportarlos de nuevo. Para usar el código bajo demanda, los componentos deben ser entidades independientes, lo que significa que deben incluir su código fuente, configuración y dependencias. Esto te permite versionarlos de forma independiente e importarlos en pequeños espacios de trabajo dinámicos que luego son mucho más fáciles de navegar, configurar y construir. La versión independiente de los componentes también permite equipos independientes, porque esto separa la publicación de las actualizaciones de su consumo. Cuando todos los componentes de tu organización están en la nube, los equipos pueden descubrirlos, discutir cambios y visualizar relaciones, lo que facilita mucho la colaboración entre equipos. Junto con sus muchas ventajas, este cambio de paradigma trae consigo desafíos considerables, lo que puede explicar por qué esta no es la forma estándar de gestionar el código hoy en día. Esta charla es sobre las herramientas y metodologías necesarias para superar estos desafíos.

Código bajo demanda: El futuro de la colaboración en código

During the Talk, the speaker discusses the power of streaming and its impact on music consumption and production. They also explore the challenges and benefits of incorporating streaming into software development, using examples from Spotify. The future of code development is envisioned as a streaming world, where code is always live and changes are instantly available to everyone. The speaker emphasizes the importance of treating components as complete products, prioritizing component reviews, and enhancing the workflow for forking and contributing to components.

What if you could use code the same way you use Netflix or Spotify?  Imagine your entire code base organized as small components on the cloud, where you can import only what you need into any workspace. In fact, you can create an ad hoc workspace where you can use and modify only the components you need and export them back. In order to use code on demand, components need to be independent entities, which means that they have to include their source code, configuration and dependencies. This allows you to version them independently and import them into small dynamic workspaces which are then made much easier to navigate, setup and build. Independent component versioning also makes for independent teams, because this separates publishing updates from consuming them.  When all your organization’s components are in the cloud, teams can discover them, discuss changes and visualize relationships, making collaboration between teams much simpler.  Alongside its many advantages, this paradigm shift brings about considerable challenges, which may explain why this is not the standard way to manage code today. This talk is about the tools and methodologies required to overcome these challenges.

Code on Demand: The Future of Code Collaboration

Gilad Shoham

Al escribir código para la Web, hay muchas capacidades que se ofrecen de serie por nuestros navegadores. Si alguna vez escribiste un componente de carga de archivos, usaste temporizadores e intervalos, interactuaste con el DOM, o almacenaste algo en el Almacenamiento Local/De Sesión, tuviste que ir a los documentos de la API Web de MDN, para encontrar información relevante sobre cómo implementar ese código. En esta sesión, nos adentraremos en el emocionante mundo de las APIs Web del navegador que no se utilizan tan comúnmente (aunque deberían) y exploraremos sus increíbles capacidades 🚀 Todas estas características ofrecen nuevas oportunidades para crear experiencias web inmersivas que pueden ayudar a las empresas a crecer y conectar con los clientes. Así que si eres el tipo de ingeniero que quiere estar a la vanguardia en cuanto a desarrollo web, aprende cómo la API de Observador de Intersección, la API de Sincronización en Segundo Plano, la API de Bloqueo de Pantalla en Vigilia (y muchas más) pueden ayudarte a crear mejores aplicaciones web que mantendrán a los usuarios comprometidos y volverán por más!

Superpoderes de la API Web del navegador

Today's Talk explores various Web APIs and their functionalities, including the Intersection Observer API for element visibility, the Network API for connection detection, and the Background Sync API for offline capabilities. The Broadcast Channel API enables communication between components and the Beacon, Web Speech, Web Share, Screen Awake Lock, Page Visibility, Background Fetch, and Web Authentication APIs offer additional functionalities. These standardized APIs work across browsers and can improve performance while reducing electricity consumption.

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code. In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀 All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers. So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

Superpowers of Browser’s Web API

Nikola Mitrovic

Desacopla tus lanzamientos de tus despliegues, manteniendo un control total de ingeniería de tu aplicación.

Gestión de Funcionalidades con React

Feature management in React.js applications involves techniques like feature flags and toggles, allowing for decoupling of application deployment from feature releases. Gradual rollouts, remote configuration, and audience targeting are key techniques. Increased control and flexibility in feature management provide targeted launches and quick rollbacks, but there are pain points like lack of reviews and approval workflow. Infrastructure as code (IAC) and GitOps are practices that can be combined with feature management. Feature Advisor is a tool that helps with feature management in React applications, focusing on principles rather than the tool itself.

Decouple your releases from deployments, while maintaining full engineering control of your application.

Feature Flagging With React

Fahad Heylaal

Muchos desarrolladores de Javascript han añadido typescript a sus proyectos en los últimos años. ¿Pero cuántos de ellos están seguros de sus tipos en tiempo de ejecución? ¿Pueden garantizarse los tipos también en tiempo de ejecución? ¡Usando Zod eso puede realizarse! Veamos juntos cómo podemos usar Zod para mejorar la conciencia de nuestro código durante su ejecución y prevenir errores extraños o una mala experiencia de usuario.

Zod === TypeScript, pero en tiempo de ejecución en tus aplicaciones React

Zotter is a powerful tool for working with TypeScript in React applications, providing a simple schema concept for validation. It allows you to convert Zod schemas into TypeScript types and check if objects match the schema. Zod can be used for validation and contract enforcement, ensuring data consistency and preventing issues. It can also be used in React applications to create a validation layer and prevent code from running with incorrect data. The speaker encourages questions and provides contact information for further discussion.

Many Javascript developers have added typescript to their projects in the last few years. But how many of them are sure of their types at runtime? Can types be guaranteed on runtime too? Using Zod that can be realized! Let's see together how we can use Zod to improve the awareness of our code during its execution and prevent strange mistakes or a bad user experience.

Zod === TypeScript, but at Runtime in Your React Applications

Luca Del Puppo

Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️

Solucionando Problemas de Rendimiento en React

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Power Fixing React Performance Woes

Josh Goldberg

Pregunta a casi cualquier persona sobre el proceso de desarrollo de software, y en algún lugar de la respuesta mencionarán (esperemos) a los usuarios. Investigación de usuarios, pruebas de usuarios, retroalimentación de usuarios - el usuario final está en el corazón de todo lo que construimos. Sin embargo, para muchas empresas, hacer que las conversaciones con usuarios reales sucedan es un verdadero desafío, ¡especialmente si no tienes un especialista en UX en tu equipo! Si todo esto te suena familiar, entonces tengo una recomendación: tómalo en tus propias manos. En esta sesión, hablaremos sobre cómo establecer un programa básico de pruebas de usuarios y cómo hacerlo crecer, para que tú - el desarrollador - puedas sentirte empoderado para comenzar las pruebas de usabilidad para tu propio producto!

Pruebas de Usabilidad Sin un Especialista en UX

Usability testing is effective for uncovering user pain points and desire paths, as well as revealing loopholes, shortcuts, and hacks. Finding diverse users for testing can be challenging, but reaching out to sales and support teams and offering incentives can help. The logistics of usability testing include having multiple people to run tests, disclosing recording methods, and considering in-person or remote testing. During the tests, it's important to encourage participants to think out loud, ask open-ended questions, and gather feedback for improvement. Collecting and summarizing usability test results involves analyzing raw data, gathering hard data, and avoiding biases.

Ask nearly anyone about the process of developing software, and somewhere in the answer they’ll (hopefully) mention the users. User research, user testing, user feedback – the end user is at the heart of everything that we build. However, for many companies, making conversations with real users actually happen is a real challenge – especially if you don't have a UX specialist on your team! If this is all sounding familiar to you, then I have a recommendation: take it into your own hands. In this session, we'll talk through setting up a basic user testing program and growing it, so you – the developer – can feel empowered to start usability testing for your own product!

Usability Testing Without a UX Specialist

Kathryn Grayson Nanz

¿Estás usando React en tu proyecto? Si es así, ¡debes haber usado useEffect! De hecho, es esencial para muchos casos de uso, pero hay situaciones en las que podría no ser la mejor solución, y evitarlo puede mejorar el rendimiento de tu aplicación. En esta charla, aprenderemos de la experiencia cuál es la pieza que falta en el rompecabezas para dominar useEffect. Mirar los casos incorrectos e intentar mejorar su rendimiento nos ayuda a tener una comprensión más profunda de ello.

¿Cómo NO usar useEffect?

Welcome to how not to use UseEffect. UseEffect is a hook introduced in React 16.8 as a replacement for component dismount and update in class components. It runs your callback once when the component mounts and when there are changes in dependencies. UseEffect allows performing side effects such as fetching data. UseEffect executes its callback asynchronously to allow the browser to render and show something to the user without blocking the main thread. Setting a state in a useEffect without a dependency array can cause nasty loops. Sometimes you are using use effects to take care of calling parent events. Nasty Fetch. Sometimes, when fetching articles, loading and race conditions need to be considered.

Are you using React in your project? If so, you must used useEffect! Actually, it’s essential for many use cases, but there are instances where it might not be the best solution, and avoiding it can improve your application's performance. In this talk, we will learn from experience which is the missing piece of the puzzle to master useEffect. Taking a look at the incorrect cases and trying to improve their performance helps us to have a deeper understanding of it.

How to NOT use useEffect?

Mohamad Shiralizadeh

Las interfaces de usuario están compuestas por partes rápidas y partes lentas en términos de cuán receptivas son a la interacción del usuario. El renderizador concurrente de React desacopla las partes rápidas de las partes lentas al permitirnos renderizar las partes lentas en segundo plano sin bloquear las partes rápidas, de modo que cada parte puede responder a la interacción del usuario a su propio ritmo. En esta charla, exploraremos React Concurrente, entenderemos qué problemas resuelve, cómo funciona y cómo aprovecharlo a través del uso de características concurrentes.

React Concurrente Hecho Fácil

Today's Talk introduces concurrent React and highlights the importance of fast and slow updates in user interfaces. It explains how concurrent rendering improves UI performance by allowing fast updates to proceed without being blocked by slow updates. The concept of assigning priorities to renders is discussed, with high priority renders being synchronous and low priority renders being interruptible. The Talk also mentions the benefits of using concurrent features in navigation and list filtering. Overall, concurrent React enhances rendering with interruptibility and prioritization, making the application feel faster and more responsive.

UI’s are composed of fast parts, and slow parts in terms of how responsive they are to user interaction. React's concurrent renderer decouples the fast parts from the slow parts by allowing us to render the slow parts in the background without blocking the fast parts, so that each part can respond to user interaction at its own pace. In this talk, we'll explore Concurrent React, understand what problems it solves, how it works and how to leverage it through the use of concurrent features.

Concurrent React Made Easy

Henrique Inonhe

¿Eres un desarrollador cansado de las pruebas de accesibilidad manuales y los largos ciclos de retroalimentación que conllevan? ¿Quieres auditar y probar eficientemente la accesibilidad de tus componentes mientras ahorras tiempo y esfuerzo? ¡No busques más! En esta charla, exploraremos cómo Storybook, una herramienta de código abierto ampliamente utilizada para documentar tus componentes de UI, puede ser utilizada para automatizar las pruebas de accesibilidad.

Automatización de las Pruebas de Accesibilidad para Tu Biblioteca de Componentes

Today's Talk focused on automating accessibility testing for component libraries using Storybook. The importance of web accessibility was emphasized, along with the benefits of incorporating accessibility from the start. Storybook was highlighted as a valuable tool for component-driven development, testing, and identifying accessibility issues. The integration of the accessibility add-on in Storybook allows for component-level insights, efficient feedback loops, and automated accessibility testing. Manual testing and addressing complex issues with screen readers were also discussed.

Are you a developer tired of manual accessibility testing and the long feedback loops it entails? Do you want to efficiently audit and test the accessibility of your components while saving time and effort? Look no further! In this talk, we’ll explore how Storybook, a widely-used open source tool to document your UI components, can be used to automate accessibility testing.

Automating Accessibility Testing for Your Component Library

Praveen Kumar D

Se han desarrollado numerosas y notables nuevas experiencias de UX a lo largo de los años, como tarjetas que muestran una variedad de productos e ítems de listas clickeables con opciones de menú dinámicas, entre otros. Sin embargo, solo unos pocos son conscientes de los desafíos involucrados en la construcción de estas estructuras teniendo en cuenta la accesibilidad, y desafortunadamente, algunas de ellas son completamente inaccesibles. En la charla de hoy, exploraremos algunos de estos patrones de UX web prevalentes y nos adentraremos en los desafíos ocultos que presentan. Si bien podemos ser capaces de mitigar algunos de estos problemas, otros sirven como cuentos de advertencia en accesibilidad.

Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad

Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.

There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible.  In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Nested Interactive Elements: An Nightmare in Accessibility

Cat Johnson

Esta charla trata sobre cómo React Query puede simplificar la gestión de datos en las aplicaciones de React. La charla cubre los conceptos básicos de React Query, incluyendo sus características para la obtención y actualización de datos, el manejo de actualizaciones optimistas, la composición de consultas y mutaciones, y la gestión de errores y reintentos. Al final de la charla, los asistentes tendrán una clara comprensión de cómo React Query puede mejorar la experiencia del usuario y reducir el código repetitivo en sus aplicaciones de React.

Simplificando la gestión de datos en React con React Query

Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.

This talk is about how React Query can simplify data management in React applications. The talk covers the basics of React Query, including its features for fetching and updating data, handling optimistic updates, composing queries and mutations, and managing errors and retries. By the end of the talk, attendees will have a clear understanding of how React Query can improve the user experience and reduce boilerplate in their React applications.

React Advanced Conference 2023

We will be diving deep