Name: React Advanced 2022
Start: 2022-10-21T08:00:00.000Z
End: 2022-10-24T21:59:00.000Z

  Neha  Seth

Shivay Lamba

Petra vos

Lera

Alba Silvente Fuentes

Bruno Sampaio

Daria Shabala

Steve Ruiz

Daniel Afonso

Jack Herrington

Lenz Weber-Tronic

Stephen Cooper

Varun

Florence Shelley

Harshil Agrawal

Ankita Kulkarni

Nikolay Advolodkin

David Pugh

Ricardo Machado

Gido Manders

Robert

David Barry

Oscar Pagani

Bernie Green

Charles

Phiroze 

Mathieu Habegger

Myron Davis

Mel Moe

Darya Shabala

Missy

Jordan Newland

Norm Crandall

React es una biblioteca para "renderizar" UI a partir de componentes, pero muchos usuarios se encuentran confundidos acerca de cómo funciona realmente el renderizado de React. ¿Qué significan términos como "renderizado", "reconciliación", "Fibers", y "committing"? ¿Cuándo ocurren los renderizados? ¿Cómo afecta el Contexto al renderizado, y cómo las bibliotecas como Redux causan actualizaciones? En esta charla, aclararemos la confusión y proporcionaremos una base sólida para entender cuándo, por qué, y cómo React renderiza. Veremos: - Qué es realmente el "renderizado" - Cómo React encola los renderizados y el comportamiento de renderizado estándar - Cómo se utilizan las claves y los tipos de componentes en el renderizado - Técnicas para optimizar el rendimiento del renderizado - Cómo el uso del contexto afecta al comportamiento del renderizado - Cómo las bibliotecas externas se integran en el renderizado de React

Una Guía del Comportamiento de Renderizado de React

This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.

React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering

A Guide to React Rendering Behavior

Mark Erikson

¿Puede useEffect afectar negativamente a tu base de código? Desde la obtención de datos hasta la lucha con las APIs imperativas, los efectos secundarios son una de las mayores fuentes de frustración en el desarrollo de aplicaciones web. Y seamos honestos, poner todo en ganchos useEffect no ayuda mucho. En esta charla, desmitificaremos el gancho useEffect y obtendremos una mejor comprensión de cuándo (y cuándo no) usarlo, así como descubriremos cómo los efectos declarativos pueden hacer que la gestión de efectos sea más mantenible incluso en las aplicaciones React más complejas.

Uso efectivo de useEffect

Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.

Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.

Using useEffect Effectively

David Khourshid

En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI &amp; JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify

Presentando FlashList: Construyamos juntos una lista performante en React Native

FlashList is an alternative to React Native's FlatList that aims for high performance and ease of use. It provides significant performance improvements over FlatList, with higher JSFPS and UIFPS. FlashList has been successfully implemented in Shopify's Mobile Shop, POS, and Inbox apps. The workshop covers the migration process to FlashList and optimization techniques. FlashList reduces unmount events, fixes item recycling issues, and improves load time and rendering performance.

In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI &amp; JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&amp;A with Shopify team

Introducing FlashList: Let's build a performant React Native list all together

David Cortés Fulla

Marek Fořt

Talha Naqvi

Hemos escuchado mucho sobre la Arquitectura Fiber de React, pero parece que pocos de nosotros la entendemos en profundidad (o tenemos el tiempo para hacerlo). En esta charla, Tejas repasará su mejor intento de entender Fiber (revisado por otros expertos), y lo presentará de una manera 'explicar-como-si-tuviera-cinco años'.

Entendiendo la Arquitectura Fiber de React

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.

Understanding React’s Fiber Architecture

Tejas Kumar

TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.

TypeScript y React: Secretos de un matrimonio feliz

React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.

TypeScript and React: Secrets of a Happy Marriage

Matt Pocock

Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.

De Monolito a Micro-Frontends

Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Monolith to Micro-Frontends

Ruben Casas

¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.

Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React

This workshop on advanced TypeScript tips for React developers covers a wide range of topics, including TypeScript compilation, converting JavaScript components to TypeScript, enforcing mutually exclusive props, and data validation. It emphasizes the importance of strict settings in TypeScript and using generics for type safety. The workshop also highlights the benefits of TypeScript's type inference and its integration with React components. Overall, the workshop provides practical insights and best practices for leveraging TypeScript in React development.

Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

Best Practices and Advanced TypeScript Tips for React Developers

Maurice de Beijer

Normalmente hablo mucho sobre conceptos técnicos profundos como TypeScript, sistemas de tipos, (in)mutabilidad, MobX, Immer, etc. Pero esta vez será personal y compartiré lecciones, buenas y malas, sobre cómo crecer como ingeniero. He liderado proyectos de código abierto, proyectos de corta duración como freelancer y he pasado por la transición de ingeniero a líder técnico dos veces. Tanto en una startup joven como en Meta. Esta charla tratará sobre experiencias personales, opiniones impopulares e incluso acciones, y cualquier otra cosa que pueda ser contraintuitiva. Únete para obtener algunas lecciones para cualquiera que aspire a una carrera enfocada en la ingeniería. Probablemente estaré equivocado en la mayoría de las cosas, ¡así que no pierdas la oportunidad de seguir después!

Una Carrera Como Ingeniero de Software

Code will be imperfect and perishable, so testing and debugging are crucial. Building relationships and being generous with code reviews are important for teams. Code ownership should belong to the team, not individuals. Prioritizing functionality over consistency can lead to more efficient development. Growing into a tech lead role requires building relationships and coaching skills.

Typically I talk a lot about deeply technical concepts like TypeScript, type systems, (im)mutability, MobX, Immer etc. But this time it's going to be personal and I'll share lessons, good and bad, about growing as an engineer. I've been leading open source projects, short lived projects as a freelancer and I went through the transition of engineer to tech lead twice. Both at a young startup and at Meta. This talk will be about personal experiences, unpopular opinions and even actions, and anything else that might be counterintuitive. Join for some take-aways for anyone aiming at an engineering focused career. Probably I will be wrong about most things, so don’t miss the opportunity to follow up afterwards!

A Career As Software Engineer

Michel Weststrate

Escribir interfaces de usuario fluidas se vuelve cada vez más desafiante a medida que aumenta la complejidad de la aplicación. En esta charla, exploraremos cómo una programación adecuada mejora la experiencia de tu aplicación al adentrarnos en algunas de las características concurrentes de React, comprendiendo sus fundamentos y cómo funcionan bajo el capó.

Profundizando en Concurrent React

The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.

Writing fluid user interfaces becomes more and more challenging as the application complexity increases. In this talk, we’ll explore how proper scheduling improves your app’s experience by diving into some of the concurrent React features, understanding their rationales, and how they work under the hood.

Deep Diving on Concurrent React

Matheus Albuquerque

Todos usamos proyectos de código abierto todos los días, como paquetes de npm, editores, aplicaciones web e incluso sistemas operativos... ¿Alguna vez has pensado en construir uno propio? En esta charla, compartiré mi experiencia construyendo jest-preview, desde cuando era solo una idea vaga, hasta convertirse en una biblioteca ampliamente adoptada para ayudar a los ingenieros frontend a escribir pruebas más rápido. Compartiré contigo cómo encontrar una idea para un proyecto en el que trabajar, cuáles son los desafíos que debes superar como autor de un proyecto de código abierto, cómo administrar el tiempo de manera eficiente y cómo llamar la atención de los ingenieros de todo el mundo.

Cómo Construir Tu Propio Proyecto de Código Abierto

Hello my friend, in this talk, I wanna share with you how to build your own open source project. Building an open source software project can be challenging. I receive a lot of things randomly in a day, like thank you messages for making my life easier, which motivates me. To choose an open source project to work on, pick one you use every day. Your software is being used when people report issues and send pull requests.

We all used open source projects every day such as npm packages, editors, web applications, and even operating systems... Have you ever thought of building one of your own? In this talk, I will share my journey building jest-preview, from when it was just a vague idea, to currently a well-adopted library to help frontend engineers write tests faster. I will share with you how to come up with an idea for a project to work on, what is the struggles you have to overcome as an author of an open source project, how to manage time efficiently, and how you get attention from engineers around the world.

How to Build Your Own Open Source Project

Hung Nguyen

En esta charla aprenderemos qué son los Slots y qué significan para el ecosistema de React, cuál es el estado actual y el futuro.

React Slots: una nueva forma de composición

Today's Talk introduces React Snots, a new way of composition for design systems. The configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns. React Slots RFC was created to address the limitations of React's support for web components and slots. It introduces createHost and createSlot APIs to enable component composition and solve previous problems. React Slots RFC allows for flexible component styling and the creation of complex structures without rendering them to the browser.

In this talk we will learn what is Slots and what does it mean to the React ecosystem, what's the current state and the future.

React Slots: a New Way of Composition

Neo Nie

¿Cómo mejor aprender sobre las capacidades de una tecnología que hacer algo para lo que expresamente no fue diseñada? ¿Qué podemos aprender sobre la clavija cuadrada mientras la empujamos sin piedad en el agujero triangular? En un intento de reconstruir Age of Empires 2 usando React, aprenderemos sobre las limitaciones y posibilidades de la herramienta que usamos todos los días.

Construyendo Age of Empires 2 en React

This Talk discusses the process of recreating Age of Empires II in React. The speaker shares their inspiration for the project and explores different approaches to game development using React. They demonstrate how to create an isometric grid, enable scrolling, and render units. The Talk also covers handling unit clicks and implementing right-click movement, as well as techniques for making React render more consistently. The speaker concludes by highlighting the value of exploring different tools and approaches in software development.

How better to learn about the capabilities of a technology than to do something it was expressly not designed for? What can we learn about the square peg as we mercilessly shove it into the triangular hole? In an attempt to rebuild Age of Empires 2 using React we'll learn about the limitations and possibilities of the tool we use everyday.

Building Age of Empires 2 in React

Joe Hart

Una mirada a las herramientas de código abierto creadas por el grupo de Ingeniería de UI en JP Morgan para optimizar el flujo de trabajo de los desarrolladores al construir y desplegar aplicaciones de forma aislada, mientras se entrega un portal unificador basado en micro-frontend al usuario final, aprovechando el uso del soporte nativo para importaciones de módulos ES en el navegador.

Uso de Micro-Frontends Basados en Módulos ES para Habilitar el Desarrollo Distribuido

JP Morgan is using modern web technologies like the UITK and Modular to address challenges in their large-scale development environment. They employ micro front-ends with ES modules for dynamic loading and sharing theming using CSS variables. The applications are built using modular, which allows for scaffolding and creating new applications from templates. They rely on an opinionated approach to app creation and use a CDN for efficient deployment and caching. The host application handles user authentication and communication between micro front-ends, while platform services like authorization and authentication are provided by the digital platform.

A look at the open source tooling created by the UI Engineering group at JP Morgan to streamline the developer workflow of building and deploying apps in isolation while still delivering a single unifying micro-frontend based portal to the end user, leveraging the use of native support for ES module imports in the browser.

Using ES Modules Based Micro-Frontends to Enable Distributed Development

Steve King

Estado de error, estado de carga, punto de interrupción incómodo, datos incorrectos, formato deficiente, soporte del navegador. Cada componente puede representar cientos o miles de estados visuales discretos. ¿Cómo lo pruebas? Desactiva manualmente la red, temporalmente. Inserta código incorrecto, solo por un minuto. Toca la pantalla en el borde. Manipula las fijaciones de la base de datos local. El desarrollo frontend tiene tantas dimensiones. El tiempo y la variación resultan en un número infinito de posibilidades de UI. En esta charla, utilizaremos Storybook para desarrollar, probar y documentar progresivamente nuestro trabajo, automatizando el trabajo pesado del desarrollo de UI.

Cómo pruebo un millón de estados de UI con cada combinación: Pruebas visuales con Storybook

The Talk discusses the need for more robust tools for visual testing in UI development. It explores the challenges in building UIs, including multiple views, variants, and breakpoints. The importance of component extraction and interactions is emphasized. The Talk also covers story derivation from components and interactions, UI testing with the test runner, and visual regression testing with Chromatic. Automating tests using GitHub Actions and common mistakes in using Storybook are discussed. The Talk concludes with a Q&A session.

Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component can result represent hundreds or thousands of discrete visual states. How do you test it? Manually disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development has so many dimensions. Time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, and document our work — automating the grunt work of UI development.

How I Test a Million UI States with Every Merge — Visual Testing with Storybook

Michael Chan

¿Tienes miedo de las animaciones? Bueno, no deberías, React Native Reanimated te tiene cubierto. Tu aplicación móvil puede contar una historia a través de las animaciones, puede ayudar a los usuarios mediante microinteracciones y diferenciar tu aplicación de las demás.

Las animaciones en React Native deben ser divertidas

This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.

Are you afraid of animations? Well, you shouldn't be, React Native Reanimated got you covered. Your mobile application can share a story through animations, can help users through micro-interactions and differentiate your app from the others.

React Native Animations Should Be Fun

Catalin Miron

"Hola, mi nombre es Lenz y hace dos años me diagnosticaron TDAH (trastorno por déficit de atención e hiperactividad)." Bueno, esto no va a ser un grupo de ayuda personal, pero creo que es importante hablar sobre este tema tan poco representado. Desde mi diagnóstico, he pasado mucho tiempo hablando con otros desarrolladores al respecto, y muchos de ellos también tienen TDAH, a menudo con un diagnóstico tardío. Parece que somos una población bastante vulnerable, o más bien, parece que muchas personas con TDAH se sienten atraídas por un trabajo de desarrollo. En esta charla, quiero contarte sobre mí, cómo el TDAH me afectó y cómo el diagnóstico tardío cambió mi vida. Pero no solo cambió mi vida, también afectó a todos los que me rodean. Como colegas, hemos encontrado un nuevo nivel de comprensión entre nosotros que nos ha ayudado más que cualquier evento de construcción de equipos. Y al final, nos ha hecho más productivos, ya que ahora sabemos cómo aprovechar mejor nuestras fortalezas individuales en lugar de tratar de cumplir con las expectativas sociales. También hablaré sobre los síntomas generales del TDAH e intentaré darte una visión general aproximada del tema: qué tipos de tratamientos existen, qué estrategias de afrontamiento hay y dónde está la línea entre "todos somos un poco olvidadizos" y "el TDAH es una enfermedad". Es posible que te reconozcas a ti mismo en esto. O tal vez a un amigo cercano o colega. De cualquier manera, esta charla te dará conciencia e ideas sobre cómo puede funcionar la mente de una persona neurodivergente de manera diferente, o incluso puede ser una llamada de atención importante. Descargo de responsabilidad: aunque tengo interés en el tema y estoy personalmente afectado, no soy un profesional capacitado en el tema y todo lo que escuches aquí solo puede ser una inspiración, pero nunca un consejo médico.

Lidiando con el TDAH como desarrollador

This talk focuses on raising awareness and empathy towards individuals with ADHD, emphasizing the importance of understanding different thinking styles. The speaker shares their personal experience of being diagnosed with ADHD and challenges faced in school and work. They discuss the diverse range of hobbies and skills they developed, as well as the impact of the pandemic on their executive function. The speaker highlights the positive effects of ADHD medication and encourages seeking professional help for diagnosis and treatment. The talk concludes by emphasizing the value of embracing neurodiversity and supporting each other in software development.

"Hi, my name is Lenz and two years ago I was diagnosed with ADHD (attention deficit hyperactivity disorder)." Well, this is not going to be a self-help-group, but I think it is important to talk about this wildly underrepresented topic. Since my diagnosis, I have spent a lot of time talking to other developers about it - and many of them also have ADHD, often a late diagnosis. It seems that we are quite the vulnerable population - or rather, it seems like a lot of ADHD people are drawn towards a developer job. In this talk, I want to tell you about myself, how ADHD affected me and how the late diagnosis changed my life. But it didn't only change my life - it also affected everyone around me. As colleagues, we have found a new level of understanding with each other that helped us more than any team-building event. And in the end, made us more productive since we now know how to better use our individual strengths, instead of trying to meet social expectations. I will also talk about general ADHD symptoms and try to give you a rough overview on the topic - what kinds of treatments exist, what kind of coping strategies there are and where the line between "everybody is a bit forgetful" and "ADHD is an illness" lies. You might recognize yourself in this. Or just a close friend or colleague. Either way, this talk will give you awareness &amp; insights how the mind of a neurodivergent person can work differently - or it may even be an important wake-up-call. Disclaimer: while I have an interest in the topic and am personally affected, I am not a trained professional on the topic and everything you hear here can only be an inspiration, but never medical advice.

Dealing with ADHD as a developer

¿Tu aplicación de React necesita mostrar eficientemente una gran cantidad de datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la cuadrícula, renderizado de celdas y más. Saldrás de este masterclass gratuito de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación de React. Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto y promover la innovación. En este masterclass, verás lo fácil que es empezar con AG Grid. Prerrequisitos: React básico y JavaScript Nivel del masterclass: Principiante

Comenzando con AG Grid y React: La mejor cuadrícula de JavaScript en el mundo

This workshop is about AG Grid, a JavaScript grid with great performance and an ergonomic API. It covers installation, column definitions, row data, sorting, filtering, cell rendering, editing, and styling. The workshop includes exercises to practice hands-on coding. It also explores advanced topics such as value getters, formatters, cell renderers, and custom cell editors. Additionally, it covers persisting data, handling cell value changes, and styling cells and rows using cell classes, styles, and themes.

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application. We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid. Prerequisites: Basic React and JavaScript Workshop level: Beginner

Getting Started with AG Grid and React – The Best Javascript Grid in the World

Brian Love

Los componentes del servidor son una nueva característica emocionante introducida en React 18. Nos permiten aprovechar el rendimiento rápido del servidor al descargar el trabajo detrás de un componente al servidor. ¿Por qué querríamos hacer eso? Porque el servidor tiene acceso directo a la fuente de datos, por lo que la obtención de datos y las llamadas a la API serían realmente rápidas en el servidor. Lo más sorprendente de los RSC es que no agregan ningún kb al paquete del cliente. Entonces, no solo los RSC reducen el tamaño del paquete, sino que también mejoran los tiempos de carga de la página, proporcionando en última instancia una mejor experiencia de usuario. En esta charla hablaré sobre qué son los componentes del servidor en React, por qué los necesitamos. A menudo se confunde a los RSC con el SSR, pero veremos cómo son fundamentalmente diferentes. Crearemos una pequeña aplicación de React utilizando componentes del servidor y veremos los beneficios de rendimiento. También veremos los desafíos que podríamos enfrentar al usar RSC en nuestra aplicación de React normal. Finalmente, profundizaremos en el cerebro de React y veremos cómo suceden las cosas bajo el capó.

Componentes del Servidor sin Tamaño de Paquete

React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.

Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server. The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience. In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different. We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.

Zero Bundle Size Server Components

Aashima Ahuja

Next.js ha ganado popularidad en los últimos años con características como renderizado en el lado del servidor, regeneración estática incremental, optimización de imágenes y más. Next.js es conocido como el framework listo para producción para React. En contraste, GraphQL se destaca por no solo devolver los datos que necesitas con buenas prácticas de diseño de esquemas, sino también por brindar una buena experiencia de desarrollo. En esta charla, hablaré sobre cómo se puede construir una aplicación que no solo escala, sino que también tiene un alto rendimiento con Next.js, GraphQL y Tailwind. Y por último, el futuro del desarrollo de CSS y Frontend consiste en construir utilidades, para que el CSS no se sienta como una ocurrencia tardía. Al final de esta charla, aprenderás cómo pasar de crear una aplicación de muestra a una aplicación lista para producción altamente eficiente.

Construyendo un Sitio Súper Rápido con Next.js, GraphQL y Tailwind ⚡️

Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.

Next.js has grown in popularity over the past couple of years with features like server-side rendering, incremental static regeneration, image optimization, and more. Next.js is known as the production ready framework for React. In contrast, GraphQL is known for not just returning data for what you need with good schema design practices but also a good dev experience. In this talk, I’ll talk about how one can build an app that not just scales but also has high performance with Next.js, GraphQL and Tailwind. And Lastly, the future of CSS and Frontend development is building utilities, so CSS does not feel like an afterthought. At the end of this talk, you will learn how to go from making a sample app to a highly performant production-ready application.

Building a Lightning-Fast Site with Next.js, Tailwind and GraphQL

En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React. Prerrequisitos: - <a href="https://nodejs.org/en/">Node.js</a> instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar <a href="https://code.visualstudio.com/">VS Code</a> para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript

Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma

This Workshop is about building a full-stack application with end-to-end type safety. It covers setting up a SQLite database, creating a GraphQL server, and connecting the client. The focus is on using Prisma, Pathos, and GraphQL Codegen to ensure type safety and improve the developer experience. The Workshop provides step-by-step instructions and resources for participants to follow along and ask questions. It emphasizes the importance of type safety in both the backend and frontend development process.

In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client. Prerequisites: - <a href="https://nodejs.org/en/">Node.js</a> installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use <a href="https://code.visualstudio.com/">VS Code</a> for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript

End-To-End Type Safety with React, GraphQL & Prisma

Sabin Adams

Los widgets son objetos personalizados e interactivos que se colocan en un archivo de Figma o Figjam para ampliar la funcionalidad y hacer todo un poco más divertido. Se escriben en un estilo declarativo similar a los componentes de React, que se traduce para convertirse en un nodo en el lienzo. ¿Entonces se puede hacer lo contrario, del lienzo al código? ¡Sí! Discutiremos cómo utilizamos la API pública de complementos de Figma para generar código de widgets a partir de un archivo de diseño y crearemos un widget funcional juntos utilizando esto.

Construyendo el Generador de Código de Widgets de Figma

This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.

Building Figma’s Widget Code Generator

Jenny Lea

Una introducción a la emergente arquitectura de islas que puede mejorar significativamente el rendimiento de tus aplicaciones.

Astro & Fresh - Comprendiendo la Arquitectura de Islas

The islands architecture is a new way to build websites with low or no JavaScript, using libraries like Astro and Fresh. Server-side rendering improves SEO and loading times, but can still result in large JavaScript payloads. Hydration allows for islands of interactivity, loading only necessary JavaScript. Astro is a framework for implementing the islands architecture, supporting multiple libraries like React and SolidJS. It enables progressive migration between frameworks and integration of different libraries in the same project.

An introduction to the emerging islands architecture which can significantly improve the performance of your apps.

Astro & Fresh - Understanding the Islands Architecture

Arpit Bharti

¿Qué hace que una biblioteca de componentes sea buena? Para crear una biblioteca de componentes que las personas quieran usar, es necesario navegar entre la extensibilidad, la facilidad de uso y la consistencia de diseño. Esta charla cubrirá cómo abordar estos factores al construir una biblioteca de componentes en React, cómo medir su éxito y cómo mejorar las tasas de adopción.

Desarrollo y Fomento de Bibliotecas de Componentes

Today's Talk discusses the importance of a good component API and the balance between rigidity and flexibility. The demo showcases the gradual evolution of a component's configurability while maintaining ease of use. Measuring the effectiveness of a component library involves factors like adoption rate and component coverage. Collecting data and embracing breaking changes are crucial for continuous improvement. Ensuring consumers are updated and on the cutting edge is a responsibility of the library provider.

What makes a component library good? In order to create a component library that people want to use you need to navigate tradeoffs between extensibility, ease of use, and design consistency. This talk will cover how to traverse these factors when building a component library in React, how to measure its success, and how to improve adoption rates.

Developing and Driving Adoption of Component Libraries

Logan Ralston

Lachlan Bradford

Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web, para escribir una aplicación para Android, iOS y la web en un solo código base? Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!Aprenderás:- Configurar navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta- Configurar React Navigation con URLs- Configurar React Native Paper, incluyendo el estilo del cajón de navegación y los encabezados de React Navigation- Configurar un tema de color personalizado que admita el modo oscuro- Configurar favicons/íconos de aplicaciones y metadatos- Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil Prerrequisitos:- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en <a href="https://docs.expo.dev/get-started/create-a-new-app/">https://docs.expo.dev/get-started/create-a-new-app/</a>

Construyendo para Web y Móvil con Expo

React Native Web allows for building mobile and web apps with one codebase. The workshop covers setting up navigation, creating screens, and implementing stack and drawer navigators. It also explores platform-specific functionality, responsive design, and deployment options. React Native Web abstracts away complexity and enables developers to do more with less. The workshop provides resources and encourages participation in live streams and community forums for further learning and support.

We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!You will know:- Setting up drawer and stack navigators with React Navigation, including responsiveness- Configuring React Navigation with URLs- Setting up React Native Paper including styling the React Navigation drawer and headers- Setting up a custom color theme that supports dark mode- Configuring favicons/app icons and metadata- What to do when you can’t or don’t want to provide the same functionality on web and mobile Prerequisites: - Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on <a href="https://docs.expo.dev/get-started/create-a-new-app/">https://docs.expo.dev/get-started/create-a-new-app/</a>

Building for Web & Mobile with Expo

Josh Justice

La nueva arquitectura de React Native ha estado "llegando el próximo año" desde 2019, ¡pero esta vez, realmente está aquí! Entonces... ¿y ahora qué? ¿Qué necesitamos hacer realmente para beneficiarnos de esta nueva y reluciente tecnología? En esta charla, quiero proporcionar algunos conocimientos y análisis en profundidad sobre el estado actual del proceso de migración a la nueva arquitectura, para ayudarte a ti y a tu equipo a evaluar y estimar cuándo y cómo y cuánto tiempo te llevará llegar al siguiente nivel! <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

¡La Nueva Arquitectura Está Aquí... ¿Y Ahora Qué?

The Talk discusses the new architecture in React Native, highlighting its benefits such as native interoperability, concurrency, faster startup, better memory management, and improved code quality. The migration process to the new architecture involves refactoring, codegen, and extending native interfaces. Challenges include typing, configuration, and migrating third-party libraries. React 18 introduces automatic batching and compatibility with the new architecture. Microsoft is expanding React Native to target desktop platforms and has a dedicated open-source tooling repository. The Talk emphasizes the importance of open-source contribution and setting healthy boundaries.

The React Native new architecture has been "coming next year!" since 2019 - but, this time, it’s actually here! So… what now? What do we actually need to do, to benefit from this all new shiny tech? In this talk, I want to provide some insights and in-depth analysis of the current state of the migration path to the new architecture, to help you and your team evaluate and estimate when and how and how long it will take you to get to the next level! <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The New Architecture Is Here… What Now?

Lorenzo Sciandra

Como desarrolladores, nos encanta sumergirnos en métricas de rendimiento, comparar soluciones y realizar pruebas de rendimiento. Aunque no siempre nos guste, a menudo nos vemos obligados a solucionar problemas de rendimiento en nuestras aplicaciones de React y React Native. Pero este proceso no es sostenible y propenso a regresiones, especialmente a medida que la aplicación y el equipo crecen. Lo peor de todo es que estos problemas a menudo son descubiertos por los usuarios, lo que hace que su experiencia sea miserable. En mi charla te presentaré Reassure, una biblioteca de pruebas de regresión de rendimiento para React y React Native, que resulta ser una pieza faltante en nuestras suites de pruebas automatizadas y rendimiento. Detectando problemas antes de que lleguen a producción.

Pruebas automatizadas de regresión de rendimiento con Reassure

Today's Talk introduces Reacher, a performance monitoring tool for React and React Native codebases. It highlights the need for catching performance regressions early in the development process and identifies JavaScript misusage as a common source of performance issues. ReaSure, developed by Covstack, is presented as a promising library that integrates with existing ecosystems and provides reliable render time measurements and helpful insights for code review. Considerations for operating in a JavaScript VM are discussed, including JIT, garbage collection, and module resolution caching. Statistical analysis using the z-score is mentioned as a method for determining the significance of measurement results.

As developers we love to dive into performance metrics, benchmarks, compare one solution to another. Whether we enjoy it or not, we’re often required to fix performance issues in our React and React Native apps. But this process is not sustainable and prone to regressions, especially as the app and team grow. What’s worse, those issues are often discovered by your users, making their experience miserable. In my talk I’ll introduce you to Reassure—a performance regression testing library for React and React Native— which happens to be a missing piece in our automated testing and performance suites. Spotting problems before they hit production.

Automated Performance Regression Testing with Reassure

Michał Pierzchała

Los micro-frontends ayudan a descomponer aplicaciones front-end monolíticas en aplicaciones independientes y desacopladas que se pueden implementar de forma independiente. Esta arquitectura nos ayuda a escalar proyectos a medida que la organización crece, sin embargo, también aumenta la complejidad. ¿Cómo podemos aprovechar esta arquitectura sin tener que enfrentar su costo inicial? En esta charla, mostraré algunos de los riesgos asociados con los micro-frontends y qué patrones y bibliotecas podemos utilizar para beneficiarnos de este estilo arquitectónico sin tener que adoptar completamente los micro-frontends.

Adoptando Micro-Frontends Sin Micro-Frontends

Today's Talk explores the adoption of micro frontends without actually implementing them. The main benefits of micro frontends are business scalability and the ability to independently deploy and compose frontend applications. The process of breaking up a monolith into smaller parts can be done using LEAN principles and composable apps. State management and data sharing in micro frontends are complex topics that require careful consideration to avoid coupling and maintain loose coupling.

Micro-frontends help break up monolithic front-end applications into independently deployable loosely-coupled apps. This architecture helps us scale projects as an organisation scales, however it's also an increase in complexity. How can we leverage this architecture without having to face its upfront cost? In this talk, I'll show some of the risks associated with micro-frontends, and what patterns and libraries we can use to benefit from this architectural style without going full-on micro-frontends.

Adopting Micro-Frontends Without Micro-Frontends

Alex Lobera

Esta charla comparte cómo lograr el renderizado del lado del servidor utilizando WebAssembly y WASMEdge, que es un tiempo de ejecución de WebAssembly. La charla también cubre los beneficios de utilizar WebAssembly para lograr el renderizado del lado del servidor. La charla también mostrará una demostración de cómo lanzar una aplicación de React utilizando el tiempo de ejecución de WasmEdge.

Renderizado del lado del servidor utilizando WebAssembly

Shivai Lamba presents server-side rendering using WebAssembly. Learn how to enable server-side rendering with WebAssembly using a Create React app. See the changes in the app before and after enabling server-side rendering. Support for React 18 and the ability to create streaming applications using WebAssembly. Connect with me on Twitter at TheCloudWeb for more information on WebAssembly.

This talk shares how to achieve Server-side rendering using WebAssembly and WASMEdge which is a WebAssembly Runtime. The talk also covers the benefits of using WebAssembly to achieve Server Side Rendering. The talk will also cover a demo on how to launch a React application using the WasmEdge runtime.

React Advanced 2022

We will be diving deep

Neha Seth