Aplicando Atomic Web Design en un proyecto de Nuxt.js
Escrito por Andres Piccininno y Enrique Aparicio — 8 de Mayo de 2020
Arquitectura web
Cuando comienzas con un proyecto web es muy posible que te embriague esa emoción de crear código nuevo, y te pongas a programar como un loco. También es posible que tu empresa o startup te pida velocidad ya que eso genera dinero, y sigues programando como un loco. Así que sigues programando sin cuestionarte mucho la manera que estás estructurando el proyecto ni qué impacto tiene esto para el futuro. Lo cual con el paso del tiempo puede generar código espagueti, ficheros infinitos de Javascript y CSS, sin una nomenclatura clara, y un largo etcétera ¿te suena de algo?
A lo largo del artículo vamos a ver cómo podemos evitar entrar en una situación así, con soluciones concretas y herramientas que te ayudarán a conseguirlo. Si, a día de hoy, ya te encuentras en un contexto parecido, verás que el enfoque que aquí te planteamos te permitirá ir adaptando tu arquitectura web actual para un nuevo modelo más flexible, robusto y mantenible.
La elección para el desarrollo (del nuevo frontal) de nuestro ecommerce en Planeta Huerto con más de 35 mil referencias es la siguiente:
Nuxt.js + Vue.js + Jest + Tailwind CSS + Atomic Design + coding guidelines
Nuxt.js: Velocidad de desarrollo, SSR, enrutado, módulos adicionales (i18n, amp, pwa, …).
Vue.js: Buen rendimiento, baja curva de aprendizaje, gran comunidad.
Jest: herramientas de testeo para test unitarios, e2e o automatización de tests.
Tailwind CSS: Framework CSS basado en Utility First.
Atomic Design: metodología para implementar el diseño web.
Coding guidelines: Guías de programación internas y esquemas mentales para todos los desarrolladores afronten de la misma manera su trabajo.
Hacia una arquitectura moderna: atomic design
Si nos paramos a pensarlo, cualquier web que visitamos en nuestro día a día parece estar formada por una serie de piezas o secciones. Todas juntas, componen la web en la que los usuarios realizan acciones.
Este principio tan simple de partes independientes que se componen para formar un todo es el principio sobre el que se apoya un paradigma de arquitectura software moderno denominado atomic design (diseño atómico).
Atomic design estructura cada parte de tu web hasta encontrar el componente más pequeño y básico el cuál se llama átomo (como puede ser un botón, un label o un input). Muchas veces podemos encontrar componentes que agrupan elementos básicos formando en sí una unidad mayor, en este caso tenemos a la molécula. Analizando las secciones de nuestra web, podemos encontrarnos con el siguiente conjunto denominado organismos el cual se componen de moléculas y átomos bajo una misma lógica. Después tenemos los template para poder definir cómo se van a mostrar los distintos organismos + moléculas + átomos dentro de una página.
Ahora bien, ¿cómo estructuramos esta metodología en nuestro proyecto en Nuxt.js?
Indicar también, que aunque parece obvio, la importancia que tiene la nomenclatura de los ficheros, así que siguiendo las recomendaciones de la guía de estilo de Vue.js y juntándolo con Atomic Design, tenemos esta aproximación:
La idea es sencilla, para los átomos utilizamos el prefijo A, para las moléculas el prefijo M, para los organismos el prefijo O. Para los template no hace falta ya que usamos la estructura que proporciona nuxt para los layouts y para las páginas utilizamos la carpeta de page que viene por defecto con Nuxt.js.
Puntos clave para el desarrollo:
Átomos:
- es el componente más pequeño e indivisible
- no contiene lógica
- puede contener variantes (botón estilo info o estilo warning vía props)
Moléculas
- compuesto por átomos u otras moléculas
- no contiene lógica
- puede tener variantes
- puede tener slots
Organismos
- compuesto por átomos, moléculas u otros organismos
- puede gestionar la lógica del UI
- puede realizar llamadas API Rest para obtener datos (pensando siempre que no será SSR)
- puede tener variantes
- puede tener slots
Templates
- Estructuración a nivel genérico de cómo mostrar los distintos organismos, moléculas y átomos
- Pueden tener lógica
Páginas
- componentes donde se definen las rutas de Nuxt.js. Aquí definimos qué layout queremos utilizar
- Puede obtener datos del API Rest para el SSR
- No suele tener lógica
¿Cómo desarrollamos una molécula? code guideline para el equipo front de Planeta Huerto
Todo esto pinta bien del Atomic Design, todo muy bonito, pero ¿qué pasa cuando nos pasan un diseño y tenemos que implementarlo? ¿Es un componente genérico o algo específico? pero dentro de nuestro componente ¿cómo afrontamos (de manera técnica) que el contenido sea dinámico?
A continuación vamos a mostrar un “esquema mental” que sigue todo el equipo a la hora implementar una molécula y entender cuando el componente utiliza datos dinámicos si utilizar props o slot:
Implementar un modal pop-up:
Requisitos:
- Imagen o icono SVG (opcional)
- Titulo: String (obligatorio)
- Descripción: String (obligatorio)
- Botonera: entre 0 y 3 botones
Con la información del diseño, seguimos este diagrama para asegurarnos que ante cualquier parte dinámica del componente todo el equipo sigue un mismo patrón:
Por lo que llegaríamos a la siguiente conclusión ante el diseño anterior:
Ahora mostramos un poco de código (que siempre gusta) con la implementación de un caso de uso:
Este artículo no pretende sentar cátedra, simplemente es una elección a la hora de implementar una metodología de desarrollo. En el equipo de desarrollo de Planeta Huerto nos gusta probar cosas nuevas, trastear con nuevas librerías y pensar todo el rato en cómo mejorar la arquitectura de la web.
Así que cualquier feedback / comentario / sugerencia son mas que bienvenidas.
Un saludo,
