Name: React Summit 2023
Start: 2023-06-02T07:00:00.000Z
End: 2023-06-06T19:00:00.000Z

Taz Singh

  Neha  Seth

Rafael Piazdecki

Manuel Bieh

Ioana Sauleac

Lera

Aleksei Podgaev

Kræn Hansen

Carly Richmond

Phil Nash

Medhat Dawoud

Daniel Afonso

Stephen Cooper

Lenz Weber-Tronic

Varun

Thibault Van den Broecke

Luca Del Puppo

Batuhan NARCI

Károly Török

JJ Kasper

Bart Zaalberg

Florence Shelley

Harshil Agrawal

Jerel Miller

Aiden Bai

Lydia Hallie

Travis McGeehan

Eli White

Johannes Goslar

Vasilii Boldurean

Max Kless

Giulio Zausa

Tobias Koppers

Barry Pollard

Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando 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. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría 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 a 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, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)

Masterclass de Depuración de Rendimiento de React

This Workshop on React Performance covers various techniques and tools to analyze and optimize app performance. It includes using Chrome DevTools' Performance and Profiler panes, analyzing CPU activity and function calls, identifying expensive renders and components, debugging with 'why did you render', and optimizing React code and effects. The workshop also discusses the use of ConsoleTime API for profiling, optimizing the state manager, and analyzing memory performance. Overall, it provides valuable insights into improving the performance of React applications.

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 Masterclass

Ivan Akulov

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

Acelerando tu aplicación React con menos JavaScript

Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

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

Speeding Up Your React App With Less JavaScript

Miško Hevery

¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar

Concurrencia en React, Explicada

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

React Concurrency, Explained

La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()? En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor. Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React

In this Workshop, the speaker covers various topics related to testing React components. They discuss the importance of testing the contract, behavior, and inputs/outputs of components. The use of React Testing Library and Jest module mocks is highlighted. The speaker also emphasizes the significance of testing user interaction events and external functions. Different testing approaches, best practices, and trade-offs are explored throughout the Workshop.

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning? In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests. Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Designing Effective Tests With React Testing Library

Josh Justice

Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.

Depuración de JS

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Debugging JS

Mark Erikson

Después de pasar más de una década en Google, y ahora como el CTO de Vercel, Malte Ubl no es ajeno a ser responsable de la infraestructura de software de un equipo. Sin embargo, estar a cargo de definir cómo las personas escriben software, y a su vez, construir la infraestructura que están utilizando para escribir dicho software, presenta desafíos significativos. Esta presentación de Malte Ubl revelará los principios guía para liderar una gran infraestructura de software.

Principios para Escalar el Desarrollo de Aplicaciones Frontend

This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.

After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.

Principles for Scaling Frontend Application Development

Malte Ubl

La edición de video es un mercado en auge con influencers siendo toda la rabia con Reels, TikTok, Youtube. ¿Sabías que los navegadores ahora tienen todas las APIs para hacer edición de video en el navegador? En esta charla voy a darte una introducción sobre cómo funciona la codificación de video y cómo hacerla funcionar dentro del navegador. Spoiler, ¡no es trivial!

Edición de video en el navegador

This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.

Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Video Editing in the Browser

Christopher Chedeau

Next.js 13.4 recientemente lanzó la versión estable del "Router de Aplicaciones" - un cambio transformador para el núcleo del marco. En esta charla, compartiré por qué hicimos este cambio, los conceptos clave a conocer, y por qué estoy emocionado por el futuro de React.

El Nuevo Router de Aplicaciones Next.js

Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.

Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.

The New Next.js App Router

Lee Robinson

Los componentes del servidor, introducidos en React v18, terminan con estas deficiencias, permitiendo renderizar completamente los componentes de React en el servidor, en un formato de abstracción intermedia sin necesidad de agregar al paquete de JavaScript.Esta charla tiene como objetivo cubrir los siguientes puntos:1. Una divertida historia de cómo necesitábamos CSR y cómo SSR comenzó a tomar su lugar2. ¿Qué son los componentes del servidor y qué beneficios trajeron como un tamaño de paquete de javascript de 03. Demostración de una aplicación simple utilizando renderización del lado del cliente, SSR y componentes del servidor y analizando las ganancias de rendimiento y entendiendo cuándo usar qué4. Mi opinión sobre cómo cambiará la renderización de la interfaz de usuario con este enfoque

Componentes del Servidor: La Épica Historia de Renderizar UX

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach

Server Components: The Epic Tale of Rendering UX

Nikhil Sharma

En esta charla profundizaremos en el arte de crear algo significativo y gratificante. A través de la lente de mi propio viaje de redescubrimiento de mi pasión por la codificación y la construcción de un videojuego desde cero con JavaScript y React, exploraremos las compensaciones entre soluciones fáciles y rendimiento rápido. Obtendrás valiosos conocimientos sobre la creación rápida de prototipos, la infraestructura de pruebas y una serie de trucos de CSS que se pueden aplicar tanto al desarrollo de juegos como a tu trabajo diario.

Cómo No Construir un Videojuego

The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.

In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

How Not to Build a Video Game

Christoph Nakazawa

Es la regla número uno de los hooks: “Solo llama a los hooks en el nivel superior”. Pero, ¿qué pasaría si te dijera que esta regla no se aplica a todos los hooks? Uno de ellos puede ser usado condicionalmente de manera segura. Para entender cómo useContext es diferente de otros hooks, y por qué está exento de esta regla principal, necesitamos saber por qué existe esta regla en primer lugar. Construiremos nuestro propio modelo mental del comportamiento de renderizado de react, centrado en cómo react mantiene un seguimiento de los datos en tiempo de ejecución: props, estados, refs... y valores de contexto.

No puedes usar Hooks condicionalmente... ¿o sí puedes?

The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.

It’s the hooks rule number one: “Only call hooks at the top level”.But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.

You Can’t Use Hooks Conditionally… or Can You?

Charlotte Isambert

En esta charla, explicaré React Query desde una perspectiva diferente. Después de haber mantenido React Query durante más de dos años y haber respondido muchas preguntas (a menudo las mismas varias veces), siento que podría faltar una comprensión fundamental sobre la librería. Comenzaré con una rápida introducción sobre mi viaje en el mundo de código abierto y cómo llegué a conocer React Query, seguido de mostrar qué cambio de mentalidad es beneficioso cuando se trabaja con React Query - cómo "pensar en React Query".Tendré 3 conclusiones principales:1) React Query no es una biblioteca de obtención de datos. Es un administrador de estado asíncrono, hablaremos rápidamente sobre qué hace a un administrador de estado, por qué React Query es uno y qué significa "estado asíncrono".2) staleTime es tu mejor amigo. He visto un poco de confusión sobre cómo usar React Query como un administrador de estado, así que explicaré por qué configurar staleTime es en su mayoría todo lo que necesitas3) los parámetros son dependencias. Esto es importante para entender para mostrar los límites entre el estado del cliente y el estado del servidor, y es esencial cuando se hace la gestión del estado con React Query. Terminaré con una nota sobre "separación de preocupaciones" y sobre los compromisos de simplemente llamar `useQuery` donde lo necesites en tu árbol de componentes.

Pensando en React Query

React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.

In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.

Thinking in React Query

Dominik Dorfmeister

En Microsoft estamos repensando la forma en que usamos ReactJS como desarrolladores frontend, los patrones tradicionales de diseño de UI en React resultan en código redundante, lo que hace que el mantenimiento del código sea engorroso. Al hacer que la UI sea impulsada por configuración, potenciamos los componentes de React al hacer que el archivo de configuración sea una única fuente de verdad. El enfoque anterior facilitó la incorporación rápida de nuevos escenarios de UI y con una regresión mínima en los antiguos flujos de UI, lo que resultó en una reducción significativa en los esfuerzos de desarrollo, la mejor parte es que todo el código se mantuvo solo en Typescript, no se utilizaron XML u otros lenguajes declarativos.

Interfaz de usuario impulsada por configuración utilizando ReactJS

This lightning talk introduces config-driven UI in ReactJS, a technique for creating dynamic and customizable UIs without hard coding. It covers the implementation of different types of components and how they can be nested to create complex layouts.

We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.

Config Driven UI using ReactJS

Joban Singh

Aprende cómo utilizar el ecosistema completo de MUI para construir un tablero de gestión de proyectos hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra biblioteca de componentes más nueva y hermana del estándar de la industria Material UI. Tabla de contenidos:- Presentando nuestro proyecto y herramientas- Configuración de la aplicación e instalación del paquete- Construcción del tablero- Prototipado, estilos y temas - Características de Joy UI- Filtrado, ordenación, edición - Características de la Rejilla de Datos- Conclusión, pensamientos finales, P&amp;R

Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI

Today's Workshop focused on building a CRUD app using the MUI X data grid and Joy UI. Material UI is still popular and will continue to be developed, with efforts to implement Material Design version 3. The workshop covered various topics such as adding columns, filtering data, replacing slots with Joy UI components, creating an autocomplete column, customizing appearance and styling, saving and updating data, and handling errors. The workshop concluded with plans for future features and a call to connect with attendees for further assistance.

Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI. Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&amp;A

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI

Sam Sycamore

Siriwat (Jun) Kunaporn

Los meta marcos están cada vez más populares. La gente critica a React todo el tiempo. ¿Estás loco por seguir usando React? La charla va a cubrir cómo las empresas reales hacen esta evaluación de qué marco elegir. Está hablando sobre las ventajas de usar React, centrándose principalmente en los aspectos positivos pero también ofreciendo pensamientos constructivos sobre por qué podrías no querer usarlo. ¿Deberías usar React en 2023?

¿Deberías usar React en 2023?

React is a popular choice, but there are claims that it's dead and should be replaced. React has good out-of-the-box performance and is suitable for most applications. React Native allows code sharing between React and React Native. When considering a migration from React to Svelte, there are trade-offs to consider. React offers a standardized way of working and easy onboarding.

Meta frameworks are increasingly popular. People dunk on React all the time. Are you insane for still using React? The talk is going to cover how real companies make this evaluation of which framework to choose. It's talking about the advantages of using React, primarily focusing on the positives but also offering constructive thoughts on why you might not want to.Should you use React in 2023?

Should You Use React in 2023?

Tru Narla

Jordan Gensler

En esta charla, repasaremos una serie de patrones comunes útiles y probados de TypeScript para usar en React 18. Esto incluye cómo tipificar correctamente las propiedades de los componentes, los hijos y los tipos de retorno, utilizando los tipos incorporados de React, tipificando contextos, y el habitual discurso sobre enum (pero de manera constructiva).

7 Patrones de TypeScript que Deberías Estar Usando

This Talk introduces 7 essential TypeScript patterns for React development, including children, spreading props, either-or, generic components, and context. The speaker demonstrates various implementations and provides examples using a fictional dog grooming salon application. Other interesting ideas include using omit and make required types, creating components with either-or interfaces, and using generics, memorization, and context in React. The speaker also introduces the Recontextual library for context management.

In this talk, we will be going over a number of common useful and best-practice-proven TypeScript patterns to use in React 18. This includes how to correctly type component properties, children and return types, using React's built-in types, typing contexts, and the usual enum rant (but constructively).

7 TypeScript Patterns You Should Be Using

Morten Barklund

La charla será una historia de cómo Personio pasó de renderizar a través de una arquitectura PHP monolítica, a una aplicación Next JS orientada a microfrontends, impulsada por la Federación de Módulos y la cadena de herramientas del monorepositorio NX.

Microfrontends Federados a Gran Escala

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.

Federated Microfrontends at Scale

Daniel Bolivar

Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación. Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido

React a Escala con Nx

We discuss developing at scale with NxMonoRepos, which provide the benefits of a monorepo without the drawbacks of code collocation. Nx helps with code consistency and automation through plugins and generators. The workshop covers folder structure, workspace creation, using plugins, updating files, using executors, libraries and migrations, running generators and migration scripts, connecting APIs, creating type libraries, and using generators for Storybook configuration. It also covers configuring Storybook, enforcing module boundaries, setting up CI, using workspaces, and the trade-offs of libraries and applications.

We're going to be using Nx and some its plugins to accelerate the development of this app. Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component

React at Scale with Nx

Isaac Mann

- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

React Bricks is a CMS with visual editing based on React components that allows for visually editable content blocks called Brics. It offers flexibility for various media types and supports features like side edit props, validation, and collaboration. React Bricks also provides advanced features like data bindings, custom page types, and the ability to consume external data. It is compatible with any framework, offers enterprise-level features, and has future developments in progress.

- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Matteo Frana

Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo. Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación. En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.

Despliegue de aplicaciones React Native en la nube

Welcome to the Workshop on AppFlow and Setup! This workshop covers the setup and prerequisites for AppFlow, including debug builds, native cloud builds, and app store deployment. It also explains how to connect your app to AppFlow, initiate builds, and manage build stacks and test devices. The workshop covers code signing for iOS and Android, generating signing certificates and upload keys, and deploying apps to the App Store and Google Play. It also provides insights into app testing, releases, and submission processes, as well as resources for further information and support.

Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team. Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app. In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.

Deploying React Native Apps in the Cloud

Cecelia Martinez

GraphQL es una herramienta poderosa y útil, especialmente popular entre los desarrolladores frontend. Puede acelerar significativamente el desarrollo de aplicaciones y mejorar la velocidad de la aplicación, la descubribilidad de la API y la documentación. GraphQL no es solo adecuado para API simples, puede impulsar arquitecturas más avanzadas. La separación entre consultas y mutaciones hace que GraphQL sea perfecto para el event sourcing y Command Query Responsibility Segregation (CQRS). Al hacer que tu aplicación GraphQL avanzada sea sin servidor, obtienes una arquitectura completamente administrada, económica y extremadamente potente.

Arquitecturas Avanzadas de GraphQL: Event Sourcing y CQRS sin servidor

GraphQL is a strongly typed, version-free query language that allows you to ask for specific data and get it in JSON format. It simplifies data retrieval and modification by allowing the server to handle all necessary operations. Serverless architectures, such as AWS Lambda, are scalable, cost-effective, and good for event-driven applications. Event sourcing and CQRS are techniques that ensure consistency and separate reading and writing parts of an application. Building a GraphQL API with commands and queries can be achieved using AWS AppSync and DynamoDB. This approach offers low latency, scalability, and supports multiple languages. Challenges include application complexity, data modeling, and tracing, but starting with simplicity and making something work first can lead to success.

GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Slobodan Stojanović

La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps. Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.

De 0 a Autenticación en una hora con ReactJS

This is a React Node.js workshop that covers implementing Dscope authentication in a React project. It explains how to set up a Dscope account and customize authentication flows using the Dscope console. The workshop also covers using React Hooks and the Dscope provider, adding dynamic login and logout functionality, protecting data with session tokens, and validating sessions with Node.js middleware. Additionally, it demonstrates how to customize authentication flows in the Dscope console.

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps. While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.

0 to Auth in an hour with ReactJS

Kevin Gao

Las charlas exploran varios patrones y conceptos engañosos en React, que parecen ser "conocimiento común", pero que muchos (si no la mayoría) de los desarrolladores suelen equivocarse o simplemente no son conscientes de ellos. Algunos ejemplos, cubiertos en la charla (y más): * que "un componente de React se vuelve a renderizar cuando sus props cambian" (esto no es cierto) * que envolver un componente en React.memo evitará su re-renderizado (no siempre es cierto) * que el uso de Context causa re-renderizados y es malo para el rendimiento (no siempre es cierto, a veces Context puede reducir el número de re-renderizados en la aplicación) * que crear un elemento como este `const A = &lt;Child /&gt;` es cuando se activa el ciclo de vida de renderizado de Child (no es cierto)

Mitos y Leyendas de React

This talk discusses myths and misconceptions in React that can impact re-renders. It covers unnecessary re-renders and the misconception that props trigger re-renders. The talk also explores the role of memoization and context in reducing re-renders. Additionally, it highlights the importance of using the key attribute correctly to optimize rendering. The talk concludes by discussing the separation of state and API in context and the use of state management tools like Redux.

The talks explore various misleading patterns and concepts in React, that seem to be “common knowledge”, but which a lot (if not most) developers either get wrong or are just not aware of those. Some examples, covered in the talk (and more): * that “react component re-renders when its props change” (this is not true) * that wrapping a component in React.memo will prevent its re-render (not always true) * that use of Context causes re-renders and is bad for performance (not always true, sometimes Context can actually reduce the number of re-renders in the app) * that creating an element like this `const A = &lt;Child /&gt;` is when the Child's render lifecycle is triggered (not true)

React Myths And Legends

Nadia Makarevich

GitHub Copilot es un programador en pareja de IA que puede ayudarte a escribir código más rápido y pasar menos tiempo escribiendo código repetitivo. Esta sesión cubrirá algunos casos de uso interesantes para Copilot que podrían revelar sus posibilidades. Esto va desde pedirle a Copilot que sugiera una función basada en un comentario, aprender a usar un nuevo marco de trabajo, abordar un error de seguridad o accesibilidad, documentar mejor tu código, traducir código de un lenguaje a otro, etc.Agenda: Introducción a Copilot - ¿Qué es Copilot? - Cómo puedes usarlo - Cómo puede ayudarte a escribir código más rápido - Características experimentales de Copilot LabsTomaré ejemplos del ecosistema de React y mostraré cómo podemos solucionar vulnerabilidades de seguridad y problemas de accesibilidad en algunos componentes.

Mejorando la Felicidad del Desarrollador con IA

GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.

GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda: Introduction to CoPilot - What is Copilot - How can you use it - How it can help you write code faster - Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.

Improving Developer Happiness with AI

Senna Parsa

Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos. En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel. Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.

Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

This workshop covers building blazing fast websites with Next.js and Sanity. It explores the benefits of headless architecture and CMS tools like Sanity. The workshop guides participants through setting up the repo, working with Sanity and Next.js, and deploying to production on Vercel. Content modeling in headless CMS and schema creation in Sanity are explained. The workshop also covers using Grok to query content, connecting content with Next.js, and deploying to production with Vercel.

Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites. In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel. By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.

Building Blazing-Fast Websites with Next.js and Sanity.io

Nancy Du

Nataliya Ioffe

¿Por qué Grafana utiliza React para su frontend? Cómo aprovechamos las características de React en Grafana ¿Cuáles son algunos puntos problemáticos que hemos encontrado al usar React en Grafana? ¿Cuáles son las lecciones aprendidas de adoptar React durante los últimos 5+ años?

Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad

Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.

Why does Grafana use React for its frontend? How we leverage React’s features at Grafana What are some pain points we have ran into with using React at Grafana What are lessons learned from adopting React for the past 5+ years?

How Grafana Uses React to Power the World of Observability

Nathan Marrs

En esta sesión, discutiré nuestras experiencias en superar las limitaciones de rendimiento al desarrollar componentes React para aplicaciones web en dispositivos integrados de baja gama como Smart TVs. Compartiré casos de aplicación reales del desarrollo de millones de Smart TVs webOS y mostraré cómo mejoramos la respuesta de entrada del usuario y el tiempo de inicio de la aplicación. Las ideas y técnicas compartidas serán beneficiosas para los desarrolladores que enfrentan desafíos similares.

Superando Limitaciones de Rendimiento en Componentes React para Dispositivos de Baja Gama

This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.

In this session, I will discuss our experiences in overcoming performance limitations while developing React components for web apps on low-end embedded devices such as Smart TVs. I will share actual application cases from the development of millions of webOS Smart TVs and show how we improved user input response and app launch time. The ideas and techniques shared will be beneficial to developers facing similar challenges.

Overcoming Performance Limitations in React Components for Low-end Devices

Seungho Park

En esta charla, hablaré sobre cómo me uní al desarrollo de Zustand.
Comenzó con otra biblioteca mía, que es similar a Zustand.
Mi participación fue desde Zustand v3 y actualmente es v4.
La filosofía de Zustand es ser pequeño y lo mejoramos manteniendo la
filosofía.
Finalmente, compararemos Zustand con Jotai, que es otra biblioteca de gestión de estado
que desarrollo.

Historia de Desarrollo de Zustand

This talk provides an overview of the development history of Zestand, a state management library for React, and the speaker's involvement in it. It also introduces Jotai, another state management library developed by the speaker, and compares it with Zestand. The talk highlights the unique features and goals of both libraries, as well as the challenges of monetizing open-source software.

In this talk, I will talk about how I joined the development of Zustand.
It started with another library of mine, which is similar to Zustand.
My involvement was from Zustand v3 and it's currently v4.
Philosophy of Zustand is being small, and we improve it with keeping the
philosophy.
Finally, we compare Zustand with Jotai, which is another state management
library that I develop.

React Summit 2023

The biggest React conference worldwide