Name: React Advanced 2024
Start: 2024-10-25T11:00:00.000Z
End: 2024-10-29T17:00:00.000Z

La noticia más comentada en la comunidad de React este año es probablemente el React Compiler. Todos esperan ser salvados de la plaga de re-renderizados y nunca tener que escribir useCallback/useMemo nuevamente. ¿Pero realmente hemos llegado a ese punto? ¿Puede el React Compiler realmente lograr esas cosas? ¿Necesitamos hacer algo más que activarlo y disfrutar de una vida libre de re-renderizados? Lo ejecuté en algunas aplicaciones del mundo real para encontrar la respuesta. ¿Quieres ver los resultados? En esta charla, echaremos un vistazo a qué es el React Compiler, qué problemas resuelve y cómo se desempeña en ejemplos de código simples y aplicaciones del mundo real.

How React Compiler Performs on Real Code

I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!

The most talked-about news in the React community this year is probably the React Compiler. Everyone is looking forward to being saved from the re-render plague and never having to write useCallback/useMemo again. But are we truly there yet? Can the React Compiler actually achieve those things? Do we need to do anything other than turning it on and enjoying a re-render-free life? I ran it on a few real-world apps to find the answer. Want to see the results? In this talk, we’ll take a look at what the React Compiler is, what problems it solves, and how it performs on simple code examples and real-world applications.

Nadia Makarevich

React Query es una biblioteca popular para mantener el estado asincrónico, más a menudo el estado devuelto de la obtención de datos. Ha crecido tanto en popularidad en los últimos años que ahora se utiliza en casi el 20% de todas las aplicaciones de React. En cierta medida, esto se atribuye a su facilidad de uso y a la gran experiencia del desarrollador. En esta charla, el mantenedor de React Query, Dominik, nos guiará a través de algunas de las decisiones de diseño de la API que se tomaron en React Query para llegar a esa DX. Escucharás historias sobre cosas que salieron bien, pero también sobre compensaciones y errores que se cometieron, y qué lecciones podemos aprender todos de ellos.

React Query API Design – Lecciones Aprendidas

I'm super excited to be here today, giving my first live talk at an in-person conference. Dominik, the maintainer of React Query, walks through the API design decisions, including success stories, trade-offs, and mistakes. Tener Linsley designed React Query's medium-sized query API to be minimal, intuitive, powerful, and flexible. Major versions in open source require marketing efforts, but not primarily for adding new features. TypeScript is crucial for building projects and managing user demands in open source can be challenging. The addition of the max pages option improved performance and avoided unnecessary refetches. Inversion of control gives users flexibility, but mistakes can happen in API design. Open source requires time management and feedback from users. API design is influenced by typing ease and good TypeScript support. Getting involved in open source involves trial and error and joining community platforms like TanStack Discord. Dominik's journey started during the pandemic and he can be found on Twitter, TanStack Discord, and his blog.

React Query is a popular library for maintaining asynchronous state - most often state returned from data fetching. It has grown so much in popularity over the last couple of years that it is now used in almost 20% of all React applications. To some extent, this is attributed to it's ease of use and great developer experience. In this talk, React Query maintainer Dominik will walk us through some of the API design choices that were made in React Query to get to that DX. You'll hear stories about things that went well, but also about tradeoffs and mistakes that were made, and what lessons we can all learn from those.

React Query API Design – Lessons Learned

Dominik Dorfmeister

El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música. Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)

AI para Desarrolladores de React

Hello, everybody, and welcome to our course for today, AI for React Developers. We'll start by talking about AI and JavaScript projects and how to choose a language model. Then, we'll look at streaming interfaces and Next.js hooks for interacting with APIs. We'll learn about stream responses, working with the OpenAI API, and improving code with AI. The workshop also covers creating an assistant for writing documentation, interactive communication with OpenAI API, and creating interview questions. We'll explore the roles and interactions in the OpenAI API, working with the Assistance API in Node, and creating an interactive assistant with context. Additionally, we'll discuss customizing and training AI, using Readline and Next.js, AI with Next.js and Vercel, and scaffolding a Next app. The workshop also covers implementing stream response and user interface, handling errors, and exploring the new v0 UI. Lastly, we'll explore advanced AI tools and upcoming events. Thank you all for being part of the course!

Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app. Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)

AI for React Developers

Eve Porcello

Cuando Remix fue lanzado por primera vez en 2020, su objetivo era proporcionar características a nivel de framework sobre React Router, simplificando la renderización del lado del servidor, la obtención de datos, la gestión del estado y las herramientas de construcción. Ahora, con el lanzamiento de React Router v7, la totalidad de Remix se está fusionando de nuevo en React Router. Este es un gran avance para la comunidad de React ya que React Router impulsa aproximadamente la mitad de todas las descargas de React. En esta masterclass, echaremos un vistazo a cómo sucedió esto y qué significa para el futuro de los frameworks de React.

Cómo React Router se convirtió en un Framework

My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.

When Remix was first released in 2020, its goal was to provide framework-level features on top of React Router, simplifying server-side rendering, data fetching, state management and build tooling. Now, with the release of React Router v7, the entirety of Remix is getting merged back upstream into React Router. This is a huge step up for the React community since React Router powers roughly half of all React downloads. In this talk we'll take a look into how this happened and what this means for the future of React frameworks.

How React Router Became a Framework

Mark Dalgleish

Hablaremos sobre cómo React en sí mismo está agregando nuevas características de manera constante y empujando los límites de las bibliotecas de renderizado. También, sobre el ecosistema y cómo se está expandiendo constantemente.

¿Está React Realmente Muriendo?

Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.

We'll talk about how React itself is adding new features consistently and pushing the boundaries of rendering libraries. Also, about the ecosystem and how that is constantly expanding.

Is React Really Dying?

Jack Herrington

En esta charla, exploraremos cómo podemos usar IA para mejorar la experiencia del usuario haciendo que los modelos de lenguaje grande devuelvan Componentes de React interactivos que definimos para nuestros usuarios. De esta manera, en lugar de instruir a los usuarios sobre qué hacer con el texto, nuestras aplicaciones pueden presentar elementos de interfaz de usuario interactivos directamente en respuesta a una consulta del usuario. Discutimos esto brevemente en <a href="https://podrocket.logrocket.com/generative-ui-react-components-malte-ubl" target="_blank">este episodio de PodRocket</a> donde el CTO de Vercel dice que podría ser un cambio de juego. En esta charla, enseñamos a los desarrolladores cómo implementar dicha funcionalidad en sus aplicaciones.

React Server Components en Aplicaciones de IA

Today we will discuss React server components with AI and how to build a better search experience using them. We will learn how to make a Next.js app AI-enabled using the Vercel AI SDK. The Vercel AI SDK's streamUI function with the GPT 4.0 model will be used to make suggestions interactive. We will explore the use of history and conversation in AI and how to continue the conversation and read the result. The concept of generative UI with the vector database will be introduced, along with querying the database for movies. We will process user queries and return movies based on them. The power of React server components in enhancing UI will be demonstrated. In summary, the Talk covers vector embeddings, natural language search, and generative UI.

In this talk, we will explore how we can use AI to enhance user experience by having large language models return interactive React Components that we define to our users. This way, instead of instructing users on what to do with text, our applications can present interactive user interface elements directly in response to a user query. We discuss this briefly in <a href="https://podrocket.logrocket.com/generative-ui-react-components-malte-ubl" target="_blank">this PodRocket episode</a> where the Vercel CTO says it could be game changing. In this talk, we teach developers how to implement such functionality in their applications.

React Server Components in AI Applications

Tejas Kumar

Panel Discussion: Difficulties of Adopting RSC From a Framework and Library Sides

Aleksandra Sikora

Tobbe Lundberg

Daishi Kato

¿Tiene su aplicación React muchos (y muchos) datos que necesitan ser mostrados tanto en Data Grids como en Charts? ¿Quieren sus usuarios interactuar, analizar y trabajar con estos datos sin comprometer el rendimiento o la fiabilidad? AG Grid proporciona las mejores bibliotecas de React Data Grid &amp; Charts que están llenas de características y ofrecen un rendimiento inigualable mientras son completamente personalizables. En esta masterclass, aprenderás cómo comenzar con AG Grid y AG Charts, y cómo utilizar sus características clave. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid &amp; AG Charts en tu aplicación React.

Visualización de Datos Poderosa con AG Grid & AG Charts

Welcome to the Powerful Data Visualization with aggrid and AgCharts Workshop. The workshop covers installing Ag Grid, defining columns, sorting, filtering, dragging, pinning, and spanning using Ag Grid. It also explores advanced features of Ag Grid and dives into AgCharts, Ag Grid's new charting product. The workshop covers various topics such as getting started with Ag Grid, defining columns and binding data, setting up column definitions and row data, reviewing data and data set, row sorting, retrieving rows and virtualization, filtering and sorting, customizing sorting, default column definitions, custom filters, using filters in AGGrid, cell rendering in AGGrid, computing price value, using value getter to compute order totals, computing cell values and debugging errors, reusable value getters and formatting cell values, value formatter and formatting cell values, cell rendering in AGGrid, enabling cell editing, AG Charts, and configuring axes in AG Charts.

Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid &amp; Charts libraries that are packed with features and provide unbeatable performance whilst being fully customizable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid &amp; AG Charts into your React application.

Powerful Data Visualisation with AG Grid & AG Charts

Brian Love

¡Llamando a todos los desarrolladores de React! Únete a nosotros para una inmersiva masterclass de 4 horas profundizando en React Server Components y Server Actions. Descubre cómo estas tecnologías revolucionarias están transformando el desarrollo web y aprende a aprovechar su máximo potencial para construir aplicaciones rápidas y eficientes. Explora el mundo de React Server Components, combinando sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y experiencia de usuario incomparables. Sumérgete en React Server Actions para ver cómo combinan la interactividad del lado del cliente con la lógica del lado del servidor, facilitando el desarrollo de aplicaciones interactivas sin las limitaciones tradicionales de API. Obtén experiencia práctica con ejercicios prácticos, ejemplos del mundo real y orientación experta sobre la implementación de estas tecnologías en tus proyectos. Aprende temas esenciales como las diferencias entre Server y Client Components, optimización de la obtención de datos, pasando datos de manera efectiva y maximizando el rendimiento con nuevos hooks de React como useActionState, useFormStatus y useOptimistic. Ya sea que seas nuevo en React o un profesional experimentado, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus habilidades de desarrollo web. Mantente a la vanguardia y domina la tecnología de vanguardia de React 19. No te lo pierdas: regístrate ahora y desata todo el poder de React!

Dominando React Server Components y Server Actions en React 19

Welcome to this workshop on mastering React server components and server actions in React 19. React server components are components that execute on the server and are shipped to the client as already rendered components. They reduce the amount of JavaScript sent to the browser, resulting in faster loading times and improved rendering performance. React server components provide an async function that allows for easier programming with asynchronous work and the use of Prisma ORM to retrieve and manipulate data. They can handle server to server calls and allow for asynchronous operations at nested levels. Streaming is used with React server components, and they can be rendered on both the server and the client. Server actions in React Server components enable server-side execution even when JavaScript is disabled, and they can handle form submission and database updates. Error handling and code organization are also important considerations when working with React server components. Overall, React server components are a powerful addition to React that simplifies development and improves performance.

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

Únete a nosotros en el viaje desde el desarrollo frontend con React al desarrollo fullstack con Next.js. Durante esta masterclass, seguiremos el tutorial oficial de Next.js Learn con Eric Burel, entrenador profesional y autor de NextPatterns.dev. Juntos, configuraremos un sitio web con Next.js y exploraremos sus características del lado del servidor para construir aplicaciones de alto rendimiento. - Introducción: descubriendo Next.js y su filosofía centrada en el servidor- Creación de un sitio web multipágina perfectamente optimizado- Entendiendo las capacidades de renderizado del lado del servidor de Next.js- Conclusión: cómo Next.js te empodera como desarrollador de React

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

Today's workshop focuses on the journey from React frontend development to full-stack development with Next.js. Participants will follow the Next.js Learn tutorial, covering topics like styling, optimization, routing, data fetching, search, pagination, and authentication. Troubleshooting installation and running the Next.js application is discussed, along with handling fonts, optimizing images, and resolving hydration errors. The workshop also explores server-side components, database setup, and fetching data in Next.js. The usage of APIs, static and dynamic rendering, and closing remarks are covered as well.

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps. - Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer

The Journey From React Frontend Development to Fullstack Development With Next.js

Eric Burel

Una habilidad que siempre será relevante es el perfilado. No importa el framework, no importa la versión, en algún momento tendrás que profundizar en por qué tu aplicación no está rindiendo al máximo. En esta charla, mostraremos cómo puedes usar React Dev Tools junto con las Dev Tools estándar para identificar y resolver problemas de rendimiento y memoria. Hay algunas joyas ocultas dentro del panel de perfilado de Dev Tools que van más allá de simplemente medir cuánto tiempo se gasta ejecutando una función y las descubriremos juntos, incluyendo nuevas características lanzadas este año.

Perfeccionando Tu Perfilado

A software engineer from AGGrid discusses profiling and optimization in React DevTools and Chrome DevTools. The React DevTools allow for analyzing and optimizing renders, and can help improve Core Web Vitals. Chrome DevTools provide in-depth performance analysis and optimization options. The engineer shares specific strategies for optimizing rendering, animation, and layout thrashing. They also discuss performance profiling and benchmark testing, as well as testing tools and the performance testing process. The speaker emphasizes the importance of exploring resources and metrics in Chrome DevTools.

One skill that will always be relevant is profiling. No matter the framework, no matter the version, at some point you will have to dive into why your application is not performing at its best. In this talk, we will show how you can use React Dev Tools alongside the standard Dev Tools to identify and resolve performance and memory issues. There are some hidden gems within Dev Tools profiling panel that goes beyond just measuring how much time is spent executing a function and we will discover them together including new features released this year.

Perfecting Your Profiling

Stephen Cooper

Playwright permite pruebas confiables de extremo a extremo para aplicaciones web modernas. Soporta Chromium, WebKit y firefox para pruebas en Windows, Linux y macOS, localmente o en CI, ya sea en TypeScript/JavaScript, Python, .NET y Java.En esta charla, exploremos algunas capacidades avanzadas de Playwright y descubramos una gama de características, consejos y trucos que quizás no conozcas, desde dependencias de proyectos hasta API mocking, pruebas de tiempo y más.

Técnicas Avanzadas de Playwright para Pruebas Impecables

Hi everyone, I'm Devi O'Brien, a Principal Technical PM at Microsoft, here to talk about Advanced Playwright Techniques for Flawless Testing. Playwright is reliable end-to-end testing for modern web apps, with tests that run in isolation and fast. It supports multiple languages, auto-waits for elements, retries assertions, and handles iframes and Shadow DOM. Playwright also offers features like code generation, UI mode, HTML reports, and API mocking. You can use annotations and locators in Playwright to provide information on issues and organize tests. API mocking is useful for simulating APIs, and you can mock external links and test date/time functionality. Playwright allows you to test time-sensitive functionality, set up tests and dependencies, and run tests efficiently. Join the Playwright community for support and resources. Thank you all for listening!

Playwright enables reliable end-to-end testing for modern web apps. It supports Chromium, WebKit, and firefox for testing on Windows, Linux, and macOS, locally or on CI, in either TypeScript/JavaScript, Python, .NET and Java.In this talk let's explore some advanced Playwright capabilities and uncover a range of features and tips and tricks that you may not know about from project dependencies to API mocking, testing time and more.

Advanced Playwright Techniques for Flawless Testing

Debbie O'Brien

Aprende cómo construir aplicaciones web rápidas y adaptativas que respondan dinámicamente a las condiciones y el contexto del usuario en esta charla informativa. Descubre los principios y técnicas detrás del diseño adaptativo, incluyendo diseños responsivos e interacciones dinámicas, optimizadas para diferentes navegadores, fortalezas de dispositivos, velocidades de internet, tamaños de pantalla y preferencias del usuario. Explora el papel de la toma de decisiones basada en datos y la analítica de usuarios para adaptar contenido y características de manera rápida y eficiente basándose en estas variables. Obtén ideas prácticas sobre la implementación de aplicaciones web rápidas y adaptativas utilizando varias tecnologías y frameworks. Comprende la importancia de las pruebas de usuario y los ciclos de retroalimentación en la mejora de la aplicación para una experiencia de usuario fluida y rápida. Sal con estrategias accionables para crear experiencias web personalizadas y de alto rendimiento que impulsen el compromiso y el éxito.

Construyendo un Sitio Web Rápido para Cada Visitante

This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.

Learn how to build fast, adaptive web applications that dynamically respond to user conditions and context in this informative talk. Discover the principles and techniques behind adaptive design, including responsive layouts and dynamic interactions, optimized for different browsers, device strengths, internet speeds, screen sizes, and user preferences. Explore the role of data-driven decision-making and user analytics in tailoring content and features quickly and efficiently based on these variables. Gain practical insights into implementing fast, adaptive web apps using various technologies and frameworks. Understand the significance of user testing and feedback loops in refining the application for a seamless and speedy user experience. Walk away with actionable strategies to create personalized, high-performance web experiences that drive engagement and success.

Building a Fast Website for Every Single Visitor

Medhat Dawoud

¿Cuántas veces has hecho esto: crear una API, usar los datos con React y luego empezar de nuevo, una y otra vez? ¿Qué pasaría si pudiéramos hacer una aplicación de React de pila completa que pueda crear interfaces de usuario por sí sola, sin necesidad de escribir ningún código backend y chatear directamente con tus datos? En esta charla, aprenderemos cómo hacer una aplicación que pueda cambiar la apariencia de los datos usando comandos de texto simples y cambios inteligentes de AI. Hablemos con tus componentes.

Chat With Your Components

In this Talk, the speaker discusses how to build smart user interfaces using React and AI. They explore using AI to enhance data interaction in a table component and demonstrate how AI can be used to pre-fill calendar slots in a booking engine. The speaker also explains how to create dynamic UIs with React by adjusting language prompts and specifying UI elements. They introduce LangChain, an open-source framework for building language model applications, and explain how it can be used to generate UIs. The speaker concludes by discussing how JSON data can be used to generate UIs and provides documentation and examples for building UI components.

How many times have you done this: Made an API, used the data with React, and then started over, again and again? What if we could make a full stack React application that can create user interfaces on its own, without needing to write any backend code and directly chat with your data? In this talk, we'll learn how to make an app that can change the way data looks using simple text commands and smart AI changes. Let's talk with your components.

Theodore Vorillas

Construir un negocio es una lucha para ver quién consigue más clientes primero. Tienes que adoptar esa mentalidad al escribir código. Como me dijo una vez un viejo jefe: El código limpio no importará si estamos muertos. Tienes que cambiar tu mentalidad de las mejores prácticas a hacer las cosas. Pero no puedes volverte demasiado loco o la deuda técnica te matará.

Escalando Rápido – Lecciones de Ingeniería de ~15 Años de Startups Tecnológicas

Hey, we'll discuss scaling fast and engineering lessons learned in the last 15 years of tech startups. Scaling involves three things: business, team, and tech. Business scalability relies on sales and customer acquisition costs. Engineering is a tool the business uses. Scaling the team is vital as tech problems are often people problems. Team structure affects architecture and product development process. Organize teams based on purpose, not technology. Spend less time being blocked by other teams. Ship features without getting blocked. Own your own mess. Focus on product engineering partnership. Build faster using feedback cycles. Build appropriate solutions for your use case. Let go of ego and experiment with different approaches. Engineers own their own mess. Avoid work in progress. Finish the work and focus on fixing it later. Have a conversation before writing code. Scaling the tech is easier than you think. Pick an off the shelf design. Save innovation for core parts. Pick existing solutions. Focus on solving the problem. Don't waste time trying to predict future scale. Scale will surprise you. Do what works for your business. Push back on unnecessary complexity. Understand the cost of ideas. Modify the situation to fit existing design. Architecture is like a dependency graph on your code. Reduce architectural complexity by organizing code based on what it does. Use vertical models and avoid creating excessive dependencies. On the client, use vertical modules. On the back end, consider a service-oriented architecture. Start with a monolith and transition to microservices if necessary. Use folders instead of microservices when you have a small team. Use vertical models and contract or type-driven development to define clear APIs and interfaces. Avoid highly interconnected code and duplication. Focus on data structures to avoid complexity and the need for translation layers. Building translation layers can lead to slow user experience. Vertical teams aligned with vertical code allow for fast problem-solving, full control of features, and efficient data handling. Understanding the entire domain enables faster development with fewer bugs.

Building a business is a slugfest to see who gets more customers first. You have to adopt that mindset when writing code. As an old boss told me once: Clean code won't matter if we're dead. You have to shift your mindset from best practices to getting shit done. But you can't go too wild or the tech debt will kill ya.

Scaling Fast – Engineering Lessons From ~15 Years of Tech Startups

Swizec Teller

CSS es más poderoso de lo que usualmente le damos crédito. Veamos juntos cómo podemos hacer uso de CSS para construir juntos capacidades de filtrado completamente funcionales en un componente de emoji-picker, mejorando el rendimiento al mismo tiempo. Usaremos algunas técnicas antiguas y nuevas, y las combinaremos de maneras creativas para convertir una experiencia lenta y con retraso en una capacidad de búsqueda moderna y receptiva. Aprenderemos sobre los avances en CSS y descubriremos el potencial no explotado de CSS para construir interfaces de usuario dinámicas.

CSS Es Más Poderoso De Lo Que Piensas! Construyendo Búsqueda en React con CSS

Hello, everybody. Today, I'm going to talk about how I solved actual challenges in React using only CSS. One of the main packages I maintain is EmojiPicker React, with hundreds of thousands of weekly downloads. It has all the features you'd expect from an EmojiPicker, but the search capability was slow. I managed to fix it using CSS. Let me show you how. The search functionality relies on global state and requires updating each emoji individually, resulting in excessive DOM work. Virtualization or virtual scrolling is not a viable solution due to the non-uniform emoji list. By examining the DOM, I discovered that each emoji had an area label with search-related information. This led me to investigate further and implement a solution from scratch. We create a new component called CSS search, which takes a value as a string. If the value is empty, we return null. We remove all emojis from the emoji list if there are search results. Emojis that match the search term are displayed. Performance is instantaneous. Empty categories are removed using the CSS has attribute. The CSS not and has selectors are used to remove empty categories. A counter is used to display the count of emojis found. By using flexbox and order, we can position the after element at the beginning of the list. CSS nesting allows us to nest everything under the emoji list, simplifying the structure. The performance of the search is still very fast. I created the flareup package, a CSS in JS library specifically for NPM packages. Flareup solves compatibility issues and works on SSR and CSR. Emoji-picker-react uses flareup to render emojis without JavaScript. Flareup places a style element on the DOM, making it easy to use.

CSS Is more powerful than we usually give it credit for. Let's see together how we can make use of CSS to build together fully functioning filtering capabilities into an emoji-picker component, improving performance while at it. We will use some old and new techniques, and combine them in creative ways to turn a slow, laggy experience into a responsive and modern searching capability. We'll learn about the advancements in CSS, and discover the untapped potential of CSS for building dynamic UIs.

CSS Is More Powerful Than You Think! Building React Search in CSS

Evyatar Alush

Tailwind sopló arrastrando a los desarrolladores a dos bandos opuestos. Ya has elegido tu lado, o eres del equipo pro Tailwind o te alejas corriendo. Pero, ¿y si te dijera que hay una tercera opción?  Este marco de CSS debería entrar en juego solo cuando el tipo perfecto de proyecto requiere brisas suaves. En esta charla, con ejemplos ilustrativos, elaboraremos sobre cómo mejorar la experiencia de trabajar con Tailwind CSS usando prácticas simples. Desafiaré tus preconcepciones y responderé la pregunta importante, para qué casos Tailwind es la mejor solución o cuándo es mejor elegir una herramienta CSS alternativa.

5 Mejores Prácticas para Prevenir el Caos en Tailwind CSS

Today we're going to talk about best practices for using Tailwind CSS. Tailwind CSS is a popular and controversial tool. It balloons within developers into two opposing camps. For some tasks, Tailwind is extremely cool. After working with Tailwind for a long time, I have identified two main requirements where Tailwind is suitable, and without them, it's better to choose an alternative tool. The first requirement is the project must have a design system. The second requirement for using Tailwind CSS is that your project must have a component approach. If you have a design system and a component approach, then Tailwind CSS may be a nice option for you. Instead of specifying the same margin at the top or the bottom, you can specify only a vertical one. Second rule while working with Tailwind is group design tokens and name them semantically. Rule number three, keep class ordering. The next advice for using Tailwind will be useful not only for Tailwind, but also when working with any content tools, monitor the bundle size and try to optimize it. The last rule for Tailwind, use sets of style variants to avoid problems when overriding classes. Instead of passing classes arbitrarily via props, define a set of variants for the component. Use fewer utility classes, group design tokens, and name them semantically. Keep class ordering, minimize your build size, and use sets of style variants. Remember that Tailwind CSS is a useful tool, but not the only solution for all projects.

Tailwind blew in sweeping developers into two opposing camps. You have already picked your side, you’re either team pro Tailwind or you run far away. But what if I told you there is a third option?  This CSS framework should come into play only when the perfect type of project calls for gentle breezes. In this talk, with illustrative examples, we'll elaborate on how to improve the experience of working with Tailwind CSS using simple practices. I’ll challenge your preconceptions and answer the important question, for which cases Tailwind is the best solution or when it's better to choose an alternate CSS tool.

5 Best Practices for Preventing Chaos in Tailwind CSS

Nina Torgunakova

Acabas de terminar de construir una nueva y rápida biblioteca JS y no puedes esperar para publicarla en NPM. Pero espera un minuto, ¿qué pasa con los docs? Claro, cualquiera puede juntar un README con algunos fragmentos de código de ejemplo, pero ¿has pensado realmente en cómo diseñar los docs en sí mismos?Únete al mantenedor de Redux, Mark Erikson, mientras observamos formas de estructurar y escribir documentación de manera efectiva para ayudar a tus usuarios a aprender y entender cómo usar tus herramientas, basándonos en años de experiencia construyendo los docs de Redux. Hablaremos sobre patrones para organizar categorías de documentación, consejos para hacer que los docs sean más fáciles de leer y entender, herramientas útiles para trabajar con el contenido de los docs, ¡y más!

Diseñando Documentación Efectiva: Lecciones Aprendidas Construyendo los Docs de Redux

Hi, I'm Mark Erickson, and today I'm very happy to talk to you about designing effective documentation, lessons I've learned writing the Redux docs. We'll discuss organizational techniques, practical tips, writing tutorials, and useful documentation tools. Redux offers learning-oriented tutorials and goal-oriented how-to guides. Other documentation categories include reference guides, explanations, readme files, FAQ pages, and release notes. Tips for organizing and writing documentation: consider the target reader, assume prerequisite knowledge, repeat information, cover topics in multiple areas. Writing tutorials for libraries in TypeScript presents challenges but can be tackled with TypeScript-first approach and keeping examples up-to-date. Engaging tutorials involve interactive exercises, diagrams, and formatting, and should be reviewed and improved based on feedback. Overall, documentation is valuable and worth the effort.

You've just finished building a brand-new blazing fast JS library and can't wait to publish it to NPM. But hold on a minute - what about the docs? Sure, anyone can slap together a README with some example code snippets, but have you actually thought about how to actually design the docs themselves?Join Redux maintainer Mark Erikson as we look at ways to effectively structure and write documentation to help your users learn and understand how to use your tools, based on years of experience building the Redux docs.  We'll talk about patterns for organizing categories of documentation, tips for making the docs easier to read and understand, useful tools for working with docs content, and more!

Designing Effective Documentation: Lessons Learned Building the Redux Docs

Mark Erikson

Cuando se trata de probar código de bibliotecas, el enfoque de la (generalmente increíble) "Testing Library" rápidamente alcanza sus limitaciones: A menudo necesitamos probar rutas de código activas para garantizar garantías adicionales, como un orden específico de cambios en el DOM o un número particular de renders.En cuanto comenzamos a agregar Suspense a la imagen, incluso se vuelve casi filosófico:- ¿Cómo contamos un renderizado que se suspende inmediatamente y cómo lo distinguimos de un renderizado "confirmado"?- ¿Cómo sabemos qué partes del árbol de componentes se volvieron a renderizar? En la base de código de Apollo Client, estamos utilizando el React Profiler para crear un flujo de eventos de renderizado, lo que nos permite cambiar a un método de prueba basado en streams.Después de probar este enfoque internamente durante un año, lo hemos lanzado en una biblioteca que queremos presentar al mundo.También echaré un vistazo breve a otros problemas "relacionados con las pruebas" que están muy fuera de lo normal que hemos encontrado y compartir nuestras soluciones:Cómo probar bibliotecas que agrupan diferentes códigos para React Server Components, ejecuciones de SSR en streaming y el navegador: Pruebas de tus campos de `exports` cada vez más complejos y asegurando que todos esos entornos exporten la forma de paquete que esperas.Incluso echaremos un vistazo breve a cómo renderizar componentes de React en diferentes entornos para probarlos de forma aislada, ya sea en Server Components, Streaming SSR o simulando la hidratación de streams en el navegador.

Más allá de React Testing Library: Pruebas en bibliotecas de React (y código similar a bibliotecas)

Today's talk is called Beyond Testing Library, Testing React Libraries and Library-like Code. The speaker, Lenz Liebertronik, discusses the special requirements for testing libraries, including minimizing re-renders, avoiding tearing, and rendering components granularly. They highlight scenarios where React Testing Library falls short and introduce the Testing Library React render stream as a solution. The speaker demonstrates how to test hooks, multiple hooks, and assert re-renders using different techniques. They caution about potential issues with React upgrades, test-only components, ACT batching, and Suspense boundaries. The speaker shares real-world usage of the render stream library and discusses the limitations of correlating renders with DOM commits. They emphasize the importance of testing libraries and gradually optimizing code. They also mention the benefits of using the testing library and conclude with gratitude and a Dutch lesson.

When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.As soon as we start adding Suspense to the picture, it even gets almost philosophical:- How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?- How do we know which parts of the Component tree rerendered? In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.After testing this approach internally for a year, we have released it in a library that we want to present to the world.I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.

Beyond React Testing Library: Testing React Libraries (and library-like code)

Lenz Weber-Tronic

En esta charla, profundizaremos en el viaje de Wix hacia el logro de un rendimiento web inigualable a través de técnicas avanzadas de división de código en React, abordando los desafíos significativos planteados por grandes paquetes de JavaScript y el uso excesivo del hilo principal.  A medida que la aplicación de Wix se expandió, enfrentando una mayor complejidad y demanda, los métodos tradicionales de optimización de rendimiento se quedaron cortos. Esta presentación trazará la evolución desde importaciones dinámicas básicas hasta estrategias sofisticadas como la división de componentes de React, la separación de lógica del lado del servidor y la adopción de técnicas modernas, incluyendo SSR, Suspense y componentes de servidor de React. Enfatizando la necesidad de soluciones escalables en aplicaciones a gran escala, también discutiremos la implementación del patrón de Inversión de Control (IOC) para una carga eficiente de características.  Es importante destacar que, para cada solución, proporcionaré ejemplos de código tanto del problema como de la solución, adecuados tanto para principiantes como para desarrolladores avanzados de React.  Esta historia no solo muestra nuestra mejora significativa en el rendimiento, sino que también destaca la importancia de evolucionar las estrategias de optimización para alinearse con la escala de la aplicación, ofreciendo ideas sobre la transición de soluciones simples a soluciones avanzadas y robustas para mejorar el rendimiento de aplicaciones web en React.

Escalando el Rendimiento de React: De Técnicas Básicas a Avanzadas de División de Código

I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.

In this talk, we'll dive into Wix's journey towards achieving unmatched web performance through advanced code-splitting techniques in React, tackling the significant challenges posed by large JavaScript bundles and excessive main thread usage.  As Wix's application expanded, facing increased complexity and demand, traditional performance optimization methods fell short. This presentation will trace the evolution from basic dynamic imports to sophisticated strategies like React component splitting, server-side logic separation, and the adoption of modern techniques including SSR, Suspense, and React server components. Emphasizing the necessity for scalable solutions in large-scale applications, we will also discuss the implementation of the Inversion of Control (IOC) pattern for efficient feature loading.  Importantly, for each solution, I will provide code examples of both the issue and the solution, suitable for both beginners and advanced React developers.  This story not only showcases our significant performance improvement but also highlights the importance of evolving optimization strategies to align with the scale of the application, offering insights into transitioning from simple fixes to advanced, robust solutions for enhancing web application performance in React.

Scaling React Performance: From Basic to Advanced Code-Splitting Techniques

Gil Eckstein

Introducción del sistema de diseño en una base de código madura. Permítanme guiarlos a través de nuestros desafíos, herramientas muy útiles para entender su situación actual, herramientas para medir el impacto del trabajo del sistema de diseño, herramientas para hacerlo realidad.

Introducción del sistema de diseño en una base de código madura

Let me walk you through introducing design system into mature codebase loosely based on Clio. Mature codebase challenges: inconsistent components and styling, multiple color palettes, and inconsistent design patterns. Working in siloed squads led to difficult maintenance, slow onboarding, and disjointed user experience. Design system squad realized the need for a plan and data to guide them. We need data to guide us. A React scanner library enabled us to crawl through the code base and understand the components used. Technologies like GitHub Actions, Redshift, and Count were used to store and query the data. The script involved running a scanner, configuring it, and sending the data to Redshift via Fivetran. ReaRscanner provided the pattern for processing data. We collected and sorted data on component usage and imports to identify pain points and track trends. Collaboration was a challenge, so we engaged teams through surveys, office hours, and extensive documentation. Our goal is to achieve over 60% adoption of the design system. We worked on keeping a single source of truth in our design system. Zero Height is our platform for storing component documentation, integrating tools like storybook and Figma, and ensuring alignment across design and code. Design systems are more than components and tokens; they create a shared language and process that facilitate teamwork and alignment.

Introducing design system into mature codebase. Let me walk you through our challenges, very useful tools to understand your current situation, tools to measure the impact of design system work, tools to make it happen.

Introducing Design System Into Mature Codebase

Kasia Jastrzebska

Esta es la historia completa detrás de "Make Real", el experimento viral de IA de tldraw que te permite convertir tu dibujo de baja fidelidad en un sitio web funcional. Es mitad montaña rusa de startup y mitad cuento moral sobre apostar por React, ya que Make Real solo fue posible gracias a la capacidad de poner cualquier componente de React en el lienzo de tldraw. Aquí está toda la perspectiva detrás de escena y todo lo que aprendimos en el camino.

Make Real: la aventura de IA de tldraw

tldraw is a canvas and a whiteboard SDK that can be integrated into React apps. It allows for high-performance rendering using the DOM and React. tldraw's canvas is powerful and can be enhanced with Vision models for image creation and AI utilization. It enables easy iteration and updating of designs based on annotations. tldraw can be used to create UIs, complex applications, interactive things, calculators, ASCII art, and more. It explores the use of AI on the canvas and can generate images, code, flowcharts, and content. tldraw focuses on performance optimization, AI model exploration, security, usability, and accessibility. The Talk also discusses the business model, future plans, and the vision of building a plugin community for the canvas.

This is the full story behind "Make Real", tldraw's viral AI experiment that lets you turn your low fidelity drawing into a functional website. It's half startup rollercoaster ride and half moral tale about betting on React — as Make Real was only possible because of the ability to put any React component onto tldraw's canvas. Here's the full behind-the-scenes perspective, and everything we learned along the way.

Make Real: tldraw's AI Adventure

Steve Ruiz

Si eres un desarrollador experimentado de React Native, es posible que te hayas sentido frustrado por el hecho de que ciertos comportamientos de React simplemente no funcionan como esperabas. Todos hemos intentado usar useLayoutEffect en nuestros proyectos de RN, solo para descubrir que no se comporta exactamente como lo describen los documentos de React. Todo eso cambiará con el nuevo bucle de eventos que llegará a React Native como parte del esfuerzo por acercar React Native a las APIs web.  Prepárate para un viaje salvaje donde profundizaremos en las entrañas de cómo funciona actualmente el bucle de eventos, cómo cambiará y qué significa esto prácticamente para nosotros como desarrolladores de React y React Native.

Understanding the New Event Loop in React Native

I'm going over the new event loop in React Native, which is one of the more interesting parts of the new architecture. The new architecture includes the JSI for synchronous communication between layers, new Native modules for type safety and code sharing, and the Fabric renderer for prioritized rendering and support for modern React 18 features. The React Native event loop works differently from the previous architecture, executing tasks and updating rendering. The React Native team can now schedule JavaScript code within React components to execute at specific times, allowing for control over the execution schedule. React Native can now prioritize rendering urgent events, resulting in a more synchronized and flicker-free UI. The goal of the new event loop specification is to align React Native more closely with the web, providing capabilities and behaviors similar to the web. Migrating to the new React Native architecture aims to minimize fundamental changes for existing codebases and ensure proper support from library maintainers.

If you’re a seasoned React Native developer, you may have been burned by the fact that certain React behaviours just don’t work as you’d expect. We’ve all tried to use useLayoutEffect on our RN projects, only to find that it doesn’t quite behave how the React docs describe it. All of that will change with the new event loop coming to React Native as part of the effort to bring React Native closer to Web APIs.  Strap in for a wild ride where we dig into the depths of how the event loop currently works, how it will change, and what this means practically for us as React and React Native developers.

Mo Khazali

La profunda integración de Next.js entre el cliente y el servidor hace que desarrollar aplicaciones rápidas de JavaScript sea muy sencillo. Y también es la peor pesadilla de tu equipo de seguridad. Descubramos algunos patrones de seguridad para frameworks de renderizado en servidor como Next.js.

Asegurando Aplicaciones Renderizadas en el Servidor – Caso Next.js

Welcome to Securing Server on the Red Applications in the Context of Next.js talk. Next.js brings new challenges for front-end developers with its server-side rendering technologies. We need to consider security in Next.js applications and address the common vulnerabilities listed in the OWASP top 10. Server-side request forgery (SSRF) is a common vulnerability that allows attackers to exploit the server's privileges. Security logging and monitoring failures are critical, as proper setup is necessary to detect attacks. Being cautious with npm packages, addressing identification and authentication failures, and updating vulnerable components are crucial for application security. Database seeding, security headers, and permissions policies are important for application security. It's important to reduce the criticality of an attack, check strict transport security header, and prevent security issues by following best practices. Understanding CSRF vulnerability, image injection vulnerability, and cryptographic failures is important. Broken access control can result in unauthorized access and should be mitigated. Thank you for watching this talk and stay safe!

Next.js deep integration between the client and the server makes developing fast JavaScript applications a breeze. And it's also the worst nightmare of your security team. Let's discover a few security patterns for server-rendering frameworks like Next.js.

Securing Server-Rendered Applications – Next.js Case

Descubre cómo las características concurrentes a menudo pasadas por alto de React, como startTransition, useDeferredValue y Suspense, pueden transformar el rendimiento y la capacidad de respuesta de tu aplicación. Aprende técnicas prácticas para priorizar actualizaciones críticas, manejar estados de carga de manera elegante y crear experiencias de usuario fluidas incluso con interacciones de datos complejas.

El arma secreta de React: Aprovechando las características concurrentes para un rendimiento de primera categoría

I'm going to be speaking about concurrency within React and how you can use it to improve performance within your applications. Concurrency is crucial for optimizing responsiveness and ensuring a good user experience in complex applications. React breaks up the rendering process into render and commit phases, allowing interruption of the render phase for prioritizing user interactions. React's task scheduler handles tasks in small chunks, ensuring a fluid user experience and responsiveness. High-priority tasks include user interactions, while lower priority tasks involve fetching data or rendering long lists. React introduced new hooks, useTransition and useDeferredValue, for handling state update priorities. The deferred value hook allows for deferring the updates of non-critical UI values, while Suspense for Data Fetching improves the performance of data fetching in React applications. Concurrency is useful for handling real-time search inputs, seamless tab or component switching, rendering large lists, and animating transitions. However, there are drawbacks to concurrency, such as potential delays in non-urgent updates and limited benefits for expensive components. Concurrency may add CPU strain and requires an understanding of React's background behavior for effective debugging. Use suspense on parent level components for data fetching. Performance profiling can help test the effectiveness of transition hooks.

Discover how React's often overlooked concurrent features like startTransition, useDeferredValue, and Suspense can transform your application's performance and responsiveness. Learn practical techniques to prioritise critical updates, gracefully handle loading states, and create fluid user experiences even with complex data interactions.

React's Secret Weapon: Leveraging Concurrent Features for Top-Notch Performance

Dara Olayebi

La observabilidad es la capacidad de medir el estado actual de un sistema. Los ingenieros de backend están familiarizándose cada vez más con los 3 pilares de la observabilidad y tecnologías como OpenTelemetry que pueden usarse para instrumentar aplicaciones y diagnosticar problemas. Sin embargo, en el mundo del frontend, estamos rezagados. Únete a mí mientras profundizo en las herramientas y técnicas que podemos usar para instrumentar, monitorear y diagnosticar problemas en nuestras aplicaciones de React en producción. Cubriré agentes RUM y extensiones del marco de React, y las métricas y trazas que proporcionan, cómo combinarlas con el trazado de backend para una imagen holística, y cómo el Monitoreo Sintético y las alertas en plataformas de Observabilidad pueden ayudarnos a ser alertados sobre problemas que afectan a los usuarios en las interfaces que construimos y mantenemos.

Observabilidad para Desarrolladores de React

In this talk, observability in React web applications is discussed, covering Rome agents, open telemetry, and synthetic monitoring. The importance of logs, metrics, and traces in tracking application behavior and identifying issues is explained. The concept of a real user monitoring agent (rum agent) for JavaScript applications is introduced. Instrumenting the rum agent and React applications is explained, along with the caution to be mindful of the bundle size. Traces, open telemetry, and instrumentation are explored, including how Core Web Vitals, traces, and open telemetry can provide insights and enable auto-instrumentation. Synthetic monitoring using Playwright tests and the process of converting tests into monitors with configuration is covered. Finally, running and monitoring definitions in production is discussed, highlighting the ability to evaluate user behavior, simulate activities, and address issues proactively.

Observability is the ability to measure the current state of a system. Backend engineers are becoming more familiar with the 3 pillars of observability, and technologies such as OpenTelemetry that can be used to instrument applications and diagnose issues. Yet in the frontend world, we're behind the curve. Join me as I dive into the tools and techniques we can use to instrument, monitor and diagnose issues in our production React applications. I'll cover RUM agents and React framework extensions, and the metrics and traces they provide, how to combine them with backend tracing for a holistic picture, and how Synthetic Monitoring and alerting in Observability platforms can help us be alerted to issues impacting users in the UIs we build and maintain.

Observability for React Developers

Carly Richmond

La mayoría de los desarrolladores pasan mucho tiempo optimizando las métricas de rendimiento de tiempo de carga, pero la mayor parte de la experiencia del usuario es después de la carga. Entendamos qué significa INP para tu aplicación React, cómo utilizar las nuevas herramientas en torno a las interacciones, como la nueva Long Frame API junto con la próxima métrica INP para optimizar nuestro rendimiento en tiempo de ejecución.

Long Frames y INP – Entendiendo el Rendimiento Post Carga

Welcome to my talk on long frames and INP, understanding the post-load performance. The rail model introduced in 2015 provides recommendations for responsiveness and organizing JavaScript work around user input. Metrics like FCP, FMP, and LCP measure visual completeness, while metrics like first interactive and CPU idle assess CPU idleness. Total blocking time measures the impact of long tasks on page responsiveness, and TTI assesses when the browser can respond to interactions reliably. INP is a user-centric responsiveness metric that encompasses all potential causes of slow interactions. The long animation frame API improves attribution and helps pinpoint performance problems. Tools like Vercel toolbar and trace viewer on PerfLab can visualize interaction to next paint. INP and long animation frames provide valuable insights for improving web experiences.

Most developers spend a lot of time optimizing for load time performance metrics, but most of the user's experience is after load. Lets understand what INP mean to your React application, how to utilize the new tolling around interactions such as the new Long Frame API alongside the upcoming INP metric to optimize our runtime performance.

Long Frames and INP – Understanding the Post Load Performance

Vinicius Dallacqua

React portals + RxJs = micro frontends en esteroides.En bettermarks, estamos migrando una aplicación de AngularJS a React usando micro frontends. Imagina un panel de control con widgets de diferentes frontends dependiendo de permisos y configuraciones sin acoplamiento.Implementamos una solución confiable para nuestros micro frontends - ¡y sí, podemos incrustar componentes de React dentro de AngularJs!Mostraré nuestra solución y demostraré cómo esto puede ayudarte a construir aplicaciones más robustas al intentar romper las nuestras.

Accidentalmente Construimos un Plugin SDK para Micro Frontends

Welcome to the talk on Microfrontends and Betamax. The speaker shares their experience of accidentally building a plugin SDK for microfrontends. They discuss the goals and bootstrapping process, emphasizing the importance of adaptability and separation of concerns. The use of behavior subjects and portal rendering is explained, along with the composition and resilience of microfrontends. The speaker demonstrates rendering REC.js within AngularJS and highlights the challenges of handling communication and deployment. They also discuss managing breaking changes, local development, testing, and shared dependencies. The talk concludes with a humorous anecdote and contact information for further engagement.

React portals + RxJs = micro frontends on steroids.At bettermarks, we are migrating an AngularJS app to React using micro frontends. Picture a dashboard with widgets from different frontends depending on permissions and settings without coupling.We implemented a reliable solution for our micro frontends - and yes, we can embed React components within AngularJs!I'll showcase our solution and demonstrate how this can help you build more robust applications by trying to break our.

We Accidentally Built a Plugin SDK for Micro Frontends

André Bauer

He estado desarrollando un framework de React llamado Waku, que se centra en React Server Components (RSC). Waku soporta Acciones del Servidor, permitiéndonos llamar funciones en el servidor desde el cliente. En esta charla, explicaré cómo se implementan las Acciones del Servidor en el framework. Para habilitar las Acciones del Servidor, el framework transforma (o compila) el código del usuario. Aunque los usuarios no necesitan conocer el proceso detallado de esta transformación, entenderlo puede proporcionar un mejor modelo mental para trabajar con Acciones del Servidor.

Cómo un Framework RSC Habilita Acciones del Servidor

I'm Daisuke Kato, an open source developer. I've developed React libraries like Zest, Jota, and Valsio. Now, I'm working on a new React framework, Waku. It's a team project that started a year and a half ago. Recently, we added support for server functions. This talk is about server functions and React Server Components (RSC), which allows running React on a server. RSC includes server components and functions and can render components at build time. It leverages serialization provided by a React library. Server components are an extension that allows rendering on the server and merging with client components. Let's explore the implementation with code. RSC allows the use of server and client components. The server serializes the client component into the RST payload. A client reference acts like a URL and is used to retrieve the actual client component. Creating a client reference involves code transformation. Server functions allow the client component to call a function on the server. Server function and client component are both functions that need to be serializable. Creating server references has multiple ways. The framework transforms user code for different situations. Waku now supports server functions. Supporting server function is a challenging task, but we've done it. Thank you for your talk.

I've been developing a React framework called Waku, which focuses on React Server Components (RSC). Waku supports Server Actions, allowing us to call functions on the server from the client. In this talk, I will explain how Server Actions are implemented in the framework. To enable Server Actions, the framework transforms (or compiles) user code. While users don't need to know the detailed process of this transformation, understanding it can provide a better mental model for working with Server Actions.

How an RSC Framework Enables Server Actions

Las bases de datos tradicionales a menudo obstaculizan el flujo de trabajo de los desarrolladores de React. Nuevos enfoques, incluidas las soluciones serverless, están revolucionando el manejo de datos en aplicaciones React. Esta charla explora cómo los paradigmas modernos de bases de datos permiten la seguridad de tipos de extremo a extremo, crean flujos de trabajo ergonómicos y apoyan la iteración rápida. Aprende cómo estas bases de datos de próxima generación se integran con React para simplificar el desarrollo y aumentar la productividad, ayudándote a construir aplicaciones más eficientes y de mejor rendimiento.

Explorando Bases de Datos Modernas en Aplicaciones React

I'm going to be talking about modern databases in the React ecosystem. The development work used to be simple, with front-end and backend developers working separately. However, with the rise of Node.js and full stack frameworks like Next.js, the ecosystem has evolved. Now, front-end developers are often writing back-end code, and databases have become a crucial component. In this talk, we'll explore the modern solutions and their strengths when it comes to databases. We'll discuss the changes in the databases world and how React and other frameworks have made accessing databases easier. Serverless databases simplify the complexity of managing databases, but there are considerations like vendor lock-in and limited customization options. AI databases with vector functionality provide deeper searches on unstructured data. Multimodal databases like SurrealDB allow for different kinds of data in one storage. Tools like Prisma, Drizzle, and EdgeDB provide good type safety and ease of use. EdgeDB is a graph relational database that combines SQL and GraphQL, making querying relations easier. Database selection is not permanent, and it's important to consider user needs and stay informed about modern trends. Early adoption of cutting-edge databases comes with risks, but also full-time support. Using the best tool for the job is crucial, and trying new tricks for specific data is recommended.

Traditional databases often hinder React developers' workflow. New approaches, including serverless solutions, are revolutionizing data handling in React apps. This talk explores how modern database paradigms enable end-to-end type safety, create ergonomic workflows, and support rapid iteration. Learn how these next-gen databases integrate with React to simplify development and boost productivity, helping you build more efficient and performant applications.

Exploring Modern Databases in React Applications

El ecosistema de JavaScript ha evolucionado significativamente, con Bun.js marcando un hito notable. Construido desde cero en Zig, Bun.js es un entorno de ejecución de JavaScript todo en uno que cuenta con un gestor de paquetes integrado, empaquetador, ejecutor de pruebas y un entorno compatible con Nodejs diseñado para las crecientes demandas de la computación en el borde y las aplicaciones del lado del servidor. Mi presentación explorará los principios fundamentales de Bun.js, destacando sus puntos de referencia de rendimiento frente a entornos tradicionales como Node.js, soporte sin fisuras para TypeScript, marco de trabajo sin configuración y características innovadoras como recarga en caliente incorporada y operaciones de archivo eficientes.

¿Es Bun 'Realmente' Más Rápido?

Welcome to React Advanced London. Today's agenda: what is bun? Features, benchmark, demo, key takeaways. Bun provides a better developer experience, faster CI, and decreased app file size. Building bun on top of Zig prioritizes performance, stability, and compatibility. Install bun with npm or download the binary from the official website. Bun is a comprehensive development toolkit with a fast and efficient package manager. Learn how to benchmark CLI commands using Hyperfine with flags. Compare different package managers. Bond is fast and provides a few features in its package manager: install, add, remove, update, link. Test the bond test runner against vtest and jest using hyperfine. Discover the features supported by the test runner and the importance of bundling in JavaScript applications. Learn about the main.js code, the performance comparison of different bundlers, and the features offered by Bun, including loaders and macros. Explore macros in Bonn and how to optimize the code by including the type macro. Discover the benefits of Bonn, such as reducing CPU usage and fast installation of node dependencies.

The JavaScript ecosystem has evolved significantly, with Bun.js marking a notable milestone. Built from the ground up in Zig, Bun.js is an all-in-one JavaScript runtime featuring an integrated package manager, bundler, test runner, and Nodejs-compatible environment designed for the growing demands of edge computing and server-side applications. My presentation will explore Bun.js's foundational principles, highlighting its performance benchmarks against traditional runtimes like Node.js, seamless TypeScript support, zero-configuration framework, and innovative features such as built-in hot reloading and efficient file operations.

Is Bun 'Actually' Faster?

Devlin Duldulao

Para desarrolladores y diseñadores, los componentes son unidades únicas y flexibles para componer diseños completos. Para los creadores de contenido, pueden atrapar datos reutilizables en decoraciones de un solo uso.

Priorizar el Contenido Sobre los Componentes

Hi there. I want to talk about content editable websites and the importance of understanding the content model of a web page. Separating the content from its presentation is the key thought behind this talk. But if we're looking at the content itself, we're actually focusing on what those things are, not what they happen to be rendered into. The outcome of this talk is to break the cycle of content management systems being used to house data for what it looks like. Instead, we should focus on explicit curation versus content-driven experiences, moving away from explicitly curated experiences towards content-driven experiences. Let's put this into practice and build a website. Components aren't bad, but we need to think about the props that go into them. The problem arises when the content structure is modified to match the appearance instead of prioritizing the content itself. Let's correct these mistakes and prioritize the content over the components. Modeling the content structure instead of specific components allows for flexibility and a better content editing experience. Prioritizing content over components ensures a more relatable authoring experience and longer-lasting designs. Start thinking about content early and have conversations before diving into design and development.

For developers and designers, components are unique, flexible units to compose complete layouts. For content creators, they can trap reusable data into single-use decorations.

Prioritise Content Over Components

Simeon Griggs

Más a menudo de lo que parece, el rendimiento comienza con cómo se cargan los datos en tu aplicación. ¿Qué datos tienen dependencias? ¿Qué datos son críticos para la página? ¿Qué datos son variables? ¿Estáticos? ¿Personalizados? ¿Disponibles sin conexión? En esta charla, usaremos Remix para explorar cómo diferentes estrategias de carga de datos pueden mejorar la experiencia de tu usuario.

Turning It up to Eleven

Welcome to Turning It Up to 11 at React Advanced. Hydrogen, an eCommerce framework built on top of Remix, focuses on efficient data loading. Loading data in parallel using promise.all is four times faster than loading in a waterfall manner. Split promise.all into two when handling data dependencies. Caching static data can significantly improve page load time. Optimize product pages by reducing awaits and prioritizing essential content. Use suspense boundaries and skeleton UI for optimal data loading. Place non-blocking requests before primary data request for better performance. Remix client cache handles caching automatically. Consider data dependencies and prioritize critical content.

More often than not, performance starts with how data is loaded in your app. Which data has dependencies? Which data is critical to the page? Which data is variable? Static? Personalized? Available offline? In this talk, we'll use Remix to explore how different data loading strategies can improve your user’s experience.

Bret Little 

Los desarrolladores de front-end a menudo enfrentan el desafío de construir interfaces de usuario que necesitan actualizaciones frecuentes para mantenerse al día con los requisitos comerciales cambiantes y las preferencias de los usuarios. Esto puede llevar a ciclos de lanzamiento lentos y frustración tanto para los desarrolladores como para los usuarios. La Interfaz de Usuario Controlada por el Servidor (SDUI) ofrece una solución al trasladar la lógica de la interfaz de usuario al backend, permitiendo actualizaciones rápidas sin requerir aprobaciones de la tienda de aplicaciones o implementaciones complejas. Esta charla explorará cómo SDUI, combinado con React, capacita a los equipos para construir aplicaciones flexibles, mantenibles y rápidamente adaptables que brindan experiencias de usuario excepcionales.

Interfaz de Usuario Controlada por el Servidor: Construyendo Aplicaciones Dinámicas con React

In this Talk, Deepanshu discusses the concept of server-driven UI (SDUI) and its benefits. SDUI shifts the responsibility of determining the UI from the client to the server, enabling dynamic changes without touching client-side code. React's component-based architecture makes it a natural fit for SDUI, allowing for flexibility and real-time control. The server sends a schema that guides the UI structure, and React components dynamically render the UI based on the schema. SDUI enables real-time updates, personalized experiences, and enhances the user experience. However, it also presents challenges such as increased server load and managing state. Examples of companies using SDUI include Airbnb, Spotify, Netflix, and Amazon.

Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences.

Server-Driven UI: Building Dynamic React Applications

Dipanshu Gupta

El teléfono Android más vendido en 2023 es 8 veces menos potente que dispositivos de gama alta como el Pixel 8. Esta brecha destaca un punto ciego común entre los desarrolladores de Android: a menudo usamos dispositivos potentes y no necesariamente detectamos problemas de rendimiento en nuestras aplicaciones. Sin embargo, las pruebas de rendimiento tradicionales a menudo se consideran una tarea engorrosa y que consume mucho tiempo, lo que lleva a muchos a omitirlas en favor de lanzar nuevas funciones. Pero, ¿y si hubiera una manera de simplificar este proceso, haciendo que las pruebas de rendimiento sean tan sencillas como ejecutar un solo comando? Esta charla presenta cómo podemos hacer realidad este sueño: ¡usando AI para explorar automáticamente nuestra aplicación y combinándola con las herramientas adecuadas de medición de rendimiento, podemos obtener auditorías de calidad automatizadas de nuestras aplicaciones!

Performance Testing Is Hard. Can AI Help?

Hi everyone, I want to share a story about my experience as a junior developer working with a client who had strict technical standards. They required high performance for web and mobile apps, but lacked a measurable way to determine performance. To address this, I created a tool called Flashlight, similar to Lighthouse, that measures mobile app performance. Flashlight provides performance scores and can run end-to-end tests to explore the app. The speaker's dream is to have an easy way to determine app performance without extensive testing. Using AI to automate the tedious task of exploring an app is the speaker's proposal. The speaker explains that the repository for the app exploration tool is open source and will be shared later. The tool requires commands to be run, such as logging in and performing a search. The AI tool helps identify performance issues, suggests using React DevTools for debugging, and recommends using FlashList instead of FlatList in React Native. The AI can continue after errors occur, and controlling the AI's completion of goals can be achieved by adding a human or another AI agent manager into the loop. AI in end-to-end testing is gaining popularity, with companies launching AI-based testing tools. The goal is to automate app exploration using AI and ensure quality checks for performance, accessibility, and security. AI can help QA engineers by automating repetitive tasks and allowing them to focus on more important aspects. The cost of performing one test case using the 4.0 Mini model is usually less than one cent. AI testing with Flashlight is still experimental, but the non-AI part is reliable. Future improvements include running on CI and easy iteration on multiple projects.

The top-selling Android phone in 2023 is 8x less powerful than high-end devices like the Pixel 8. This gap highlights a common blind spot among Android devs: we often use powerful devices and don't necessarily spot performance issues in our apps. However, traditional performance testing is often seen as a cumbersome and time-consuming task, leading many to skip it in favor of pushing out new features. But what if there was a way to simplify this process, making performance testing as straightforward as running a single command? This talk presents how we can make this dream a reality: by using AI to automatically explore our app and combine it with the proper performance measuring tools, we can essentially get automated quality audits of our apps!

Alexandre Moureaux

Knockout lo tuvo primero, Vue siempre lo estuvo ocultando, Solid lo hizo popular, y ahora Svelte y Angular también lo están integrando: reactividad basada en signals. Si todos estos otros frameworks se apoyan en este primitivo especial, ¿debería React hacer lo mismo? En esta charla, examinaremos los inconvenientes menos discutidos de los signals y explicaremos por qué creo que React debería apegarse a su enfoque actual de valores y funciones simples.

Por Qué React No Debería Adoptar Signals

Today I want to talk about why React should not adopt signals. By adopting signals in React, we can automatically track dependencies for effects and memos, leading to more efficient component rendering. Accessing specific parts of the JSX that read signals allows for fine-grained reactivity across component boundaries. Adopting signals in React requires migrating to single execution components, which only update specific parts of the application. This can become complex when dealing with components that read from different signals. In contrast, React assumes everything can change and enforces this assumption through linters and compilers, leading to more robust code and easier updates. If you're interested in signals in React or need performance improvements, let's chat!

Knockout had it first, Vue was always hiding it, Solid made it popular, and now Svelte and Angular are also integrating it: reactivity based on signals. If all these other frameworks lean on this special primitive, should React follow suit as well? In this talk, we will examine the less-discussed downsides of signals and explain why I believe React should stick to its current approach of plain values and functions.

React Advanced 2024

We will be diving deep