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.

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.

Available in English

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

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
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.
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.
Walking the Line Between Flexibility and Consistency in Component Libraries
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.
Find Out If Your Design System Is Better Than Nothing
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.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
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.

Workshops on related topic

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
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