Name: React Day Berlin 2024
Start: 2024-12-13T12:00:00.000Z
End: 2024-12-16T20:00:00.000Z

Kristiyan Velkov

Lera

Sophie Kolbe

Rafael Piazdecki

Kræn Hansen

Shivay Lamba

Irina Baeva

Stefan Wille

Aleksei Podgaev

 Tapas Adhikary

Daria Shabala

Rohit Singh

Seungho Park

Burak Güneli

Eric Burel

Dipanshu Gupta

Agnieszka Labonarska

Violina Popova

Joanna Otmianowska

Siddharth Kshetrapal

Johannes Goslar

Hunor Márton Borbély

Oleksii Levzhynskyi

Giulio Zausa

Daishi Kato

Andreas Roth

Mangirdas Darguzis

Rosario Terranova

Petra vos

Kirill Jegorov

Michael Seifarth

Adrian Guzinski

Richard Strand

Aprende patrones de React ampliamente utilizados, incluyendo HOCs, Compound Components, Provider Patterns, Functions as Child, y Portals, para escribir código más limpio y eficiente y crear aplicaciones escalables y mantenibles.Visión general En esta masterclass, los espectadores aprenderán sobre patrones clave de React que pueden hacer su código más eficiente, legible y mantenible. Presentaremos cada patrón, explicaremos cómo funciona y demostraremos ejemplos prácticos. Al final de la sesión, los participantes tendrán una comprensión sólida de cómo usar estos patrones en sus proyectos.Objetivos de aprendizajeHOCs Compound Components Provider Patterns Functions as Child Portals Modularidad Mantenibilidad Aplicación en el mundo real.

React Patterns Made Simple

Let's get started with React patterns that promote modular and maintainable code. We'll cover higher-order components, compound components, starter pattern, function as children, and portals. These patterns will help you write cleaner code, improve team collaboration, and make your apps more scalable. We'll also explore the composition pattern for form handling, composable components, provider pattern, and compound pattern. Additionally, we'll delve into the portal pattern and its use in rendering components outside the normal DOM hierarchy. Overall, this Workshop provides a comprehensive overview of various React patterns and their benefits for building reusable and efficient UI components.

Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can make their code more efficient, readable, and maintainable. We'll introduce each pattern, explain how it works, and demonstrate practical examples. By the end of the session, participants will have a solid understanding of how to use these patterns in their projects.Learning GoalsHOCs Compound Components Provider Patterns Functions as Child Portals Modularity Maintainability Real-world Application.

React Patterns Made Simple 

Adrian Hajdin

React Query es una biblioteca popular para gestionar el estado asíncrono, más a menudo el estado devuelto por la obtención de datos. Su popularidad ha crecido significativamente en los últimos años, con casi el 20% de todas las aplicaciones React ahora utilizándola. En esta charla, el mantenedor Dominik explorará el otro lado, los aspectos menos favorables de React Query y las situaciones en las que puede que no sea la mejor opción. Ninguna biblioteca es perfecta; cada elección implica compromisos. Al final de esta charla, tendrás una mejor comprensión de las limitaciones de React Query y por qué sigue siendo una opción atractiva a pesar de ellas.

React Query - Las partes malas

React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.

React Query is a popular library for managing asynchronous state—most often state returned from data fetching. Its popularity has grown significantly over the past few years, with nearly 20% of all React applications now using it. In this talk, maintainer Dominik will explore the other side—the less favorable aspects of React Query and situations where it may not be the best fit. No library is perfect; every choice involves trade-offs. By the end of this talk, you'll have a better understanding of React Query's limitations and why it remains a compelling choice despite them.

React Query - The Bad Parts

Dominik Dorfmeister

Quizás no sepas qué es React Flight, pero probablemente hayas oído algo sobre React Server Components. ¿Quieres entender cómo funcionan los RSC? Mi consejo es comenzar desde el nuevo protocolo de comunicación detrás de ellos, cuyo nombre es, adivina qué, React Flight. En esta charla, mostraré, paso a paso, cómo este protocolo habilita algunas de las características más interesantes de los RSC (SSG, SSR, contenido en streaming, componentes de servidor y cliente, etc.), al mismo tiempo revelando algunas sorpresas inesperadas: por ejemplo, ¿sabías que puedes usar RSC sin un servidor?

Conoce React Flight y Conviértete en un Experto en RSC

My name is Mauro and I work for a company called Doubleloop in Italy. Today, I'm going to share my learning journey through puzzles and challenges related to React Server Components (RSC). RSC allows for server-side rendering and streaming of components. React flight, a protocol used to serialize and share rendering jobs, is a key feature of RSC. RSC can be used without a server, known as React Serverless Components. Using RSC, different types of content can be switched using the useState hook. RSC can be effectively used on a server by starting Node.js with a specific flag. Client-only components recognized by RSC can be executed on the client. React Streaming Components introduces the streaming concept and allows for continuous updates of the page. Advanced features of React Streaming Components include asynchronous rendering, suspense, and recursion. The React Strange Constraints challenge focuses on optimizing rendering by sending the initial page as HTML. The use of a proxy and RSE payload allows for client hydration of RSC. The possibility of using languages other than JavaScript, such as Rust, for server components is explored. RSC has the potential to become a language-agnostic protocol. The meaning of client-server roles in RSC can be extended. RSC offers streaming capabilities and the ability to balance server and client work. Infinite streaming is possible with server sockets. RSC hydration is believed to be faster than regular hydration. The Talk concludes by encouraging questions during the Q&A session.

Maybe you don't know what React Flight is, but you probably heard something about React Server Components instead. Do you want to understand how RSCs work? My advice is to start from the new communication protocol behind it, whose name is, guess what, React Flight. In this talk I will show, step by step, how this protocol enables some of the most interesting RSC features (SSG, SSR, streaming content, server and client components, etc.), at the same time revealing some unexpected surprises: for example, did you know that you can use RSC without a server?

Meet React Flight and Become a RSC Expert

Mauro Bartolomeoli

Introducción al nuevo formato de configuración plana de ESLint y vea cómo puede traer nuevas posibilidades y mejoras a su flujo de trabajo y experiencia de desarrollo.

ESLint Uno para Todos Hecho Fácil

Hello everyone! I'm Anthony Fu, a coaching member of Vit, Vue, and Nuxt. Today, I'll share my findings and practices in exploring ESLink and its ecosystem. ESLink v9.0 released 7 months ago with the new FlatConfig, which simplifies plugin configuration and provides full control and customization in JavaScript. Migrate legacy config to FlatConfig with eslink-migrate-config CLI and use eslink-config-inspector for visualized step tool. Flag config utilities make config customization easier and allow project-aware configs. ESLink is a powerful AST toolkit and can be used as a formatter. Use ESLink for maintaining stylistic rules and customize it to fit your project's needs.

Introduction to ESLint's new flat config format and see how it can bring new possibilities and enhancements to your development workflow and experience.

ESLint One for All Made Easy

Anthony Fu

Componentes del Servidor React en Aplicaciones de IA

Good morning, React Day Berlin! Today we'll discuss the intersection of AI and React server components. AI engineering is like salt for React developers, enhancing product experiences. Generative UI uses AI to generate text and code, and we'll build a React app using server components with generative UI. AI can improve movie search by inferring context, and we'll build a collaborative movie search project. Implementing AI search involves creating an AI context and setting UI state. We can enhance the UI by adding a system prompt and creating an AI agent for rich UI. The generate function acts as a generator for the virtual DOM. Memory functionality and interactive movie components can enhance the UI further. The future possibilities include AI-generated UI for e-commerce and personalized recommendations. React server components and the intersection of AI and UI are essential for UI engineers. AI SDK is MIT licensed and available for further discussions.

React Server Components in AI Applications

Tejas Kumar

Hoy en día, la mayoría de las aplicaciones de IA envían datos a proveedores de nube LLM como OpenAI, lo que genera preocupaciones de privacidad. Esta masterclass ofrece una forma alternativa y enfocada en la privacidad para construir aplicaciones de IA ejecutando LLMs localmente con Ollama, manteniendo todo local en tu computadora. Este enfoque permite evitar enviar información sensible a servidores externos. La masterclass también destaca la capacidad de LangChain para crear agentes de IA versátiles capaces de manejar tareas de manera autónoma creando embeddings para los datos. Así que ven a aprender cómo puedes construir la próxima generación de aplicaciones React enfocadas en la privacidad impulsadas por LLMs locales. La masterclass cubre los siguientes temas: 1.Visión general de los problemas de privacidad de los LLMs basados en la nube y la importancia de ejecutar inferencias de LLMs locales. 2.Insights detallados sobre la generación de embeddings con herramientas como Ollama y demostración de cómo los agentes de LangChain pueden realizar tareas como la resumisión de documentos e interacciones con APIs, todo mientras se mantiene la privacidad de los datos en una aplicación NextJS / React. 3.Descubrimiento de casos de uso prácticos para este enfoque.

Construir aplicaciones React enfocadas en la privacidad con Ollama, NextJS/React y LangChainJS

Welcome to the React Day Berlin online workshop on building privacy-focused React applications with Olama, NextJS, React, and Langstream JS. JavaScript libraries like TensorFlow.js, Transformers.js, and Onix enable developers to build AI-powered applications easily. Running AI models locally in the browser eliminates the need for a dedicated server and expensive GPUs. Lankchain is a tool that helps execute different AI models, while vector search allows finding similar or related data. Prompt engineering techniques can be used to influence the output of language models. Implementing chat OLAMA and few-shot prompting can generate more structured and personalized responses. Retrieve augmented generation (RAG) enhances language model responses by retrieving relevant context from a vector database. Open embeddings can be used as an alternative to TensorFlow embeddings. The workshop covers implementing RAG, prompt engineering, and tweaking language model responses.

Today, most of the AI applications send data to LLM cloud providers like OpenAI, raising privacy concerns. This workshop an alternative and privacy focused way to build AI applications by running LLMs locally with Ollama that keep everything local on your computer. This approach allows to avoid sending sensitive information to external servers. The workshop also highlights LangChain's ability to create versatile AI agents capable of handling tasks autonomously by creating embeddings for the data. So come learn how can you build the next gen, privacy focused React application powered by Local LLMs. The workshop covers the following topics: 1.Overview of cloud-based LLMs privacy issues and the importance of running Local LLM inferencing. 2.Detailed insights into generating embeddings with tools like Ollama and demonstrating how LangChain agents can perform tasks such as document summarisation and API interactions, all while maintaining data privacy in a NextJS / React application. 3.Discovering practical use-cases for this approach.

Build Privacy focused React Applications with Ollama, NextJS/React and LangChainJS

Codifica Menos, Crea Más: Desarrollo de Aplicaciones Impulsado por IA para Desarrolladores de React.Únete a nosotros en una masterclass diseñada para desarrolladores de React ansiosos por aprovechar el poder de la IA para agilizar su proceso de desarrollo de aplicaciones. En "Codifica Menos, Crea Más", aprenderás a construir aplicaciones utilizando el Cursor IDE con el poder de la IA y una codificación manual mínima.Explora cómo Cursor, un editor de código mejorado con IA, revoluciona tu experiencia de codificación al integrarse perfectamente con tu flujo de trabajo existente. Descubre sus capacidades avanzadas: predecir tus próximas ediciones, ofrecer sugerencias de código en tiempo real y comprender la arquitectura de tu proyecto. Esto te permite canalizar tu energía hacia la creatividad y la innovación en lugar de lidiar con la sintaxis y tareas repetitivas.Te guiaremos a través de la inicialización de un proyecto Next.js, demostrando cómo utilizar herramientas de IA para crear aplicaciones dinámicas y receptivas de manera eficiente. Al concluir la masterclass, poseerás las habilidades para construir software sofisticado con un esfuerzo de codificación reducido, lo que te permitirá convertirte en un desarrollador más productivo e innovador.Ya seas un desarrollador de React experimentado o nuevo en la codificación asistida por IA, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus proyectos de desarrollo al siguiente nivel.

Aplicación Next.js lista para producción con Cursor AI

Welcome to the workshop on production-ready Next.js applications using the Cursor AI editor. We'll build a science fiction movie browsing application and learn how to use AI in application development. The AI may have some issues, but we'll learn how to fix them and do code reviews with its help. The Cursor IDE, with its AI capabilities, offers predictions, documentation reading, and architectural suggestions. Cursor is an intermediary tool that allows you to use different language models. It provides additional UI capabilities and AI assistance. Cursor also has chat and composer tools for interactive coding. We'll use Cursor to create a landing page, add database integration, and implement different features. The workshop covers code review, refactoring, and AI's impact on programming. AI has limitations, but it has the potential to greatly impact the development process.

Code Less, Create More: AI-Driven App Development for React Devs.Join us for a workshop designed for React developers eager to harness the power of AI to streamline their app development process. In "Code Less, Create More," you'll learn how to build applications using the Cursor IDE with the power of AI and minimal manual coding.Explore how Cursor, an AI-enhanced code editor, revolutionizes your coding experience by seamlessly integrating with your existing workflow. Uncover its advanced capabilities: predicting your next edits, offering real-time code suggestions, and comprehending your project's architecture. This allows you to channel your energy into creativity and innovation rather than grappling with syntax and repetitive tasks.We'll guide you through initializing a Next.js project, demonstrating how to utilize AI tools to efficiently craft dynamic, responsive applications. By the workshop's conclusion, you'll possess the skills to construct sophisticated software with reduced coding effort, empowering you to become a more productive and innovative developer.Whether you're a seasoned React developer or new to AI-assisted coding, this workshop will equip you with the knowledge and tools to elevate your development projects to the next level.

 Production-ready Next.js App with Cursor AI

Maurice de Beijer

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 una montaña rusa de startup y mitad un 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: Tldraw’s Accidental AI Play

I'm Steve Ruiz, the founder and CEO of Tealdraw. TLDR is a canvas app in React that allows developers to build with their SDK. TLDR pays attention to details that enhance the canvas experience and can be used to interact with different elements. TLDR's demos showcase its versatility, but may not perform well on social media. TLDR's AI collaboration features allow users to quickly turn their drawings into AI-generated images. The Make Real project helps users create user interfaces by drawing and providing prompts, generating working prototypes. The system behind Make Real can handle complex interactions and ambitious projects. OpenAI integration and the Steel Draw Computer enable building workflows and multi-stage generations. The goal is to bring the Canvas from being specialized to a primitive for the web. Teal Draw is free for open source and non-commercial use, with options to purchase licenses for additional features.

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.

Steve Ruiz

Nuestra búsqueda para hacer que nuestro producto sea más rápido y más eficiente nos obligó a reevaluar nuestra solución de gestión de estado. Desafortunadamente, más de una vez: en el transcurso de dos años migramos de Redux a Zustand a Jotai, luego de vuelta a Zustand (esta vez con algunos trucos elegantes) y finalmente a una solución personalizada. ¿Deberías hacer lo mismo para averiguar qué biblioteca se adapta mejor a tu caso de uso? ¿Es realmente necesaria una solución personalizada? Probablemente no, y para evitar que cometas los mismos errores que nosotros, quiero contarte lo que realmente importa, así como algunas cosas importantes que aprendimos durante este doloroso viaje.

From Redux to Zustand to Jotai to Zustand to Custom: Nuestra Historia de Horror de Gestión de Estado

Today's Talk is about Plux, a TypeScript application built with React and Three.js. The speaker discusses the challenges they faced with state management and their journey of switching libraries multiple times. They started with Redux but later introduced GSDAN, a faster and easier-to-maintain state management library. They optimized performance using selectors but realized it became a problem when dealing with documents with many nodes. They replaced Zustand with Jotite for better performance but encountered limitations and ultimately implemented a custom store, resulting in a significant improvement. The speaker emphasizes the importance of not locking into a solution and shares their timeline for the changes. They also mention considerations for state management, recognizing performance issues, and the possibility of open-sourcing their solution.

Our quest to make our product faster and more performant forced us to reevaluate our state management solution. Unfortunately more than once: in the span of two years we migrated from Redux to Zustand to Jotai then back to Zustand (this time with some fancy tricks) and then finally to a custom solution.  Should you do the same to figure out which library fits your use case best? Is a custom solution really necessary? Probably not, and to prevent you from making the same mistakes we did I want to tell you what we found really matters, as well as some important things we learned during this painful journey.

From Redux to Zustand to Jotai to Zustand to Custom: Our State Management Horror Story

He creado https://fframes.studio/ — es un marco de creación de video de código abierto en Rust, pero el visor del contenido de video generado está implementado en React y permite renderizar video a 120fps usando Rescript y Rust (compilado a wasm). En esta presentación mostraré cómo hacer que estos lenguajes sean los mejores amigos y potenciar React para un rendimiento increíble.

React via Rust y Rescript: ¿Por qué y cómo?

I'm here to talk about Rust and Rescript, languages in the React community that offer interesting possibilities. Writing React in different languages can improve performance and code correctness. TypeScript can be messy and has challenges in Material.UI, while Rescript offers better code quality and type safety. Rescript supports advanced React features and using functions for JavaScript APIs. The power of Rescript and WebAssembly lies in writing better React code and optimizing performance. Integrating SVG into React with Rust provides fast rendering and keeps the structure intact. Learning new languages can improve code quality. Re-script debugging and SVG performance are important considerations. React Server Components and beginner Rescript projects are discussed in the Q&A session.

I’ve done https://fframes.studio/ — it is an open source video creation framework in Rust, but the previewer of the video generated content is implemented in React and allows to render 120fps video rendering using Rescript and Rust (compiled to wasm). In this presentation l’ll show how make these languages best friends and make them superpower react for unbelievable performance.

React via Rust and Rescript: Why and How?

Dmitry Kovalenko

React 19 y el compilador para el resto de nosotros

Hi everyone. I'm Johnny, an application engineer who builds user-centric React 19 applications. Today, our goal is to help you reach production mountain with React 19. Let's start by gathering a crew and discussing the motives for installing the compiler. We'll revisit React rules and explore the compiler's impact on code. The React compiler translates from JavaScript to JavaScript and provides error reporting. It enables deeper levels of optimization and focuses on user experience. To upgrade to React 19, install the latest version and be aware of any compatibility issues. Check if any custom runtime code needs to be disabled. The React compiler can be used with versions 17 or 18 if you have runtime support. The compiler removes use memos and optimizes the initialization process based on static components. It provides granular reactivity and reduces rendering, making the application feel quicker. Follow React rules and conventions to ensure compatibility. Test custom hooks, be aware of the impact on build time, and address any unexpected issues like the removal of the global JSX namespace. Debugging tools and source mapping in Chrome are useful for understanding compiler output. Enjoy translating chants and exploring the possibilities of React 19!

React 19 and the Compiler for the Rest of Us

Cuando se habla de rendimiento en el frontend, generalmente hay dos temas: las puntuaciones de Lighthouse y los rerenders. Pero cuando se trabaja en aplicaciones que manejan grandes cantidades de datos y la paginación no es una opción, se vuelven necesarias categorías de optimización completamente diferentes. A través del estudio de caso del visor de trazas de Axiom, examinaremos las soluciones que mantienen tu aplicación funcionando (¡y funcionando rápido!) cada vez que el tamaño de tus datos crece en un orden de magnitud.

Cómo Mostrar 10 Millones de Algo: Rendimiento del Frontend Más Allá de la Memoización

Today's Talk focused on performance optimization in React apps, specifically in handling and rendering enormous amounts of data. The speaker discussed various techniques and tools to achieve better performance, such as optimizing data relay, rendering, data processing, memory usage, and denormalization. They also highlighted the importance of optimizing network performance, payload size, and request handling. The Talk emphasized the need to measure before optimizing, focus on bottlenecks, and make small improvements that actually benefit users. Overall, the Talk provided valuable insights and recommendations for improving performance in React apps.

When discussing frontend performance, there are usually two topics: Lighthouse scores, and rerenders. But when working on applications that deal with large amounts of data and pagination is not an option, entirely different categories of optimizations become necessary. Through the case study of Axiom's trace viewer, we will examine the solutions that keep your application running (and running fast!) each time your data size grows by an order of magnitude.

How to Show 10 Million of Something: Frontend Performance Beyond Memoization

Christopher Ehrlich

La web es capaz de mucho más de lo que podríamos pensar. Durante esta masterclass, exploraremos algunas partes menos conocidas de la web. ¿Sabías que puedes controlar la web a través de webHID o enviar y recibir notas a dispositivos a través de webMIDI? En esta charla interactiva podríamos hacer música juntos, controlando sintetizadores y explorando la amplia gama de extrañas API web. Todo eso en JavaScript puro, sin necesidad de frameworks.

Astro: All Hands On

Hello, everybody. Today, we're going to look at Astro. Basically, we're going to build a full-stack website with Astro. Astro is a comparable framework to Next or Nuxt. It's a metaframework basically. In Astro, we can build websites using React or Vue or Svelte. It's very versatile. We have the assets folder, component, layout, and page. The Astro dev toolbar provides privileges, integrations, feedback, inspection, and audits. We can create dynamic pages using string interpolation and dot Astro file. We can integrate React into Astro and create components. AstroDB allows for server-side rendered pages. We can customize the layout and styling of pages. Smooth transitions can be implemented in Astro to create a SPA-like experience. We can install a database in Astro and fetch data from it. Handling form submissions and performing validations using Zod in Astro is possible. Astro provides JSON API to handle form submissions. We can utilize the capabilities of Astro to handle middleware.

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

Elian Van Cutsem

Making an Emulator in JavaScript?

Hello, everyone. Thank you for being here instead of the other talk. Emulation is when something pretends to be something else, like a computer pretending to be a PlayStation 1. There are two types of emulation: hardware emulation and software emulation. Software emulation is when the software mimics the behavior of a console. JavaScript is not the ideal language for emulation, but it can still be used. The speaker built an emulator for Chip 8, a simple console from the 70s, as a fun project. The emulator focuses on the screen and utilizes Canvas. The Chip 8 screen is small, measuring 64 by 32, and is monochrome. The CPU and memory are important components in emulation, and understanding hexadecimal notation and bitwise operators is crucial. The speaker explains the use of hexadecimal notation and bitwise operators in manipulating bytes. Creating a switch statement for instructions is an important step in the emulator development. The legality of emulation is discussed, along with advice on not providing ROMs or proprietary BIOS. Emulation projects can be complex, and reverse engineering consoles is mentioned. The speaker highlights the performance of JavaScript in emulating consoles. They also mention their availability for further questions and provide information on how to follow their work.

Sara Vieira

Una historia de cómo la transformación del código ha afectado a la industria. Y cómo llevó a cambios en la forma en que escribimos CSS

Poder Atómico: la Historia de StyleX

Hello, I'm Naman and today I'm going to talk about atomic power and the story of StylX. CSS preprocessors like Sass and Less emerged to address challenges with CSS. In the evolution of CSS, there was a fork in the road with some moving towards CSS modules and others towards CSS in JS. Atomic CSS is about breaking styles into small, reusable pieces. Tailwind is a successful implementation of atomic styles. Stylix is a JavaScript compiler that generates atomic CSS and allows for defining styles once and reusing them. The speaker demonstrates the conversion of a design to Tailwind classes using Stylix. The TW function and parser in StyleX are discussed for defining constants and converting them into StyleX objects. Atomic CSS is a widely agreed concept and Tailwind can be used with StyleX. The React Strict DOM project is mentioned as a tool for writing UIs for web and React Native.

A history of how code transformation has affected the industry. And how it led to changes in how we write CSS

Atomic Power: the Story of StyleX

Naman Goel

Los influencers de Twitter te harían creer que si solo usas la etiqueta html semántica para los elementos en lugar de un div, tus componentes serán accesibles. ¡pero hay mucho más que entra en juego! Vamos a acercarnos a un componente de GitHub (¡uno que probablemente hayas usado antes!) y ver todas las consideraciones de accesibilidad involucradas y los desafíos interesantes al implementarlas.

Estudio de Caso: Construyendo Componentes Reutilizables y Accesibles de React en GitHub

Hey, I'm Sid, and I work on the design systems team at GitHub. Let's talk about building accessible React components with a focus on screen readers. Use the correct HTML element for accessibility. For example, on GitHub, there are three tabs with options. These tabs are made using buttons. Let's see how a visually impaired person using a screen reader would access this website. What do they see? I'm going to enable the screen reader and walk you through what happens. When turning on the screen reader, it sets the context and tells you where you are. For example, on the React app, a button labeled 'Code' has focus and a menu popup. Inside the popup, there are several buttons with different labels. Something interesting happens. If I can't see the UI, I'm hearing buttons but no tabs. Screen readers cannot infer things like tabs from visual design. To provide this information, we can use the ARIA spec and its roles. By adding a role tab list to the div and role tab to each button, the semantics are conveyed. The role overrides HTML semantics. Screen reader identifies tabs, pronounces 'code spaces'. Default behavior of a tab is auto-focus. We can add aria-selected attribute to specify selection. Using React, I'm using an expression to set aria-selected based on the selected tab. The navigation into the tab panel is disorienting. There are separate groups for the tab list and tab panel, and there is a need for navigation between them. Use arrow keys to navigate within the widget. Remove tabs from the tab index, only the selected tab should be focusable. Implement arrow keys for navigation. Press tab to enter the tab panel. Press shift tab to go back up. Keyboard navigation is a common pattern extracted into a hook. Decide which keys to bind based on the widget type. Change selected tab on focus. Consider the ARIA authoring practices guide for keyboard interactions. Differentiate between instant and activated tabs. Follow the ARIA spec and use the APG as an informative resource. Screen readers may not always follow the ARIA authoring practices guide. Use correct HTML elements, add ARIA roles, properties, and states. Implement keyboard navigation. Use a GitHub example of notification settings with proper semantic elements. When selecting notification channels, the options are presented in a pop-up. The focus is on the first checkbox, indicating that it is the first option. The screen reader reads the status of each option. After selecting the desired option, the form can be submitted. The change is saved and the user is notified. The focus is recontextualized on the collapsed menu popup button. Not rendering the fourth option in certain conditions hides it from screen users. Removing the conditional and disabling the fourth checkbox until necessary eliminates this issue. Using IR disabled instead of disabled makes the element accessible for screen reader and keyboard users without affecting styling or click cancellation. You have to add your own class name and make sure it is disabled. It is accessible by keyboards. Voiceover on Mac uses 'dimmed' to signify IR disabled. Adding another span that requires at least one channel. Additional descriptions can be added using aria-describeby. SCREEN READER Only notify for failed workflows. Requires at least one channel to be selected. Dimmed unticked. Tick box. Now you know the label, why it is disabled, and that it's dimmed. And let's see if it's If I mean. Never. Menu popup collapsed. This flow seems more intuitive. You know all your options up ahead. One option was disabled, enabled something else, and it became enabled again. Much more clear. Feels like a better UI. We need to design with accessibility in mind. Accessibility isn't something that you can just sprinkle on in the end. We have to bring it way earlier in the stage. Be careful when disabling elements. Use RLDisabled. Short list of six things to consider. Links on my website. Follow me on Blue Sky.

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there's a lot more that goes into it! Let's zoom in on one component from GitHub (one that you've probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

Case Study: Building Accessible Reusable React Components at GitHub

En esta charla, exploramos la aplicación de React Server Components (RSC) para elevar la funcionalidad y eficiencia de los formularios. Tocaremos los principios básicos de RSC y sus beneficios específicos para el desarrollo de formularios, como tiempos de carga mejorados y procesamiento del lado del servidor simplificado. Además, aprenderemos los últimos avances en React 19 y la introducción de múltiples nuevos hooks. Los asistentes obtendrán información sobre estrategias prácticas para integrar RSC en formularios, centrándose en mejorar la experiencia del usuario y reducir las complejidades del front-end.

Mejorando Formularios con React Server Components

My name is Aurora, a web developer from Norway, demonstrating a practical example of working with forms and server components using React 19. The server function is created using the `useServer` directive and allows functions to be callable from the client. The form submission and validation are handled server-side using Prisma and a message schema with Zod. The useActionState hook is used for server-side logic and updating the client state. Client-side JavaScript is used for form behavior and preventing form reset. The form is progressively enhanced and can handle multiple submissions with feedback to the user. The talk also emphasizes the reusability of the pending pattern and creating custom client components. Optimistic updates are implemented using the useOptimistic hook. React 19 and server components offer a new option to create robust forms. Using server and client notations in production services should be done with caution due to potential data leakage. Endpoints and server functions should be handled securely. Other libraries like Conform and Vest.js offer options for optimizing forms with React 19.

In this talk, we explore the application of React Server Components (RSC) to elevate the functionality and efficiency of forms. We will touch upon the core principles of RSC and their specific benefits for form development, such as improved load times and streamlined server-side processing. Additionally, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.Attendees will gain insights into practical strategies for integrating RSC into forms, focusing on enhancing user experience and reducing front-end complexities.

Enhancing Forms with React Server Components

Aurora Scharff

Web y Mobile se están acercando cada vez más en el ecosistema de React. Con el lanzamiento de Expo Router y React Strict DOM en el último año, el mensaje es claro: Web y mobile ya no pueden separarse. El React Core Team y la comunidad han estado trabajando silenciosamente en este proyecto, y ha habido RFCs para llevar las APIs Web a Native, y hacer que el bucle de eventos de RN sea más cercano a la web. Esto es genial para los desarrolladores: de repente, los desarrolladores de React pueden "aprender una vez, escribir una vez y ejecutar en cualquier lugar", y pueden dirigirse a web, iOS y Android (e incluso más) desde una única base de código. Podrías estar pensando: ¿es esto solo un sueño imposible, y la realidad estará a la altura de la expectativa de "escribir una vez" para cada plataforma? En esta charla, compartiremos nuestras experiencias del mundo real construyendo aplicaciones universales de React desde una única base de código. Veremos las bibliotecas y herramientas, cubriremos algunos de los desafíos del mundo real, y compartiremos contigo una &lt;List /&gt; de lo que puedes y no puedes compartir a través de diferentes plataformas.

La Era de React Universal: ¿Cuál es el Truco?

We're going to talk about the age of universal React, the next paradigm shift of React. Universal React is cross-platform and follows the principle of learn once, write once, and run anywhere. React Native is born as a declarative way to build iOS and Android apps. React Native components and APIs are implemented in an interoperable way with React DOM, powering a large part of Twitter's web platform. Code sharing in a universal React app maximizes code reuse, reduces duplication, and allows platform optimization. React Native for Web is the compatibility layer that enables universal development, handling translations between React Native and React Dom. Expo is the framework of choice for React Native, with Expo Router V3 completing the universal story. Challenges in achieving parity with React Native Core due to specific platform implementations. React Strict DOM prioritizes web, bringing web APIs to React Native. Taking a universal React approach can improve performance across platforms. React Native Web and React Strict DOM prioritize performance and accessibility.

Web and Mobile are getting closer and closer in the React ecosystem. With the launch of Expo Router and React Strict DOM in the last year, the message is clear: Web and mobile can no longer be separated. The React Core Team and community have been working silently in the background on this project, and there have been RFCs to bring Web APIs to Native, and make the RN event loop closer to the web.This is great for developers - suddenly React devs can “learn once, write once, and run anywhere”, and can target web, iOS, and Android (and even more) from a single codebase. You might be thinking: is this just a pipe dream, and will the reality live up to the expectation of “writing once” for every platform? In this talk, we’ll share our real-world experiences of building universal React apps from a single codebase. We’ll look at the libraries and tools, cover some of the real-world challenges, and share with you a &lt;List /&gt; of what you can and can’t share across different platforms.

The Age of Universal React: What’s the Catch?

Mo Khazali

Anisha Malde

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Gain insights into optimizing server-side rendering, enhancing application interactivity through Server Actions and React 19 hooks, and mastering form creation for robust data handling and validation. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Hands-on React Server Components, Server Actions, and Forms

La web es capaz de mucho más de lo que podríamos pensar. Durante esta charla, exploraremos algunas partes menos conocidas de la web. ¿Sabías que puedes controlar la web a través de webHID o enviar y recibir notas a dispositivos a través de webMIDI? En esta charla interactiva podríamos hacer música juntos, controlando sintetizadores y explorando la amplia gama de extrañas API's web. Todo eso en JavaScript puro, sin necesidad de frameworks.

Haz que la Web Sea Extraña de Nuevo

I'm Elian, the lead developer at React Bricks, and today I will talk about the weird web and how we as developers have the power to make it even weirder. We can use APIs like the Battery Status API to manipulate websites based on battery levels, but we should also be cautious about its potential for misuse. Another interesting API is WebHID, which allows interaction with hardware devices through the web browser. Tejas introduces WebMIDI and demonstrates how it can be used to control web applications using MIDI devices. The speakers emphasize the importance of embracing the fun and weirdness of web development and encourage experimentation. They also discuss the tolerance for failure and the joy of pushing the limits in building unconventional projects. Overall, the Talk highlights the potential for creativity and innovation in web development.

The web is capable of way more than we might think. During this talk, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

Make the Web Weird Again

La charla te introducirá al React Compiler, su arquitectura, las reglas para usarlo y la base de código de React 19. Aprenderemos el poder de las optimizaciones de aplicaciones al incluir React Compiler en una aplicación existente. Por último, nos adentraremos en los aspectos internos de las fases de compilación del React compiler usando el playground, y algunos consejos y trucos al respecto.

React Compiler - La Pieza que Falta para Optimizar Aplicaciones React

Today's Talk introduces the React compiler and its optimizations in React 19. The compiler handles optimizations internally, allowing existing optimizations to coexist. React 19 also brings server components, enhanced hooks, improved reference handling, and asset loading optimization. The React compiler follows the same principles as a typical compiler, with a Babel plugin and ESLint plugin identifying optimizations. The compiler optimizes components by performing in-place updates and reducing unnecessary re-rendering. The React compiler playground helps understand the optimization process. Caching JSX and configuring the React compiler can further optimize specific components. The React compiler is compatible with React 18 and 17 with some configuration, but using React 19 is recommended. Connect with the speaker for more information and subscribe to their YouTube channel. Thank you for watching!

The talk will introduce you to the React Compiler, its architecture, the rules for using it, and the React 19 code base. We will learn the power of app optimizations by including React Compiler in an existing application. Lastly, we will get into the internals of the React compiler's compilation phases using the playground, and a few tips and tricks around it.

React Compiler - The Missing Piece for Optimizing React Applications

Lograr una reactividad de alto rendimiento en React sin comprometer la experiencia del desarrollador siempre ha sido un desafío clave. Al construir aplicaciones en tiempo real diseñadas para mostrar cientos de millones de filas sin retraso notable, la reactividad de grano fino es esencial. Pero cuando comencé mi viaje en Pigment, ni Recoil, Jotai, ni Zustand eran lo suficientemente maduros, y React Compiler aún no existía. Vamos a explorar juntos cómo logramos ingerir, mostrar y actualizar grandes conjuntos de datos sin problemas, sin sacrificar la experiencia del desarrollador o del usuario.

Reactividad de Grano Fino Sin Ningún Compilador

My name is Nicolas, and today, I'm going to talk about Fine-Grain Reactivity without the compiler this time. React is reactive, but it re-renders unnecessary components. Fine-grained reactivity is achieved by updating specific elements instead of whole components. Pigment encountered reactivity problems while building real-time financial data boards. They created their own reactive system on top of React to achieve fine-grained reactivity. They used custom hooks like useShell, useComputed, and useWatch to integrate React with their reactive system. They also considered using native JavaScript for optimization but chose to preserve React. They use external libraries like Zestand for flexibility, and maintaining reactivity during React updates has not been a problem.

Achieving high-performance reactivity in React without compromising the developer experience has always been a key challenge. When building real-time applications designed to display hundreds of millions of rows without noticeable lag, fine-grained reactivity is essential. But when I started my journey at Pigment, neither Recoil, Jotai, nor Zustand were mature enough, and React Compiler was not yet a thing. Let's explore together how we managed to ingest, display, and update huge datasets seamlessly without sacrificing the developer or the user experience.

Fine-Grained Reactivity Without Any Compiler

Nicolas Dubien

Las señales se han convertido recientemente en un concepto popular. Sus ideas se basan en el enfoque de programación funcional reactiva (FRP), que se ha utilizado en la industria durante un tiempo. Me gustaría compartir cómo alguien puede construir una arquitectura basada en señales y React, y cómo hemos utilizado FRP en Grammarly durante bastante tiempo. La charla tiene como objetivo mostrar los principios fundamentales de los observables y cómo estructurar aplicaciones basadas en ideas de FRP.

Construyendo aplicaciones web con señales en Grammarly

Hello, welcome, everyone. Today, I'm going to talk about building web applications with signals in Grammarly. Signals are like values that can change over time and are used in Grammarly's editor for real-time updates. Signals can be implemented with React and are leveraged for state management and business logic. They enable functional reactive and declarative programming, allowing specific actions to be defined. Testing signals can be done using classical unit tests or marble tests. Signals are a perfect fit for Grammarly's domain and can be easily integrated with various libraries and frameworks. Handling cleanup and unsubscribing to signals can be done through the dispose method and React lifecycle. The main challenges in signal-driven systems are testing and debugging streams. Marble tests provide control over signal emission and combined states can be calculated using the view function. Grammarly is considering migrating to the signals proposal in the future. Thank you, Alexey!

Signals have recently become a popular concept. Their ideas are based on the functional reactive programming (FRP) approach, which has been leveraged in the industry for a while. I would like to share how someone can build an architecture based on signals and React and how we have used FRP at Grammarly for quite some time. The talk aims to showcase the foundational principles of observables and how to structure applications based on FRP ideas.

Building Web Applications with Signals at Grammarly 

Esta charla profundiza en CSS Crítico como un método para mejorar el rendimiento web y la experiencia del usuario. Cubre qué es el CSS crítico y las mejores prácticas para una implementación efectiva.

CSS Crítico

In this talk, we'll explore what critical CSS is, when to use it or not, how to implement it effectively, and some common challenges and use cases. The critical rendering path is a sequence of steps the browser takes to convert HTML, CSS, and JavaScript into visible content on the screen. Time and CPU are crucial factors in rendering content quickly, especially for mobile devices. Critical CSS matters because the CSOM can't be built incrementally, and the order of CSS rules affects their specificity. There are two primary ways to add CSS to your HTML: inline styles using style tags or external stylesheets using link tags. Critical CSS aligns only the styles needed to render the above-default content, reducing the size of render-blocking styles. There are manual and automatic tools for identifying critical CSS. Critical CSS is commonly used for static websites with statically generated pages. Testing the effect of critical CSS can be done using Lighthouse, Chrome Performance tab, or WebPageTest.org. BISTIs requires some extra handling but offers better performance. Over-inlining CSS and wrong style order can cause issues with critical styles. Implement optimization at build time.

This talk dives into Critical CSS as a method to enhance web performance and user experience. It covers what critical CSS is and best practices for effective implementation.

Critical CSS

Sergey Labuts

Exploraremos lo último en rendimiento web, examinando cómo se desempeñan los sitios en velocidad y eficiencia. Descubre el impacto de las optimizaciones de rendimiento y las innovaciones que impulsan las experiencias web más rápidas de hoy. Desde lazy loading hasta renderizado eficiente, descubriremos qué distingue a los sitios de alto rendimiento en el paisaje digital en constante evolución. También dirigiremos nuestra atención al impacto ambiental de la web, discutiendo la creciente conciencia sobre su huella de carbono y los pasos que se están tomando hacia prácticas más sostenibles. Junto a esto, profundizaremos en la adopción de tecnologías de vanguardia como HTTP/3, Progressive Web Apps (PWAs) y modernos frameworks de JavaScript. Estos avances están remodelando el desarrollo web y prometen un futuro más eficiente y ecológico. Únete a nosotros para entender cómo estas tendencias están impulsando tanto el rendimiento como la sostenibilidad en el mundo web.

El Estado de la Web: Perspectivas Clave del HTTP Almanac 2024

Today's Talk focused on Almanac 2024, a report that examines web sustainability. The speaker discussed various aspects of web sustainability, including page weight, unused CSS and JavaScript, image optimization, text compression, caching, and the usage of AI. They emphasized the need to reduce data transfer and carbon emissions through practices like green hosting and the implementation of lazy loading, responsive images, and text compression. The speaker also highlighted the importance of individual action and collaboration in achieving a more sustainable web. They called for volunteers for the next edition of the report and encouraged engineers to adopt greener practices. Overall, the Talk provided valuable insights into the current state of web sustainability and offered recommendations for improvement.

We’ll explore the latest in web performance, examining how sites fare in speed and efficiency. Discover the impact of performance optimisations and the innovations driving the fastest web experiences today. From lazy loading to efficient rendering, we'll uncover what sets high-performing sites apart in the ever-evolving digital landscape. We'll also turn our attention to the web’s environmental impact, discussing the growing awareness of its carbon footprint and the steps being taken toward more sustainable practices. Alongside this, we’ll delve into the adoption of cutting-edge technologies like HTTP/3, Progressive Web Apps (PWAs), and modern JavaScript frameworks. These advancements are reshaping web development and promising a more efficient, eco-friendly future. Join us to understand how these trends are driving both performance and sustainability in the web world.

The State of the Web: Key Insights From the HTTP Almanac 2024

El rendimiento del sitio web es primordial, y las estrategias de caché efectivas pueden marcar una diferencia significativa. En esta masterclass, profundizaremos en las técnicas de caché del frontend específicamente adaptadas para aplicaciones React. Aprende cómo controlar la caché de recursos estáticos y solicitudes de datos dinámicos, comprende dónde y por cuánto tiempo se almacenan en caché estos recursos, y explora varias capas de caché desde el servidor hasta el cliente. Al final de esta sesión, tendrás el conocimiento para implementar estrategias de caché robustas que mejoren la velocidad y eficiencia de tus aplicaciones React.

Dominando el Control de Caché: Optimizando el Rendimiento para Aplicaciones React

Today we're going to talk about utilizing caching to optimize our web application performance. We will discuss caching data and resources outside of our React application, how to control and avoid caching problems, and the benefits of caching for improving web application loading times and reducing server load. We can cache static resources like images, media files, scripts, and CSS, as well as application data like the list of articles or posts. However, we need to be cautious with caching data that may become outdated. The service worker and browser cache can intercept network requests and load responses from their caches. Additionally, headers such as cache control and eTag can be used to control caching behavior. The CDN, a content delivery network, maintains cached resources globally and aims to deliver content efficiently. Different caching points store various types of content, improving performance and enabling offline functionality.

Website performance is paramount, and effective caching strategies can make a significant difference. In this talk, we will dive deep into frontend caching techniques specifically tailored for React applications. Learn how to control the caching of both static resources and dynamic data requests, understand where and for how long these resources are cached, and explore various layers of caching from the server to the client. By the end of this session, you'll have the knowledge to implement robust caching strategies that enhance the speed and efficiency of your React applications.

Mastering Cache Control: Optimizing Performance for React Applications

Yael Balla

En esta charla desglosaremos conceptos clave de la IA Generativa como la Búsqueda Vectorial y los Embeddings Vectoriales y cómo los Desarrolladores de React pueden aprovecharlos con tecnologías como LangChainJS para construir aplicaciones intuitivas impulsadas por IA. Discutiremos diferentes experiencias de búsqueda habilitadas por IA como enfoques de búsqueda vectorial e híbrida, explorando cómo funciona cada método, sus ventajas y desventajas, y casos de uso prácticos. La charla desglosará lo que pueden ser conceptos excesivamente complejos en conclusiones prácticas para nuestro trabajo diario como desarrolladores de React/JavaScript. Al final de la sesión tendrás una mejor comprensión de cuándo y cómo usar diferentes técnicas de búsqueda para optimizar tu experiencia de usuario. Lo más importante es que también aprenderás cómo, como desarrollador de React, podemos usar estas técnicas de búsqueda utilizando herramientas y bibliotecas de código abierto, incluyendo algunos motores de búsqueda potentes escritos en TS/JS y crear aplicaciones impulsadas por IA en React.

Decodificación de la Búsqueda Vectorial y Embeddings para Desarrolladores de React

Welcome to my talk at React Day Berlin. Today, we'll discuss vector search and embeddings for React developers. Traditional search is broken, resulting in poor user experiences. Converting data into embeddings unlocks more accurate search, content recommendations, and document comparisons. Vector search measures the closeness or similarity of vectors using distances. In vector search, the closest relevant documents are found based on similarities between vectors. There are multiple ways to calculate the distance between data in vector search. Generative AI applications often deal with both textual and image data, making vector search useful. By converting queries and data into vectors, semantic meaning is considered, allowing for more accurate results. React and Next.js developers have access to a range of toolings, including BlankChain and AI SDK from Vercel. Retrieval augmented generation enhances search results by converting data into vectors and generating more coherent text. The user query is converted into a vector and matched using vector search, and the response is generated using the AISDK from Vercel.

In this talk we'll break down key Generative AI concepts like Vector Search and Vector Embeddings and how can React Developers leverage them with technologies like LangChainJS to build intuitive AI powered apps. We will discuss different AI enabled search experiences like vector and hybrid search approaches, exploring how each method works, their advantages and disadvantages, and practical use cases. The talk will break down what can be overly complex concepts into practical takeaways for our everyday work as React/JavaScript developers. By the end of the session you'll have a better understanding of when and how to use different search techniques to optimize your user experience. Most importantly you will also learn how as a React developer we use can use these search techniques using open source tooling and libraries including some powerful search engines written in TS/JS and create AI powered applications in React.

Decoding Vector Search and Embeddings for React Developers

¡Evaluar el rendimiento de las aplicaciones React es difícil! OpenTelemetry (o OTel) puede proporcionar capacidades de trazado para identificar cuellos de botella. Pero cuando se trata de métricas de rendimiento, la instrumentación del cliente está actualmente en desarrollo. En esta charla, compartiré cómo instrumentar una aplicación React con OTel para trazado y cómo un agente RUM (en este caso, de Elastic) puede ser utilizado para recopilar la carga de página y métricas para diagnosticar la lentitud en aplicaciones de producción.

Evaluando el Rendimiento de Aplicaciones React con un Sorbo de RUM

Hello, everybody. How are we all doing? I'm going to talk about Rome, OpenTelemetry, and identifying performance bottlenecks and issues in React applications. The pillars of observability are logs and metrics. Logs are structured messages that warn, indicate, or error. Metrics include throughput, latency, custom and core web vitals. Traces allow us to see through the pathway of our application and identify bottlenecks. One common open standard for collecting these signals is open telemetry. React's client instrumentation is experimental and mostly unspecified. The open telemetry demo provides an example of front-end tracing in React, giving you a unique service name and basic metrics. The demo shows an HTTP POST request with the pathway and timing. The open telemetry project is still working on core web vital metrics and other enhancements. Real user monitoring (RUM) fills the gaps in open telemetry, capturing missing information. In conclusion, we discussed the importance of capturing logs, metrics, and traces and provided resources for further exploration.

Evaluating the performance of React applications is hard! OpenTelemetry (or OTel) can provide tracing capabilities to identify bottlenecks. But when it comes to performance metrics, client instrumentation is currently under development. In this talk, I will share how to instrument a React application with OTel for tracing and how a RUM agent (in this case, Elastic's) can be used to collect page load and metrics for diagnosing slowness in production applications.

Evaluating React Application Performance with a Sip of RUM

Carly Richmond

Cuando se trata de probar el código de la biblioteca, el enfoque (¡generalmente asombroso!) de "Testing Library" rápidamente alcanza sus limitaciones: A menudo necesitamos probar rutas de código críticas para garantizar garantías adicionales, como un orden específico de cambios en el DOM o un número particular de renders. Tan pronto como comenzamos a agregar Suspense a la imagen, incluso se vuelve casi filosófico: ¿Cómo contamos un render que se suspendió inmediatamente y cómo lo distinguimos de un render "comprometido"? ¿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 render, lo que nos permite cambiar a un nuevo método de prueba basado en flujos. Después de probar este enfoque internamente durante un año, lo hemos lanzado en una biblioteca que queremos presentar al mundo. También miraré brevemente otros problemas "relacionados con las pruebas" muy fuera de lo común 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: Probando tus campos de `exports` cada vez más complejos y asegurando que todos esos entornos exporten la forma del paquete que esperas. Incluso miraremos brevemente la renderización de componentes de React en diferentes entornos para probarlos de forma aislada, ya sea en Server Components, SSR en streaming o simulando la hidratación de flujos en el Navegador.

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

My talk is called Beyond Testing Library, Testing React Libraries or Library-like Code. We want to optimize code by minimizing re-renders, avoiding tearing, and ensuring granular rendering. React Testing Library may not always be the right tool for libraries or library-like code. We test for synchronous results, but there are cases where unwanted re-renders and inconsistencies can occur. We need to avoid flaky tests and bug propagation. The new Testing Library React Render Stream library simplifies testing by replacing complex wrappers and assertions. We test for multiple independent components and ensure correct re-rendering. We introduce Suspense and DOM snapshotting to test granular rendering. The final test provides increased confidence and meets all special requirements.

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

¿Alguna vez necesitaste un ícono de menú de hamburguesa y buscaste uno en una biblioteca de íconos? En realidad, son solo unas pocas líneas de código con <a href="https://svg-tutorial.com/">SVG.</a> Y los SVGs combinados con React abren todo un nuevo mundo. Puedes generar diagramas, gráficos o animaciones, crear un juego o aplicación interactiva. Vamos a recorrer los conceptos básicos de la sintaxis.

Cómo Codificar Imágenes en React con SVG

Today's Talk is about coding images in React with SVGs. SVGs are powerful when combined with JavaScript and can be used to create interactive elements. Understanding SVG syntax and positioning is important, as SVG elements are limited to SVG-specific elements. The circle element in SVG can be styled and used to create shapes. The rectangle element is commonly used for charting and can be customized. The path element offers flexibility and can be built from multiple segments. Transformations and curves can be used to create complex shapes and animations. Bezier curves, both quadratic and cubic, are useful for bending lines and creating smooth transitions. Advanced features like drawing arcs are available in SVG. For more examples and use cases, visit svgtutorial.com.

Did you ever need a hamburger menu icon and you you looked out for one in an icon library? Actually, it's only a few lines of code with <a href="https://svg-tutorial.com/">SVG.</a> And SVGs combined with React open up a whole new world. You can generate diagram, graphics or animation, make an interactive game or app. Let's walk through the basics of the syntax.

How to Code Images in React with SVG

¿Alguna vez has querido una app que haga una cosa exactamente a tu manera, pero no querías conformarte con opciones que se acercan en las tiendas de apps? ¿Has sentido el impulso de construir algo pero te detuviste por la parálisis del creador, temiendo que sea demasiado trabajo? Recuerda, no siempre necesitas apuntar al mundo entero: ¡una base de usuarios de dos puede ser genial! Con React Native y Expo, es más fácil que nunca, ¡y está bien tomar atajos creativos! Esta charla te mostrará cómo puedes construir apps móviles extremadamente rápido por diversión y (probablemente no) por lucro.

Construir cosas que no escalan en absoluto

My talk is about building things that don't scale. It starts with wanting to use a specific app and then deciding to build your own app. Building something that scales requires thinking about various factors like analytics, monetization, SEO, expansion, localization, and competition. Building fun and non-scalable apps can also be enjoyable. Examples include an app for automatically cropping screenshots and a private chat app. The use of Expo Go as a launcher for Expo apps and hosting servers for auto-updates is discussed. The creation of a Google calendar synchronizer using Expo Development Builds is also mentioned. The final takeaways are to think small, have fun with libraries but avoid using too many, and stay away from the app store for as long as possible. Visit the speaker's website for more information.

Ever wanted an app that does one thing exactly your way, but didn't want to settle for close-enough options in the app stores? Have you felt the itch to build something but were halted by creator's paralysis, fearing it's too much work? Remember, you don't always need to target the whole world—a user base of two can be great! With React Native and Expo, it's easier than ever—and it's okay to take creative shortcuts! This talk will show you how you can build mobile apps extremely quickly for fun and (probably not) profit.

Build Things That Don’t Scale at All

Michele Bonazza

La optimización del rendimiento es clave para la satisfacción del usuario en cualquier aplicación móvil, especialmente aquellas construidas con React Native. Esta charla profundiza en los problemas comunes de rendimiento en las aplicaciones de React Native y proporciona técnicas prácticas para diagnosticar y resolver estos problemas. Exploraremos herramientas y métodos para el monitoreo del rendimiento, técnicas de renderizado eficientes y la optimización del uso del hilo de JavaScript. Además, la sesión cubrirá temas avanzados como la gestión de memoria, el uso del motor de JavaScript Hermes y estrategias para animaciones y transiciones fluidas.

De la Lentitud al Rayo: Mejorando el Rendimiento de React Native

Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.

Performance optimization is key to user satisfaction in any mobile application, especially those built with React Native. This talk dives into common performance pitfalls in React Native apps and provides practical techniques for diagnosing and resolving these issues. We'll explore tools and methods for performance monitoring, efficient rendering techniques, and optimizing JavaScript thread utilization. Additionally, the session will cover advanced topics such as memory management, the use of Hermes JavaScript engine, and strategies for smooth animations and transitions.

React Day Berlin 2024

Build apps, not walls

Kristiyan Velkov

Lera

Sophie Kolbe

Rafael Piazdecki

Kræn Hansen

Shivay Lamba

Irina Baeva

Stefan Wille

Aleksei Podgaev

Lera

Tapas Adhikary

Daria Shabala

Rohit Singh

Seungho Park

Burak Güneli

Eric Burel

Dipanshu Gupta

Agnieszka Labonarska

Violina Popova

Joanna Otmianowska

Siddharth Kshetrapal

Johannes Goslar

Hunor Márton Borbély

Oleksii Levzhynskyi

Giulio Zausa

Daishi Kato

Andreas Roth

Mangirdas Darguzis

Rosario Terranova

Petra vos

Kirill Jegorov

Michael Seifarth

Adrian Guzinski

Richard Strand

Total attendees