Un artículo más dedicado al mundo de los componentes. Vamos a descubrir un tipo de herramienta que permitirá arquitecturizar el ecosistema de componentes de tus proyectos frontend: UI Component Explorer.
El uso de componentes a la hora de crear interfaces de usuarios web nos permite crear aplicaciones reusables, predecibles y modulares. Este tipo de aproximación puede ser sencillo para una aplicación de tamaño pequeño-mediano, el problema surge cuando tienes un gran ecosistema de componentes y una aplicación grande. En este tipo de aplicaciones la complejidad de mantener este sistema puede ser un reto para un equipo de desarrollo frontend. Por lo que hay que ser inteligentes y crear una arquitectura solida de componentes, que nos ayude en nuestros objetivos.
Una de las maneras en las que un equipo de desarrollo frontend puede asegurar que su arquitectura tiene la capacidad de evolucionar de una manera suficientemente inteligente, es usar un UI Component Explorer. Estas herramientas son cruciales para un equipo frontend, para mantener el ecosistema de componentes y permitir que crezcan las aplicaciones de una manera coherente.
Modularización
Desde siempre los ingenieros han usado la modularización para construir complejas maquinas y sistemas. Actualmente el desarrollo está marcado por este concepto, ya que se están usando arquitecturas de microservicios, para crear sistemas modulares y distribuidos. En el mundo frontend, la tendencia está en construir componentes reutilizables que permitan construir una aplicación de una manera ágil, intuitiva y sencilla.
La reciente adopción de estos patrones frontend han permitido avanzar en la construcción de interfaces de aplicaciones web complejos de una forma modular. Actualmente la fama de frameworks como React, Angular o Vue han conseguido obtener una jerga común para hablar de estos términos.
Librería de Componentes
Por todo ello, construir una librería de componentes es una forma maravillosa para que el equipo de desarrollo aproveche esta sencillez del ecosistema para montar sus interfaces de usuario. La adopción generalizada de frameworks como React, Angular y Vue obliga a los equipos a descomponer las UI en componentes simples. Estos componentes sirven como bloques de construcción de aplicaciones; la colección de todos esos componentes es la base de una librería de componentes.
El enfoque del uso de componentes permite a equipos de desarrollo e individuos comenzar a construir su propio inventario de elemento de diseño personalizados poco a poco. Cuando esta librería está lo suficiente madura, aportará al equipo una agilidad increíble y empezar a componer interfaces a través de los distintos componentes ya desarrollados.
Además, la flexibilidad es característica principal de las bibliotecas de componentes. Cada componente se puede actualizar o reemplazar sin afectar la integridad de la librería ni de las aplicaciones. Esto significa que no está limitado a un conjunto de herramientas de interfaz de usuario a la vez, se puede mezclar, combinar y personalizar componentes del ecosistema según sea necesario. Además cualquier desarrollador podrá trabajar en su componente de una manera totalmente independiente al resto del equipo, sin molestarse o generar dependencias.
Como construcción, los componentes son más potentes y más fáciles de usar que las abstracciones de código. Son piezas independientes de funcionalidad que tienen entradas y salidas bien definidas. Es importante entender el interés de crear componentes agnósticos. Los componentes deben ser diseñados para vivir aislados de la configuración prevista y el contexto de datos. La encapsulación alienta a los desarrolladores a ampliar la funcionalidad y el estilo a nivel de componente. No es necesario confiar en un Javascript común o un CSS global de aplicación, con los componentes todo esto se puede encapsular en el componente.
UI Component explorers
Los UI Component Explorers ayudan a los equipos de desarrollo a construir interfaces de usuario web modulares, visualizando el estado de los componentes que se han construido y son totalmente independientes de la lógica de negocio y layout. Esto permite que esta herramienta pueda simular los distintos estados por los que puede pasar el componente, facilitando la reutilización y el testing de estas encapsulaciones.
Un Component Explorer se puede considerar un diccionario de interfaces de usuario modulares. Estos buscan mitigar la inconsistencia mostrando todos los estados en los que puede estar el componente. Resaltar las distintas “fotografias estáticas” del componente permite a los desarrolladores a construir cada estado de forma independiente. Por lo tanto, todos los estados de un componente se pueden probar de forma aislada y los estados que son particularmente difíciles de reproducir.
Alternar entre “estados” ayuda a los desarrolladores a validar rápidamente lo que se espera y afinar las interacciones o animaciones entre los distintos estados. Por ejemplo, un componente que he desarrollado para mi librería de componentes es un Uploader, que permite arrastrar un fichero, subirlo a un back-end y el componentes por si solo debe actualizarse en función del estado en que se encuentre, subiendo ficheros, un error en la subida, ficheros subidos correctamente…
Componentes documentados, organizados y reusables
El uso de los Component Explorers, permite a los equipos a trabajar de tal manera que incluir una nueva pieza de interfaz debe de seguir un proceso, incluirlo en la librería y en el Component Explorer, para que pueda ser descubierto, organizado y documentado por cualquier otro desarrollador y este comience a utilizarlo.
Construir un sistema de interfaces consistente y reutilizable, va a permitir construir interfaces de usuario complejos de una manera sencilla y con una alta velocidad del equipo. El caso de uso que tengo actualmente en mi empresa es la construcción de aplicaciones que visualmente tienen una similitud del 80% y orientadas al mismo grupo de usuarios. Si hay algo que funciona, en una aplicación es inteligente reutilizarlo en la siguiente cuando el usuario ya espera el mismo comportamiento. Se trata de un caso de uso en el que se justifica muy bien este tipo de herramientas, por que todo el equipo puede utilizar estas piezas aportando una madurez a la construcción, con componentes muy probados y un gran impacto en la velocidad del desarrollo.
Empresas como Facebook tienen un equipo 100% dedicado a mantener, crear, ajusta y aprobar componentes gráficos, y valoran este paradigma además de entender las ventajas y la reducción de futuros costes al invertir en ello.
Otra de las ventajas de este tipo de herramientas es que son muy colaborativas y son una galería de cara a todos los miembros del proyecto, fácilmente capaz de compartirse y permiten manejar un lenguaje común y sencillo.
Al final el Component Explorer no deja de ser una aplicación por si misma que sirve de sandbox para componentes aislados. Personalmente además del Component Explorer, recomiendo construir un scaffolding a través de la librería de componentes, formando un layout sin funcionalidad que pueda representar la construcción de una aplicación. Esto permite arrancar los proyectos con una estructura ya definida y con la base suficiente para no partir del “folio en blanco”.
¿Que UI Component Explorer utilizo?
Existen muchos productos que proporcionan soluciones para construir tu propio Component Explorer. Personalmente he utilizado Storybook en React y tengo buen feedback, ya que es bastante sencillo de instalar, configurar y utilizar. Entre algunas empresas que usan este Component Explorer se encuentran Airbnb o Lonely Planet.
A continuación te dejo una lista de los Complnent Explorers más conocidos por framework:
React
Vue
Angular
Artículos recomendados
Para construir este post me he basado en los artículos de este blog , los cuales recomiendo lectura encarecidamente:
- https://blog.hichroma.com/component-driven-development-ce1109d56c8e
- https://blog.hichroma.com/ui-component-playbook-fd3022d00590
- https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a
- https://blog.hichroma.com/beyond-bootstrap-moving-from-ui-toolkit-to-component-library-f0a34f05e98b
Espero que este artículo sea útil para entender el concepto y comenzar a construir un ecosistema de componentes. Si ya estas utilizando este tipo de herramientas. ¿Cual de ellas te resulta mas útil o has probado, o cuéntanos tu experiencia con tu arquitectura de componentes?