Atomic Web Design o Diseño Guíado por Componentes

Desde que empecé a estudiar informática hace ya unos años, he podido comprobar que con distintos nombres, el software persigue un diseño guiado por componentes. Hoy en día lo podemos comprobar en las tendencias tecnológicas que se utilizan en miles de proyectos: Microservicios, Atomic Web Design, Frameworks SPA basados en componentes, la orientación a objetos, etc… Al fin y al cabo, da igual que sea en el lado backend, en el lado fronten o en el diseño UX de aplicaciones. Una moraleja extraída de todo esto es un dicho romano archiconocido: Divide y Vencerás (divide et impera).

Este dicho en la cultura popular hace referencia a un refrán que implica resolver un problema difícil, descomponiéndolo en problemas más simples tantas veces como sea necesario, hasta que la resolución de las partes se torne obvia, siendo la solución del problema principal el cómputo de las soluciones parciales.

Este artículo quiere ser una reflexión y un voto a favor del uso de la descomposición de los problemas para dar grandes soluciones en todos los ámbitos del desarrollo de una aplicación, pero centrándonos en una tendencia en el diseño de las aplicaciones: Atomic Web Design.

Origen de los componentes Web

Atomic Web Design

En su propuesta Brad habla de 5 grados de componentes: Átomos, Moléculas, Organismos, Templates y Páginas. Brad Forst defiende que no se deben diseñar páginas, si no sistemas de componentes. Os dejo una charla donde Brad profundiza en estos puntos:

Si usas Angular, React o Vue, ¿no te suena este concepto? Componentes reutilizables con su propio estado y propiedades heredadas que trabajando en conjunto conforman una aplicación. Si durante todo el desarrollo de una aplicación tenemos este pensamiento: ¿Por qué no comenzar la componentización desde el comienzo del diseño de interfaz de la aplicación?

Brad defiende crear una guía de estilos usando Pattern Lab, una herramienta construida para ello. Un ejemplo donde se puede ver todos los pasos de estos componentes es: http://demo.patternlab.io/ donde se definen los elementos básicos de la marca: colores, fuentes tipo gráficas, inputs, iconos, animaciones hasta generar moléculas y organismos que componen la distintas composiciones del diseño generando páginas.

Para profundizar recomiendo la lectura del libro de Brad Frost: http://atomicdesign.bradfrost.com/

¿Qué ventajas obtenemos con la componentización?

  • Autocontenidos y encapsulados.
  • Independientes.
  • Reutilizables.
  • Faciles de Testear.
  • Facilitan el principio de Única responsabilidad.

Conclusión

Articulo publicado en https://adrianalonso.es/arquitectura-del-software/atomic-web-design-o-diseno-guiado-por-componentes/

Full Stack Web Developer — adrianalonso.es

Full Stack Web Developer — adrianalonso.es