Domando el Dragón de la Gestión de Estado

Rate this content
Bookmark

Pasamos mucho tiempo discutiendo qué biblioteca de estado deberíamos usar, y es justo. Hay bastantes, desde la común que todos usan y aman odiar, hasta esa alternativa peculiar, hasta varios recién llegados. Sin embargo, discutir cuál biblioteca es la mejor pone el carro antes que el caballo.

Al averiguar cómo manejar el estado, primero deberíamos preguntarnos: ¿qué diferentes categorías de estado necesitamos? ¿Cuáles son las restricciones de cada categoría? ¿Cómo se relacionan entre sí? ¿Cómo se relacionan con el mundo exterior? ¿Cómo evitamos que se conviertan en una gigantesca y frágil bola de hilo? Y más.

Esto puede sonar abrumador, ¡pero no temas! En esta charla, te guiaré sobre cómo responder estas preguntas y cómo elaborar un sistema de estado accesible, mantenible y escalable. Y sí, también hablaré sobre cómo elegir una biblioteca de gestión de estado.

Bryan Hughes
Bryan Hughes
23 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute varios aspectos de la gestión de estado en el desarrollo de software. Cubre diferentes tipos de estado, como datos de arranque, datos cargados de manera perezosa y datos reactivos. La charla también explora el concepto de localidad en la gestión de estado, incluyendo el estado local, global y regional. Introduce bibliotecas como Recoil y Jotai que desafían el concepto de tienda global única y proporcionan una mejor localidad. La charla enfatiza la importancia de configurar los sistemas de gestión de estado para el éxito y crear sistemas confiables para centrarse en la satisfacción del usuario.

Available in English

1. Introducción a la Gestión de Estado

Short description:

Hola a todos. Mi nombre es Brian Hughes, y soy un ingeniero de frontend en Patreon. Hoy quiero hablar sobre algunas cosas que he aprendido a lo largo de los años sobre cómo construir soluciones exitosas de gestión de estado dentro de las aplicaciones. El estado no es solo datos, es cómo accedemos, leemos, actualizamos y sincronizamos los datos. Es más que solo bibliotecas, es toda la casa. Al diseñar una solución de gestión de estado, una pregunta importante que hacer es ¿cuándo se crea el estado? Hay tres categorías de estado: datos de arranque, estado previo a la interacción y estado dinámico.

Hola a todos. Mi nombre es Brian Hughes, y soy un ingeniero de frontend en Patreon. En Patreon, estoy en un equipo llamado plataforma de frontend, y nuestro equipo tiene la tarea de gestionar básicamente todas las bases para nuestro código de frontend. Y esto incluye architecture y la state management. Y hoy quiero hablar sobre algunas cosas que he aprendido a lo largo de los años sobre cómo construir soluciones exitosas de state management dentro de las aplicaciones. Porque creo que esta es una parte realmente crítica para tener un exitoso código de frontend. También es una que tiende a estar poco invertida.

Comencemos con la definición. ¿Qué es el estado? Así que defino el estado como data y todos sus mecanismos relacionados. Sabemos que intrínsecamente creo que el estado no es solo data, ¿verdad? Data es solo un montón de, bueno, data. Realmente es cómo estamos accediendo a esos data? ¿Cómo estamos leyendo esos data? ¿Cómo los estamos actualizando? ¿Cómo estamos sincronizándolos? Entonces, el estado es realmente su data y todos esos mecanismos asociados con él. Los mecanismos son más que solo bibliotecas. Creo que muchas veces cuando pensamos en el estado, decimos, bueno, tenemos este esquema de API que viene de nuestro backend y nos dice qué data tenemos. Y elegimos la biblioteca de state management Redux, recoil, Jotie, lo que sea, y eso es todo, ¿verdad? Pero eso no es todo. Esos son partes realmente importantes. La forma en que me gusta pensar en ello es que nuestro esquema de API, qué data devuelve el backend y las bibliotecas que usamos para acceder a estos data, eso es como la base de una casa. Es realmente crítico, por supuesto, es la base. Pero también necesitamos paredes y un techo y cosas así también. Y una verdadera solución de state management en una aplicación de frontend, especialmente cualquier aplicación realmente razonablemente compleja es que tenemos que pensar en esto de manera holística, tenemos que pensar en toda la casa. Así que siempre que estoy diseñando una solución de state management, ya sea si es para una aplicación completamente nueva, reescribiendo una antigua, o incluso si es solo agregar una nueva página a un sistema ya existente, hay un puñado de preguntas que realmente me gusta hacerme. Y solo tenemos tanto tiempo hoy, así que solo me voy a quedar con dos de las más importantes o al menos que creo que son importantes, y también creo que no se habla tanto como desearía que se hiciera. Entonces, la primera pregunta es, ¿cuándo se crea el estado? Si pensamos en una aplicación de frontend, no es una instantánea en el tiempo, ¿verdad? Existe a lo largo del tiempo y cambia y reacciona a la entrada del usuario, ¿verdad? Entonces, ¿cuándo está entrando en existencia el estado? Entender eso realmente informa qué tipo de estrategia de testing necesitamos para ello, qué tipos de salvaguardias necesitamos para acceder y todo tipo de cosas. Y realmente depende de la respuesta a esta pregunta. Y creo que hay aproximadamente tres categorías de estado cuando se trata de esta naturaleza temporal. La primera categoría es el estado que se crea antes del inicio, también conocido como data de arranque. Y cuando pensamos en esto, tomaremos, por ejemplo, un sitio de redes sociales. Usaremos eso como ejemplo a lo largo de esta charla. En un sitio de redes sociales, cargamos la página, lo primero que hacemos es ver un montón de publicaciones. Eso es algo que existe antes de que podamos comenzar a interactuar. Y esto sucede, o al menos una forma en que se puede hacer es que podemos hacer esto como parte de data de arranque en un moderno

2. Ensamblaje de Datos y Trampas

Short description:

En Next.js, los datos para el primer renderizado se ensamblan llamando a múltiples puntos finales de la API del back-end y luego iniciando la aplicación. Sin embargo, la creación y el consumo de datos están desacoplados, y necesitamos mantenerlos sincronizados. Los datos pasan por múltiples pasos y se canalizan, pasando por diferentes lugares antes de ser accedidos. Aunque implementar esto no es complicado, todavía requiere escribir y mantener código, lo que conlleva un costo.

configuración de renderizado del lado del servidor. Digamos con Next.js. Y en este mundo, la idea es que primero, ensamblamos todos los data necesarios para hacer ese primer renderizado. Sabes, llamamos a nuestro back-end, generalmente a múltiples puntos finales de la API del back-end, y podríamos hacer algo de hidratación, masajeo de data. Ensamblamos todo eso, y solo entonces, una vez que hemos terminado de hacer eso, hacemos iniciar la aplicación y hacer ese primer renderizado. Y así hay un par de trampas para estar al tanto de esto. Y como mencioné, esta creación de data y el consumo de data, están bastante desacoplados. La forma en que data se ve, por ejemplo, en Next.js en lugar de eso función get-server-side-props, la forma en que trabajamos con ella, cómo se ve y todo suele ser diferente a cuando lo leemos desde, digamos, dentro de Redux o algo así. Y así solo necesitamos tener en cuenta que estos están desacoplados, y por lo tanto nosotros necesitamos pensar en mantenerlos sincronizados. Ahora, en realidad no es tan complicado hacerlo en la práctica. Usualmente TypeScript es una gran solución para esto, pero aún es algo que tenemos que pensar, y por lo tanto también tenemos que mantener. Otro poco de trampa con esto es que estos data pasan por un par de pasos y se canalizan. Como dije, comenzamos llamando a múltiples puntos finales para buscar diferentes, a menudo bits de data no relacionados. Estamos buscando quién es el usuario actual, cuál es la lista de más publicaciones recientes, cuáles son los temas de tendencia actuales, cosas así. Y tomamos todos los data dispares y los apretamos juntos en una bola. Y lo pasamos a través de un par de lugares diferentes. Entra en nuestro componente de nivel superior, lo pasamos a nuestras bibliotecas a Redux digamos cuando estamos inicializando nuestra tienda, solo entonces para lo descomponemos y lo accedemos más tarde. Y de nuevo, esto no es particularmente complicado para implementar, pero es código. Y cada vez que implementamos, tenemos que escribir código para hacer algo. No importa cuán simple sea ese código, sigue siendo código que debe mantenerse y sigue siendo código

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
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.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.
The Zen of Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A