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.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

La gestión de la complejidad en grandes aplicaciones React se refiere a abordar y simplificar cualquier aspecto que haga que el sistema sea más difícil de cambiar o de entender. Maxi Ferreira destaca que la complejidad tiende a crecer exponencialmente en los proyectos, por lo que es crucial encontrar estrategias para manejarla efectivamente.

Las tres estrategias propuestas por Maxi Ferreira incluyen la composición de componentes, el uso de módulos profundos y la reducción de la carga cognitiva. Estas técnicas ayudan a hacer que los sistemas sean más fáciles de cambiar y entender, abordando directamente la complejidad de grandes proyectos.

La composición de componentes permite una mayor flexibilidad al definir el contenido de los componentes a través de componentes hijos en lugar de usar múltiples props. Esto simplifica los componentes y los hace más fáciles de modificar sin añadir complejidad adicional a la interfaz del componente.

Un módulo profundo en React es un componente que ofrece una funcionalidad considerable a través de una interfaz simple, manteniendo su complejidad interna bien encapsulada y no expuesta al resto del sistema. Esto equilibra el coste y el beneficio, simplificando la interacción con el componente sin sacrificar su capacidad.

Reducir la carga cognitiva implica minimizar la cantidad de información que los desarrolladores deben retener para realizar cambios. Esto se puede lograr mediante la implementación de interfaces claras, el uso de nombres de variables descriptivos, la documentación adecuada de decisiones importantes y la simplificación de la lógica de funciones complejas.

Es crucial controlar la evolución de la complejidad para asegurar que las soluciones y abstracciones iniciales sigan siendo efectivas ante los problemas actuales. Sin un control adecuado, la complejidad puede crecer de manera descontrolada y hacer que el sistema sea más difícil de modificar y entender.

Maxi Ferreira
Maxi Ferreira
10 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
React Summit 2022React Summit 2022
27 min
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.
Descubre si tu sistema de diseño es mejor que nada
React Summit 2022React Summit 2022
20 min
Descubre si tu sistema de diseño es mejor que nada
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
JSNation 2023JSNation 2023
10 min
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

Workshops on related topic

Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
React Advanced Conference 2022React Advanced Conference 2022
118 min
Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
Workshop
Richard Moss
Richard Moss
En este masterclass, recorreremos los enfoques más efectivos para construir componentes de UI escalables que mejoren la productividad y felicidad del desarrollador :-) Esto implicará una combinación de ejercicios prácticos y presentaciones, que cubrirán los aspectos más avanzados de la popular biblioteca styled-components, incluyendo la tematización e implementación de utilidades styled-system a través de props de estilo para un desarrollo rápido de UI, y culminando en cómo puedes construir tu propia biblioteca de componentes personalizada y escalable.
Nos enfocaremos tanto en el escenario ideal, donde trabajas en un proyecto nuevo, como en tácticas para adoptar incrementalmente un sistema de diseño y enfoques modernos para el estilo en una base de código existente con algo de deuda técnica (¡que suele ser el caso!). Al final del masterclass, deberías sentir que comprendes los compromisos entre diferentes enfoques y sentirte seguro para comenzar a implementar las opciones disponibles para avanzar hacia el uso de una biblioteca de componentes basada en un sistema de diseño en la base de código en la que trabajas.
Prerrequisitos: - Familiaridad y experiencia trabajando en grandes bases de código de React- Una buena comprensión de los enfoques comunes para el estilo en React