UI Component Explorer o como arquitecturizar tu frontend

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

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

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 agilidadincreí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

Un Component Explorer se puede considerar un diccionario de interfaces de usuariomodulares. 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

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?

A continuación te dejo una lista de los Complnent Explorers más conocidos por framework:

React

Vue

Angular

Artículos recomendados

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?

Artículo publicado en: https://adrianalonso.es/desarrollo-web/frontend/ui-component-explorer-o-como-arquitecturizar-tu-frontend/

Full Stack Web Developer — adrianalonso.es