El Medio Desordenado — Navegando la Complejidad en Aplicaciones React Grandes

Rate this content
Bookmark

El proyecto comenzó de maravilla: el equipo estaba motivado, avanzando rápidamente y lanzando funciones antes de lo previsto. Pero poco a poco, la complejidad se fue infiltrando. Ahora, implementar pequeños cambios lleva una eternidad, la deuda técnica se está acumulando a un ritmo alarmante y todos están perdiendo la confianza de que el proyecto se completará alguna vez. Bienvenidos al medio desordenado.


Tomando ejemplos de proyectos reales que se lanzaron demasiado tarde, exploraremos los síntomas y las causas de la complejidad en las aplicaciones React grandes, y compartiremos consejos y estrategias para lidiar con ella antes de que se apodere de tu base de código.

10 min
15 Nov, 2023

AI Generated Video Summary

Gestionar la complejidad en las aplicaciones React grandes es un desafío, ya que tiende a crecer exponencialmente con el tiempo. La composición de componentes es una técnica clave que permite flexibilidad en las aplicaciones React, pero demasiada composición puede hacer que los componentes sean más difíciles de usar. Gestionar la complejidad y reducir la carga cognitiva es crucial, y estrategias como controlar la evolución de la abstracción y minimizar la información necesaria para cambios simples pueden ayudar. La simplicidad es difícil, pero importante para frenar el crecimiento de la complejidad.

1. Gestión de la complejidad en grandes aplicaciones React

Short description:

Hola React Summit, mi nombre es Maxi Ferreira y hoy quiero compartir con ustedes algunas de mis reflexiones sobre la gestión de la complejidad en grandes aplicaciones React. A menudo imaginamos que la complejidad crece linealmente con el tiempo, pero tiende a crecer exponencialmente. Definiré la complejidad como cualquier cosa que haga que el sistema sea más difícil de cambiar o entender. Compartiré mis tres estrategias y técnicas favoritas para ayudarles a manejar esta creciente complejidad en grandes proyectos React.

Hola React Summit, mi nombre es Maxi Ferreira y hoy quiero compartir con ustedes algunas de mis reflexiones sobre uno de mis temas favoritos, que es la gestión de la complejidad en grandes aplicaciones React. Pero antes de empezar, imaginemos el viaje de cualquier gran proyecto. Podríamos imaginar que va a ser algo así, vamos a hacer progresos constantes con el tiempo hasta que finalmente llegamos a la meta, lanzamos a producción y salimos a celebrar con nuestro equipo. En realidad, sin embargo, es mucho más probable que sea algo así. Las cosas se complican en el medio. Las características ahora tardan una eternidad en lanzarse, el dev técnico se acumula muy rápidamente y la meta parece alejarse cada día más. La razón de que esto suceda es que a menudo imaginamos que la complejidad crece linealmente con el tiempo. Cuanto más progreso hacemos, más crece la complejidad del código, y eso es algo que esperamos. Pero más a menudo que no, la complejidad tiende a crecer exponencialmente. Así que cuando estamos a mitad de camino en el proyecto, podemos ver que la complejidad no está disminuyendo. Puede resultar bastante abrumador.

Para el propósito de esta charla, vamos a definir la complejidad como cualquier cosa que haga que el sistema sea más difícil de cambiar o más difícil de entender. Lo que me gusta de esta definición es que podemos invertirla y obtenemos exactamente lo que necesitamos hacer para lograr la simplicidad, que es hacer que las cosas sean fáciles de cambiar y más fáciles de entender. Así que hoy quiero compartir con ustedes mis tres estrategias y técnicas favoritas para ayudarles a manejar esta creciente complejidad en grandes proyectos React, que espero que sean útiles, especialmente si están en medio del caos de su proyecto en este momento

2. Composición de Componentes en React

Short description:

La composición de componentes permite flexibilidad en las aplicaciones de React. Al descomponer un componente grande en otros más pequeños, podemos hacer cambios sin agregar numerosas props. Sin embargo, demasiada composición puede dificultar el uso de un componente.

ahora. La primera es la composición de componentes. ¿A qué me refiero con esto? Aquí tenemos un componente de tarjeta de ubicación que toma un par de props y renderiza esta hermosa tarjeta que vemos a la derecha. Se ve bastante bien en realidad y es definitivamente simple y fácil de usar. El problema con este componente es que no es muy flexible, por lo que si quieres hacer un cambio simple como ocultar ese botón de agregar a favoritos que vemos allí en la parte inferior derecha, entonces nuestra única opción es agregar otra prop. Eso no está tan mal. Es solo una prop extra y el componente sigue siendo bastante simple y fácil de usar. Pero ahora tenemos un nuevo requisito. También queremos hacer un cambio en la etiqueta del botón en algunas partes de la aplicación. Bueno, supongo que podemos agregar otra prop para eso. Y esto todavía está bien. Pero tenemos que tener cuidado aquí porque ahora abrimos la puerta para personalizar cualquier cosa en este componente a través de su interfaz. Entonces, ¿adivina qué va a pasar la próxima vez que se le pida a alguien que cambie el color del botón en alguna parte de la aplicación? Van a agregar otra prop. Podemos ver cómo esto puede salirse de control bastante rápido.

3. Mejorando el Diseño con la Composición de Componentes

Short description:

La composición de componentes permite flexibilidad en las aplicaciones de React. Al descomponer un componente grande en otros más pequeños, podemos hacer cambios sin agregar numerosas props. Sin embargo, demasiada composición puede dificultar el uso de un componente.

Entonces, veamos cómo podemos mejorar este design con la composición de componentes. Todavía tenemos un componente de tarjeta de ubicación aquí que maneja quizás el diseño del componente. Pero ahora no toma ninguna prop. En cambio, estamos definiendo el contenido de la tarjeta a través de componentes hijos. Así que ahora es mucho más flexible. Si quieres ocultar el botón de favorito como lo hicimos antes, puedes simplemente apuntar a ese elemento en el JSX y eliminarlo. Y ahí lo tenemos. Queremos cambiar la etiqueta y el color del botón. Bueno, el botón está justo ahí. Así que podemos hacer el cambio en el botón directamente sin tener que cambiar ninguna otra parte del componente. Lo importante a tener en cuenta aquí es que con la composición, generalmente hay un equilibrio entre la flexibilidad y la facilidad de uso. Podemos descomponer un componente grande en muchos más pequeños, y esto hará las cosas súper flexibles. Pero con muchas piezas pequeñas, el componente se vuelve más difícil de usar. En el otro extremo del espectro, tenemos un componente muy simple que no es muy flexible en absoluto, como nuestro ejemplo inicial del componente de tarjeta de ubicación. Por lo general, quieres estar en algún lugar en el medio cuando se trata de composición. Y esto te dará el nivel correcto de composición para el problema que estás tratando de resolver. Ahora, ¿cómo encontramos este punto dulce? Esto me lleva a mi segundo punto, que es usar los modules. Este es un concepto que proviene del libro una filosofía de diseño de software design, que es uno de mis libros favoritos, y habla sobre la profundidad del módulo como un equilibrio entre coste y beneficio. Cualquier módulo, podría ser una función, una clase, o un componente de React tiene esencialmente dos partes. Tiene una interfaz, que en el caso de un componente de React, son las props del componente. Y tiene una pieza de funcionalidad, que es lo que hace el módulo. Un módulo profundo es aquel que proporciona una funcionalidad poderosa a través de una interfaz simple. Un módulo superficial por otro lado, es aquel que proporciona muy poca funcionalidad en comparación con la complejidad de su interfaz. Entonces, veamos un ejemplo de un componente profundo de React. Este componente FileAbloader, sabes, tiene mucha funcionalidad. Se encarga de la validation, arrastrar y soltar, la subida real del archivo, incluyendo el manejo de errores. Y al mismo tiempo, la interfaz es muy simple. Solo tiene dos props. La implementación de este componente es probablemente muy compleja. Pero debido a la simplicidad de la interfaz, esa complejidad

4. Gestionando la Complejidad y Reduciendo la Carga Cognitiva

Short description:

La complejidad del componente puede propagarse por toda la base de código. Es importante controlar la evolución de las abstracciones y reducir la carga cognitiva. Al minimizar la información necesaria para cambios simples, podemos facilitar el desarrollo. Un ejemplo es declarar los derechos de acceso en las listas de componentes. Otras estrategias incluyen nombres de variables claros, buenos comentarios, patrones de diseño predefinidos y documentar decisiones importantes. La simplicidad es difícil, pero podemos ralentizar el crecimiento de la complejidad.

está bien encapsulado. No se filtra al resto del sistema. Compáralo con este componente de botón. Se podría argumentar que no hace mucho en comparación con la complejidad de su interfaz. Más importante aún, podemos ver que está mezclando varias preocupaciones aquí. Tenemos las preocupaciones del propio botón, pero también tenemos las preocupaciones del icono y la información sobre herramientas. Así que no solo la implementación de este componente es probablemente muy compleja, sino que también está propagando esa complejidad por el resto de la base de código.

Es importante saber que nadie se propone construir algo muy complejo desde el principio. Las cosas suelen empezar de manera simple, como nuestra implementación inicial de la tarjeta de ubicación. Este era un componente potente con una interfaz simple. Era un módulo profundo, hasta que dejó de serlo. Así que es importante que controlemos esta evolución para asegurarnos de que las abstracciones que implementamos al principio siguen siendo las soluciones correctas a los problemas que tenemos hoy.

Y esto me lleva a mi técnica final para gestionar la complejidad, que es enfocar tus esfuerzos en reducir la carga cognitiva. Con esto, me refiero a minimizar la cantidad de información que necesitas mantener en tu cabeza para hacer un cambio simple. Toma este componente, por ejemplo. Es una cuadrícula de enlaces a diferentes partes de la aplicación que los usuarios verán en sus paneles de control, pero diferentes usuarios verán diferentes enlaces dependiendo de qué tipo de usuario sean y también de qué plan tengan. Por ejemplo, un usuario regular en el plan básico solo verá estos cuatro enlaces. Ahora imagina que queremos hacer un cambio, como añadir un nuevo enlace a este grupo particular de usuarios. Así es como se ve la implementación. Es bastante limpia, y veo que tengo una lista de enlaces allí, así que sé que ahí es donde necesito ir y añadir mi nuevo enlace. Veo que estamos filtrando los enlaces en función del usuario y del plan, lo cual es genial porque eso es exactamente lo que necesito hacer, y luego simplemente estamos renderizando los enlaces.

Ahora esta función de filtrar enlaces parece importante. Sé que necesito entrar allí y cambiar la lógica de alguna manera para que muestre mi nuevo enlace a los conjuntos correctos de usuarios, y cuando abro esta función podríamos encontrar algo que se vea así. Ahora esta es una implementación particularmente desordenada, así que no te fijes demasiado en ella. El punto importante aquí es que ahora necesito entender completamente esta lógica de filtrado para hacer mi pequeño cambio simple. Así que necesito cargar toda esta información en mi cabeza para hacer el cambio. Ahora imagina si el componente de cuadrícula se ve algo así en su lugar. Es muy similar y todavía tengo una lista de enlaces, pero ahora ves que puedo declarar qué usuarios y plantas tienen acceso al enlace directamente en la lista. Así que todo lo que necesito hacer es añadir un nuevo elemento aquí y puedo seguir con mi día. Observa que todavía estamos llamando a la función de filtrar enlaces y por todo lo que me importa esa función puede ser muy muy compleja, pero ahora yo ni siquiera necesito abrir esta función para hacer ese cambio. Me ahorro tener que cargar toda esa lógica en mi cabeza. Este es solo un ejemplo de cómo podemos reducir la carga cognitiva en nuestra aplicación. Otras cosas que podemos hacer incluyen el uso de nombres de variables claros para que no tengamos que adivinar qué hace un componente o una variable, escribir buenos comentarios que no repitan el código sino que expliquen el por qué y el cómo, usar patrones de diseño predefinidos design patterns porque ya tenemos un entendimiento compartido de cómo funcionan, y documentar decisiones importantes en algún lugar, particularmente esas decisiones de alto nivel que simplemente no pertenecen a un comentario de código. El mensaje central de esta charla es que la simplicidad es muy difícil. Hacer las cosas fáciles de cambiar y fáciles de entender es definitivamente posible pero no es fácil en absoluto. La complejidad es un enemigo imposible. Nunca podemos eliminarla completamente pero sí tenemos cierto nivel de control sobre su crecimiento y espero que puedas usar algunas de las estrategias que cubrimos hoy para ralentizarla antes de que se apodere de tu base de código. Si disfrutas hablando sobre la complejidad, el diseño de software y la arquitectura puedes encontrarme en línea como charca en todas las redes sociales y también en mi sitio web frontend.skl donde escribo sobre diseño de software y arquitectura para desarrolladores de frontend. Muchas gracias por tenerme y espero que disfrutes el resto de la masterclass.

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

React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.
React Day Berlin 2022React Day Berlin 2022
23 min
The Sorcery of Building a Cross Platform Design System Architecture
When we want to build a “cross-platform mobile app” the answer always is React Native but what if you want to build a “cross-platform app” that runs across mobile and browser? Here’s where React Native falls short. react-native-web is trying to bridge this gap to some extent but the primary requirement is to write your code in React Native which gets converted to the web, but that itself has a bunch of downsides and the biggest one being - forcing mobile app developers to understand how browsers work. In this talk, I’ll share how we are building a true cross-platform architecture without using react-native-web for our design system at Razorpay.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React