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

Taz Singh

Rafael Piazdecki

Petra vos

Lera

Bruno Sampaio

JSNation Conference 🗓 June 1-5, 2023

Paula Burghelea

Kræn Hansen

Steve Ruiz

Tobbe Lundberg

Brad Westfall

Varun

Thibault Van den Broecke

Joanna Otmianowska

Florence Shelley

Tally Barak

Nico Martin

David Chicaiza

Eli White

Mike Grabowski

Giulio Zausa

Alla Kaplia

David Pugh

Robert

Jeroen van Wissen

Thijs Broerse

Andriy Tevelyev

Gerson Enriquez

Oscar Pagani

Jennifer

Charles

Nils BUntenbeck

Gary Forster

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

Simplificando los Componentes del Servidor

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

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

Simplifying Server Components

Mark Dalgleish

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

Compilador React Forget - Entendiendo React Idiomático

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

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

React Compiler - Understanding Idiomatic React (React Forget)

Joe Savona

Mofei Zhang

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

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

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

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

A Practical Guide for Migrating to Server Components

Fredrik Höglund

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

Solucionando Problemas de Rendimiento en React

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

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

Power Fixing React Performance Woes

Josh Goldberg

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

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

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

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

Opt in Design – The New Era of React Frameworks

Ben Holmes

La improbable amistad entre React y Rust

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

The Unlikely Friendship Between React and Rust

Sara Vieira

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

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

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

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

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

Lorenzo Sciandra

Desde mi experiencia, una de las cosas más difíciles es compartir información entre microfrontends, por lo que en esta charla me gustaría explicar varias formas de compartir un sistema de diseño para garantizar la uniformidad de la aplicación. Otra cosa difícil es compartir dependencias, afortunadamente con la federación de módulos se puede hacer, pero ¿cómo puedo usar diferentes versiones de la misma biblioteca y cómo funciona detrás de escena? Soy el creador de la biblioteca module-federation/vite, con React y esta biblioteca, me gustaría mostrarte cómo puedes lograr estos resultados configurando todo correctamente.

Micro-Frontends con React y Federación de Módulos Vite

Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.

From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes? I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.

Micro-Frontends With React & Vite Module Federation

Giorgio Boa

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

Monitoreo 101 para Desarrolladores de React

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

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

Monitoring 101 for React Developers

Lazar Nikolov

Sarah Guthals

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

Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad

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

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

Nested Interactive Elements: An Nightmare in Accessibility

Cat Johnson

En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente). En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen: - Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps

Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React

This Workshop focuses on implementing software using the SDK and API layer, with a focus on JavaScript and React development. It covers topics such as advancements in AI and language models, unlocking language user interfaces, generative AI, large language models and hallucinations, prompt engineering, improving model performance, developing prompts and an iterative approach, prompt development and management, interesting use cases, using the playground and understanding tokens, streaming text and JSON, exploring example implementations, fine-tuning and use cases, limitations and emerging architectures, working with documents and LangChain, embeddings, agents, and development tools, scraping data and fine-tuning, and using LLM for data transformation.

In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool). In the workshop they'll be a mix of presentation and hands on exercises to cover topics including: - GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps

Working With OpenAI and Prompt Engineering for React Developers

Richard Moss

La escalabilidad siempre ha sido un problema en el desarrollo de software. Los arquitectos han estado luchando para resolver este problema en muchas capas. A principios de la década de 2000, comenzó a surgir un concepto de “micro-servicios” - un sistema podría dividirse por dominio empresarial en una serie de servicios más pequeños y poco acoplados. Más recientemente, este concepto ha comenzado a ser adoptado por la comunidad de frontend. Una aplicación podría dividirse en múltiples sub-aplicaciones, cada una con sus propios equipos, tecnologías y bases de código. Empresas como Spotify, Amazon y Microsoft han adoptado este enfoque y les ha ayudado a escalar aún más rápido. En el mundo del desarrollo móvil, surge la pregunta: “¿Podemos crear Microfrontends para aplicaciones móviles?”.

“Microfrontends” para móviles en React Native

Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.

Scaling has always been an issue in software development. Architects have been grappling to solve this problem on many layers. In the early 2000s, a concept of “micro-services” started popping up - a system could be split up by business domain into a number of smaller loosely-coupled services.  More recently, this concept has started being adopted by the frontend community. An app could be split into multiple sub-apps, each with their own teams, technologies, and codebases. Companies like Spotify, Amazon, and Microsoft have adopted this approach and it has helped them scale even faster. In the world of mobile development, the question arises: “Can we create Microfrontends for mobile apps?”.

“Microfrontends” for Mobile in React Native

Mo Khazali

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

¿Cómo NO usar useEffect?

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

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

How to NOT use useEffect?

Mohamad Shiralizadeh

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

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

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

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

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

Ondrej Polesny

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

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

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

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

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

Jerel Miller

Alessia Bellisario

Descubre el poder de Remix, un revolucionario marco de trabajo full-stack que abraza los estándares web para redefinir el desarrollo web moderno.Mientras los desarrolladores luchan con herramientas y marcos de trabajo complejos, crear aplicaciones eficientes y mantenibles se vuelve cada vez más desafiante.¿Y si hay una solución que aprovecha los principios básicos de la web para simplificar el desarrollo? Entra RemixEn esta charla, aprende cómo Remix aprovecha los estándares web, como URLs, Fetch API, HTML y caché HTTP, para elevar las experiencias del desarrollador y del usuario, en última instancia, te empodera para convertirte en un mejor desarrollador!

Remix: Abrazando los estándares web para redefinir el desarrollo web moderno

Remix is a web development framework that combines the scalability of server-rendered frameworks with the flexibility of React. It prioritizes web standards and best practices for security. Remix streamlines development with web standards like URLs, fetch API, HTML, and HTTP caching. It simplifies data handling through HTML forms and HTTP, improving user experience. Httpication in Remix reduces server load and speeds up response time, while global search and Storyblock make building complex websites easier.

Discover the power of Remix, a groundbreaking full-stack framework that embraces web standards to redefine modern web development.As developers grapple with complex tools and frameworks, creating performant and maintainable applications becomes increasingly challenging.What if there's a solution that leverages core web principles to streamline development? Enter RemixIn this talk, learn how Remix harnesses web standards, such as URLs, Fetch API, HTML, and HTTP caching, to elevate developer and user experiences, ultimately empowering you to become a better developer!

Remix: Embracing Web Standards to Redefine Modern Web Development

Alexandra Spalato

Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía). En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también. Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso. (Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)

Depuración del Rendimiento de React

This Workshop on React Performance Debugging covers various topics such as analyzing performance with Chrome DevTools and React Profiler, optimizing components to improve performance, and debugging performance issues with tools like Why Did You Render and console.time. It also emphasizes the importance of prioritizing performance and fostering a performance-oriented culture within development teams. The Workshop concludes with insights on monitoring and optimizing React performance, including challenges with third-party libraries and the limitations of the React Fiber compiler.

Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up). Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too. Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step. (Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)

React Performance Debugging

Ivan Akulov

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

Patrones para el Rendimiento

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

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

Patterns for Performance

Stephen Cooper

Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena? En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario. Tabla de contenidos: - Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local Prerrequisitos - Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio

Pruebas Efectivas con Detox

The Workshop covered topics such as testing with Detox, faking the API layer, and determining test coverage. It emphasized the importance of balancing realism and speed in testing and the benefits of running even minimal tests. The speaker provided insights into setting up mock backends and using fake modules for testing. Detox configuration for CI and local development workflow were also discussed.

So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it? In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development. Table of contents: - Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow Prerequisites - Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio

Effective Detox Testing

Josh Justice

Aprende por qué deberías preocuparte por la Política de Seguridad de Contenido (CSP) y cómo implementarla en una aplicación Next.JS para mejorar tu capa de seguridad. Comprende los conceptos básicos de CSP, las directivas y su papel en la prevención de ataques web. Avanzando hacia Next.js, la sesión profundizará en los detalles de implementación, cubriendo los hashes "nounce" para scripts en línea usando middlewares y las trampas de estrategias comunes. Al final de la sesión, los participantes estarán equipados con el conocimiento y las habilidades para implementar y evaluar una política CSP robusta en Next.js, aprovechando sus últimas características de la versión 13, protegiendo eficazmente sus aplicaciones web contra ataques en línea.

Protege Tu Aplicación Next.js Con una Política de Seguridad de Contenido

Lucas Esteveau discusses the importance of Content Security Policy (CSP) as an additional layer of security for browsers. He explains how to validate and implement CSP using tools like csp-evaluator.withgoogle.com and observatory.mozilla.org. He also highlights the use of server components and middleware in the Hudafor project to set and enforce CSP directives. Lucas advises starting with a report-only CSP, reviewing the results, and gradually enforcing the policy. He emphasizes the importance of reviewing policy violation reports and iterating the process when making changes.

Learn why you should care about Content Security Policy (CSP) and how to implement it in a Next.JS application to level up your security layer. Understand CSP basics, directives, and their role in thwarting web attacks. Moving on to Next.js, the session will delve into implementation details, covering the "nounce" hashes for inline scripts using middlewares and common strategy pitfalls. By the end of the session, participants will be equipped with the knowledge and skills to implement and evaluate a robust CSP policy in Next.js, leveraging its latest features from version 13, effectively safeguarding their web applications against online attacks.

Shield Your Next.js App With a Content Security Policy

Lucas Estevão

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

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

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

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

The State of The State In The App Router

Jack Herrington

¡Prepárate para potenciar tus habilidades de desarrollo web con React Server Components! En esta inmersiva masterclass de 3 horas, desbloquearemos todo el potencial de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes. Únete a nosotros mientras nos adentramos en el emocionante mundo de React Server Components, que combina a la perfección la renderización del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Server Components en tus propios proyectos. A lo largo de la masterclass, cubriremos temas esenciales, incluyendo: - Entender las diferencias entre los componentes del servidor y del cliente- Implementar Server Components para optimizar la obtención de datos y reducir el tamaño del paquete de JavaScript- Integrar Server y Client Components para una experiencia de usuario fluida- Estrategias para pasar datos eficazmente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de React Server Components Nivel de la masterclass: No importa tu nivel actual de experiencia en React, esta masterclass te equipará con el conocimiento y las herramientas para llevar tu juego de desarrollo web a nuevas alturas. No pierdas esta oportunidad de mantenerte a la vanguardia y dominar la tecnología de vanguardia que está cambiando la cara del desarrollo web. ¡Inscríbete ahora y desata todo el poder de React Server Components!

React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación

React Server Components Unleashed is a workshop that covers the basics, usage, and benefits of React server components. It explores Next.js, caching, suspense, and migrating from Next.js to React server components. The workshop also discusses compatibility with back-end technologies, API key security, caching, and controlling React server components. It highlights the differences between server-side rendering and React server components and provides insights on optimizing data fetching, adding loading components, and using suspense. The workshop concludes with recommendations for developing with React server components and the challenges that may arise.

Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications. Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects. Throughout the workshop, we'll cover essential topics, including: - Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components Workshop level:  No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!

React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

Maurice de Beijer

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

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

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

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

Building High-Performance Online Stores with Shopify Hydrogen and Remix

Desbloquea el poder del estilo seguro en paquetes de componentes React con Vanilla Extract CSS. Aprende cómo escribir estilos escalables y mantenibles sin esfuerzo, aprovechando CSS-en-Typescript. Descubre la integración perfecta de Vanilla Extract CSS y lleva tus componentes React al siguiente nivel.

Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

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

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

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

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

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

Luca Del Puppo

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

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

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

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

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

Anselm Eickhoff

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

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

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

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

Leveraging the Event Loop for Blazing-Fast Applications!

Michael Di Prisco

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

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

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

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

React Advanced 2023

We will be diving deep