La espada de doble filo del diseño atómico

La complejidad de los sitios web modernos ha crecido significativamente en los últimos años. La creciente demanda de diseños estándar de la industria de alta calidad intensifica aún más los desafíos que enfrentan los desarrolladores frontend.

Hoy en día, incluso las aplicaciones frontend necesitan algunas consideraciones arquitectónicas para agilizar el proceso de desarrollo. En mi artículo anterior , compartí mi experiencia implementando el enfoque de arquitectura limpia en aplicaciones front-end mientras trabajaba en mi proyecto paralelo .

En este artículo, mi objetivo es profundizar en el enfoque del diseño atómico, a partir de mis experiencias con el mismo proyecto. Discutiré sus ventajas y desventajas, y evaluaré su utilidad en diferentes escenarios.

Antecedentes de los sistemas de diseño

Para comenzar, exploremos el concepto de un sistema de diseño. Los sistemas de diseño son colecciones integrales de componentes, pautas y principios reutilizables que permiten a los equipos diseñar y desarrollar interfaces de usuario consistentes en múltiples plataformas.

Actúan como una única fuente de información tanto para diseñadores como para desarrolladores, asegurando que los aspectos visuales y funcionales de un producto se alineen y se adhieran a la identidad de marca establecida. Si está interesado en explorar ejemplos de implementaciones de sistemas de diseño, considere examinar lo siguiente:

• Sistema de diseño de carbono
• Sistema de diseño de ojales

Si quieres profundizar más en el tema de los sistemas de diseño te recomiendo revisar este artículo . Describe este tema en detalle, detalles que no son necesarios para nosotros en el alcance de este trabajo.

Cómo se deriva el diseño atómico de los sistemas de diseño

Sobre la base de los sistemas de diseño, el diseño atómico es una metodología que agiliza la organización y estructuración de componentes y directrices reutilizables. Concebido por Brad Frost, Atomic Design está inspirado en la química, ya que deconstruye las interfaces de usuario en sus bloques de construcción más fundamentales y los vuelve a ensamblar en estructuras más complejas.

Aquí hay una imagen que ilustra la analogía con la química:

Las reacciones químicas están representadas por ecuaciones químicas, que a menudo muestran cómo los elementos atómicos se combinan para formar moléculas. En el ejemplo anterior, vemos cómo el hidrógeno y el oxígeno se combinan para formar moléculas de agua.

En esencia, el diseño atómico es una evolución natural de los sistemas de diseño y proporciona un enfoque sistemático para crear componentes flexibles y escalables. Al aplicar los principios del diseño atómico, los equipos pueden administrar sus sistemas de diseño de manera más eficiente, ya que la naturaleza modular de esta metodología facilita el mantenimiento, la actualización y la ampliación de los componentes y patrones dentro del sistema.

Si le preocupa que esto pueda sonar complejo, no se preocupe. En las próximas secciones, demostraré cómo aplicar estos principios usando un ejemplo de la vida real de la aplicación que he desarrollado, haciéndolo fácil de entender e implementar en sus propios proyectos.

Descripción general del diseño atómico

El diseño atómico organiza los componentes en cinco niveles distintos, cada uno de los cuales se basa en el anterior. Exploremos estos cinco niveles en detalle:

• átomos : los bloques de construcción más básicos de una interfaz de usuario, los átomos representan elementos HTML individuales como botones, campos de entrada y encabezados. Son las unidades funcionales más pequeñas y no se pueden desglosar más.

  
  

• Moléculas : las moléculas se forman combinando dos o más átomos en un grupo funcional. Por ejemplo, una molécula de formulario de búsqueda puede consistir en un átomo de entrada de búsqueda, un átomo de botón y un átomo de etiqueta. Las moléculas representan componentes simples que se pueden reutilizar en un proyecto.

  
  

• organismos : los organismos son componentes más complejos, creados mediante la combinación de múltiples moléculas y/o átomos. Representan distintas secciones de una interfaz de usuario, como un encabezado, un pie de página o una barra lateral. Los organismos ayudan a formar el diseño general y la estructura de una página.

  
  

• plantillas : las plantillas son esencialmente diseños de página creados con organismos, moléculas y átomos. Definen la estructura y la disposición de los componentes en una página sin especificar ningún contenido real, sirviendo como modelo para varios escenarios de contenido.

  
  

• páginas : las páginas son las instancias finales, completamente realizadas de plantillas, completas con contenido y datos reales. Representan lo que los usuarios finalmente verán e interactuarán, mostrando cómo los componentes y el diseño se adaptan a diferentes tipos de contenido y casos de uso.

  
  

La aplicación NotionLingo: un estudio de caso

Con el fin de desarrollar una perspectiva bien informada sobre el diseño atómico para el desarrollo frontend, me embarqué en un viaje para crear una aplicación. Durante un período de seis meses, obtuve información valiosa y experiencia mientras trabajaba en este proyecto.

En consecuencia, los ejemplos proporcionados a lo largo de este artículo se basan en mi experiencia práctica con la aplicación. Para mantener la transparencia, todos los ejemplos se derivan de un código de acceso público.

Puede explorar el resultado final visitando el repositorio o el sitio web en sí.

Tenga en cuenta que usaré ejemplos codificados en React . Si no está familiarizado con este lenguaje, no se preocupe: mi objetivo es ilustrar los conceptos fundamentales del diseño atómico, en lugar de centrarme en los detalles esenciales del código.

Átomos

Para comprender mejor los componentes de mi repositorio, puede encontrarlos en el siguiente directorio: /client/presentation . En esta ubicación, creé un nuevo directorio llamado atoms para mantener una denominación coherente con la metodología de diseño atómico. Este nuevo directorio contiene todas las piezas pequeñas necesarias para construir todo el proceso de incorporación.

La lista completa de átomos es la siguiente:

 atoms ├── box ├── button ├── card ├── card-body ├── card-footer ├── container ├── divider ├── flex ├── form-control ├── form-error-message ├── form-helper-text ├── form-label ├── heading ├── icon ├── input ├── list ├── list-icon ├── list-item ├── spinner ├── tab ├── tab-list ├── tab-panel ├── tab-panels ├── tabs └── text

Estos nombres de átomos pueden resultarle familiares, ya que se basan en el paquete de interfaz de usuario de Chakra . La mayoría de ellos ya contienen el estilo de coincidencia predeterminado para mi aplicación, por lo que no hay nada particularmente único para describir en este nivel. Con eso en mente, podemos proceder directamente a discutir las molecules .

Moléculas

En esta etapa, el proceso de diseño atómico se vuelve más interesante y su verdadero poder comienza a revelarse. Si bien definir los átomos base puede haber sido una tarea monótona y que lleva mucho tiempo, construir nuevos componentes usando átomos se vuelve mucho más agradable.

Para definir las moléculas, creé un directorio molecules dentro de mi directorio /client/presentation . La lista completa de moléculas requeridas es la siguiente:

 molecules ├── available-notion-database ├── full-screen-loader ├── input-control ├── onboarding-step-layout └── onboarding-tab-list

De hecho, con solo cinco moléculas, tenemos suficientes componentes para lograr nuestro objetivo. Es importante tener en cuenta que este también es un lugar ideal para incluir diseños compartidos construidos sobre otros átomos. Por ejemplo, el onboarding-step-layout se utiliza para mantener una apariencia uniforme en los cinco pasos del proceso de incorporación.

Los demás componentes son los siguientes:

• available-notion-database : se usa para mostrar los detalles de la base de datos del usuario obtenido (los usuarios pueden tener varias bases de datos, por lo que brindo la posibilidad de elegir una en el paso 4).

  
  

  El componente aparece en la interfaz de usuario así:

• cargador de pantalla completa : se usa al principio cuando obtengo los detalles del usuario para verificar si el usuario ya definió la integración de Notion o no. El código para este componente se ve así:

 import { FC } from 'react'; import { Flex, Spinner } from '@presentation/atoms'; import { FullScreenLoaderProps } from './full-screen-loader.types'; export const FullScreenLoader: FC<FullScreenLoaderProps> = ({ children, ...restProps }): JSX.Element => ( <Flex alignItems="center" bg="gray.50" height="full" justifyContent="center" left={0} position="fixed" top={0} width="full" zIndex="9999" {...restProps} > <Spinner /> {children} </Flex> );

No hay ciencia de cohetes aquí. Esta es solo una combinación de los átomos flex y spinner ya definidos.

• input-control : un envoltorio para el átomo input con form-label , form-control , form-error-label y spinner para mostrar si está ocurriendo alguna acción de fondo. El componente aparece en la interfaz de usuario así:

• onboarding-tab-list : Este es básicamente un componente de paso, pero en mi caso, estoy usando las pestañas de la interfaz de usuario de Chakra para la navegación, así que de ahí proviene el nombre. El componente aparece así:

Ahora que hay más piezas listas, podemos pasar a definir bloques más grandes en nuestro rompecabezas de diseño.

Organismos

Esta sección es donde creo cada componente responsable de mostrar cada paso del proceso de incorporación.

Para aclarar las cosas, solo les mostraré la lista de organismos creados:

 organisms ├── onboarding-step-one ├── onboarding-step-two ├── onboarding-step-three ├── onboarding-step-four └── onboarding-step-five

Creo que los nombres se explican por sí mismos y no debe haber malentendidos. Para ilustrar cómo armo todo, presentaré el código de un paso como ejemplo. Por supuesto, si quieres ver más, visita mi repositorio .

 export const OnboardingStepFour: FC<OnboardingStepFourProps> = ({ onBackButtonClick, onNextButtonClick, }): JSX.Element => { const { hasApiTokenData, isSetApiTokenLoading, setApiToken, setApiTokenError } = useSetApiToken(); const handleInputChange = debounce(async (event: ChangeEvent<HTMLInputElement>) => { const result = await setApiToken(event.target.value); if (result) { onNextButtonClick(); } }, 1000); return ( <OnboardingStepLayout subtitle="Paste your copied integration token below to validate your integration." title="Validate your integration" onBackButtonClick={onBackButtonClick} > <InputControl isRequired errorMessage={setApiTokenError || undefined} isDisabled={isSetApiTokenLoading || hasApiTokenData} isLoading={isSetApiTokenLoading} label="Integration token" name="integrationToken" placeholder="Your integration token" onChange={handleInputChange} /> </OnboardingStepLayout> ); };

Este código es completamente responsable de mostrar el paso cuatro en mi proceso de incorporación. Creo que la única preocupación que podría tener es hacer solicitudes en organismos. ¿Es esto aceptable? No hay una respuesta única para todos, y necesito responder a estas inquietudes con "Depende". Depende de tu estructura.

Si incluir una llamada API dentro de una molécula u organismo tiene sentido en el contexto de su aplicación y no complica demasiado el componente, puede ser una solución aceptable. Solo tenga cuidado de no dejar que los componentes de la presentación se vinculen demasiado con la obtención de datos o la lógica comercial, ya que puede hacer que su mantenimiento y prueba sean más difíciles.

En mi escenario, este componente se usa en un solo lugar, y otras soluciones para realizar una llamada API en ese escenario son más complejas y pueden producir mucho más código del necesario.

Plantillas

En esta etapa, la atención se centra en la estructura y la disposición de los componentes en lugar de los detalles más finos de la interfaz de usuario. Las plantillas también ayudan a identificar dónde debe residir la administración del estado, que suele ser en los componentes de la página que usan las plantillas.

En el ejemplo de código proporcionado, tenemos un componente Onboarding que sirve como plantilla:

 import { FC } from 'react'; import { Flex, Heading, TabPanels, Tabs, Text } from '@presentation/atoms'; import { OnboardingTabList } from '@presentation/molecules'; import { OnboardingStepFive, OnboardingStepFour, OnboardingStepOne, OnboardingStepThree, OnboardingStepTwo, } from '@presentation/organisms'; import { OnboardingProps } from './onboarding.types'; export const Onboarding: FC<OnboardingProps> = ({ activeTabs, createNotionIntegrationTabRef, displayCreateNotionIntegrationTab, displaySelectNotionDatabaseTab, displayShareDatabaseIntegrationTab, displayValidateIntegrationTab, displayVerifyDatabaseTab, selectNotionDatabaseTabRef, shareDatabaseIntegrationTabRef, validateIntegrationTabRef, verifyDatabaseTabRef, }) => ( <Flex direction="column" overflowX="hidden" px={2} py={{ base: '20px', sm: '25px', md: '55px' }}> <Flex direction="column" textAlign="center"> <Heading color="gray.700" fontSize={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} fontWeight="bold" mb="8px" > Configure your Notion integration </Heading> <Text withBalancer color="gray.400" fontWeight="normal"> This information will let us know from which Notion database we should use to get your vocabulary. </Text> </Flex> <Tabs isLazy display="flex" flexDirection="column" mt={{ base: '10px', sm: '25px', md: '35px' }} variant="unstyled" > <OnboardingTabList activeTabs={activeTabs} createNotionIntegrationTabRef={createNotionIntegrationTabRef} selectNotionDatabaseTabRef={selectNotionDatabaseTabRef} shareDatabaseIntegrationTabRef={shareDatabaseIntegrationTabRef} validateIntegrationTabRef={validateIntegrationTabRef} verifyDatabaseTabRef={verifyDatabaseTabRef} /> <TabPanels maxW={{ md: '90%', lg: '100%' }} mt={{ base: '10px', md: '24px' }} mx="auto"> <OnboardingStepOne onNextButtonClick={displayCreateNotionIntegrationTab} /> <OnboardingStepTwo onBackButtonClick={displayVerifyDatabaseTab} onNextButtonClick={displayShareDatabaseIntegrationTab} /> <OnboardingStepThree onBackButtonClick={displayCreateNotionIntegrationTab} onNextButtonClick={displayValidateIntegrationTab} /> {activeTabs.validateIntegration ? ( <OnboardingStepFour onBackButtonClick={displayShareDatabaseIntegrationTab} onNextButtonClick={displaySelectNotionDatabaseTab} /> ) : null} {activeTabs.selectNotionDatabase ? ( <OnboardingStepFive onBackButtonClick={displayVerifyDatabaseTab} /> ) : null} </TabPanels> </Tabs> </Flex> );

Este componente Onboarding reúne átomos, moléculas y organismos para crear el diseño para el proceso de incorporación. Tenga en cuenta que la lógica de gestión de estado y navegación por pestañas se ha separado de este componente. Las funciones de devolución de llamada y estado necesarias ahora se reciben como accesorios, lo que permite que un componente de "página" de nivel superior maneje la administración de datos y estado.

Esta separación de preocupaciones mantiene la plantilla centrada en el diseño y la estructura al tiempo que garantiza que la gestión del estado se maneje en el nivel adecuado.

Al final, me gustaría presentar el paso 4 como resultado final:

Paginas

En el contexto de nuestra discusión anterior, el componente "página" usa la plantilla Onboarding y maneja la gestión de estado para el proceso de incorporación. Si bien el código para este componente de página específico no se proporciona aquí, puede encontrarlo en mi repositorio. Como se mencionó, no hay nada extraordinario en el código del componente de la página; se enfoca principalmente en administrar el estado y transmitirlo a la plantilla Onboarding .

Si echamos un vistazo a cómo se ve el diseño atómico en la práctica. Vamos a sumergirnos en los pros y los contras de este enfoque.

No hay rosa sin espinas

Si bien el diseño atómico ofrece numerosos beneficios obvios, como la modularidad, la reutilización y la capacidad de mantenimiento, también presenta algunas desventajas que vale la pena considerar al principio:

• configuración inicial y complejidad : el diseño atómico requiere una estructura y una organización bien planificadas, lo que puede llevar mucho tiempo y ser un desafío para configurar inicialmente. También puede introducir complejidad adicional a su base de código, especialmente para proyectos más pequeños donde un enfoque tan granular puede ser innecesario.

  
  

• curva de aprendizaje : para los desarrolladores nuevos en el diseño atómico, la metodología puede tener una curva de aprendizaje pronunciada. Requiere una sólida comprensión de los diferentes niveles y cómo encajan, lo que puede ser abrumador para los principiantes.

  
  

• gastos generales : la implementación del diseño atómico podría implicar la creación de una gran cantidad de componentes pequeños y especializados. Esto puede dar lugar a una mayor sobrecarga en la gestión y el mantenimiento de estos componentes, especialmente cuando un componente solo se utiliza en un contexto específico.

  
  

• riesgo de sobreingeniería : con el enfoque en la creación de componentes reutilizables y modulares, existe un riesgo potencial de sobreingeniería, donde los desarrolladores pueden dedicar demasiado tiempo a refinar componentes individuales en lugar de centrarse en la aplicación más amplia.

  
  

• comunicación y colaboración : el éxito del diseño atómico depende de una comunicación y colaboración claras entre diseñadores, desarrolladores y otras partes interesadas. El no poder establecer un lenguaje común o comprensión de la metodología puede generar confusión e inconsistencias en la implementación.

Sin embargo, este enfoque tiene sus propias fortalezas ya mencionadas. Hablemos de ellos con más detalle:

• escalabilidad : al descomponer el diseño en los elementos más fundamentales, aumentar la complejidad de los componentes se convirtió en una tarea más manejable. Si bien la creación de átomos planteó algunos desafíos, la creación de cualquier componente basado en estos átomos fue extremadamente agradable.

  
  

• eficiencia : la capacidad de reutilizar átomos, moléculas y organismos reduce significativamente el tiempo dedicado al diseño y desarrollo de nuevas funciones. Una vez que se establecen los componentes básicos, crear nuevas interfaces puede ser tan simple como combinar elementos existentes.

  
  

• consistencia : viene directamente del punto anterior. Dado que se utilizan los mismos átomos, moléculas y organismos en múltiples plantillas y páginas, la interfaz de usuario se mantiene uniforme, proporcionando una experiencia perfecta para los usuarios.

  
  

• documentación : el diseño atómico soporta inherentemente la documentación. La estructura basada en átomos puede servir como una guía visual clara sobre cómo se deben construir y usar los componentes. Esto puede ser especialmente útil para incorporar nuevos miembros del equipo.

  
  

• mantenibilidad : una de las mayores fortalezas del diseño atómico es cómo contribuye a la mantenibilidad de un sistema de diseño. Al dividir todo en sus partes atómicas, cualquier cambio o actualización se puede realizar a nivel atómico y luego propagarse a través del sistema. Por ejemplo, si decide cambiar el color de un botón, solo necesita realizar este cambio una vez a nivel de átomo, y se reflejará en todas las moléculas, organismos y plantillas donde se usa este botón. Esto simplifica enormemente el proceso de actualización y mantenimiento del sistema de diseño a lo largo del tiempo.

Conclusión

En conclusión, si bien el diseño atómico puede parecer un arma de doble filo, un poco desalentador en términos de configuración inicial y curva de aprendizaje, sus beneficios potenciales bien valen la lucha inicial. ¡Y recuerda, incluso las espadas más formidables son inofensivas en manos de un caballero habilidoso!