En Boream hemos modificado nuestro modelo de desarrollo introduciendo Fractal como herramienta para la organización y mantenimiento de una librería de patrones desarrollados en HTML, CSS y JS. Su gran virtud: ser totalmente neutral en cuanto a la forma de desarrollo o a las tecnologías a implementar.

Coordinar un equipo de trabajo requiere de metodologías para fijar unos estándares de producción y conseguir así un producto sano y sólido. En el equipo de Creative Code de Boream hace tres años introducimos la metodología Atomic Design creada por Brad Frost para definir un sistema de diseño reutilizable. Obtuvimos resultados de producción muy interesantes desde el principio y decidimos adoptar la misma tanto en el equipo de UX Design como en el equipo de UI Design. A día de hoy los tres equipos hablamos un mismo idioma y con logros favorables por lo que seguimos trabajando para mejorar el procedimiento en todo el desarrollo de un producto digital.

1
Diseño atómico
Fractal es completamente neutral en cuanto a la forma de desarrollo o a las tecnologías a implementar

Entender un sistema de diseño atómico

Desde el punto de vista del diseño atómico, los elementos básicos de HTML pueden combinarse para la creación de organismos superiores más funcionales sin necesidad de repetir código. Gracias a esta sencillez, los sitios webs o aplicaciones web generadas por este sistema resultan más fáciles de mantener.

La evolución de los sistemas atómicos se lleva a cabo en los siguientes niveles:

Átomos

Los átomos son el primer nivel de representación de los cinco que incorpora el sistema, siendo los pilares básicos de las páginas. Los átomos son representados por las etiquetas HTML: párrafos, encabezados, tablas, campos de formulario, paleta de colores y el resto de tags que conforman este lenguaje de marcado.

Cuando se divide un sistema en elementos más básicos, nos damos cuenta de lo sencillo que pueden reutilizarse para crear entes más complejos o pasarlos a otros sistemas inclusive.

Moléculas

Las moléculas se forman por la combinación de átomos. Podemos considerar una molécula un formulario de búsqueda ya que es la unión de una etiqueta, un campo de tipo input y un botón de acción.

Organismos

Las secciones de la interfaz o grupos de elementos formados por la unión de moléculas, son definidos organismos. Podemos considerar como tal la cabecera de una web con su logo, menú de navegación y buscador, o un sistema de navegación por de pestañas.

Plantillas

Las plantillas son un conjunto de organismos, moléculas y átomos, que actúan unidos para crear objetos que articulan la estructura de un diseño a nivel de página.

Páginas

Finalmente las páginas, instancias finales que pueden ver los usuarios. Se introduce el contenido real de la página y se genera la interfaz definitiva con texto, imágenes y el resto de elementos con los que interactúa el usuario del sitio web o aplicación web.

Fractal

Organizar un diseño atómico con Fractal

Ahora que hemos desglosado un sistema de diseño atómico, hemos de organizarlo para que sea fácil de ensamblar, previsualizar, documentar y mantener. Tras investigar diferentes herramientas nos decidimos por Fractal por estas razones:

●    Es una herramienta totalmente neutral en cuanto a la forma de desarrollo o a las tecnologías a implementar.
●    Puede ser integrada en cualquier gestor de tareas como Gulp o Webpack entre otros.
●    Permite administrar CSS y JS por componente evitando así conflictos en los mismos en caso de que varias personas trabajen en componentes individuales de la misma biblioteca de componentes.

Para cada componente, Fractal genera una vista previa con todos los comportamientos que éste pueda tener además de sus variantes, es decir de una o más versiones modificadas del mismo componente. Las variantes son más o menos análogas al concepto de “modificadores” en BEM. Además, ofrece la posibilidad de documentar cada componente.

En la imagen a continuación se representa la organización de uno de nuestro proyectos: a mano izquierda la lista de componentes organizados en átomos, moléculas, organismos, plantillas y páginas. Más abajo, una documentación de referencia global del proyecto.

2
Fractal

Cuando accedemos a un organismo, la cabecera del proyecto en cuestión en este caso, tenemos una previsualización del mismo seguido de unos detalles en la parte inferior.

3
Fractal 3

Una herramienta como Fractal nos proporciona valiosos detalles como por ejemplo en este caso qué moléculas o átomos forman parte de este organismo, a la vez que dónde se está aplicando.

Cómo empezar con Fractal

Tal y cómo se comentaba más arriba, Fractal es una herramienta totalmente agnóstica, puedes hacer uso de la metodología y tecnología que más conviene a un proyecto. No es imprescindible ni mucho menos utilizar la metodología Atomic Design. Fractal es una herramienta que solo trata de organizar componentes, no es un repositorio de patrones al uso sino que los representa con sus modelos de interacción si es que lo tienen.

El planteamiento más eficaz para iniciarse en Fractal es consultar su manual de uso, claro y conciso. Si buscas algo como la experiencia de una desarrolladora describiendo cada paso, puedes consultar el artículo de Rachel Andrew: Pattern Library First: An Approach For Managing CSS.

La evolución es Storybook?

La tarea de investigación en un proceso de trabajo es continua, independientemente de la tipología de producto o del servicio que se quiere desarrollar. Tenemos clara nuestra estrategia de producción pero nos falta todavía mejorar procesos. Fractal es una herramienta muy válida, nos aporta organización, un mantenimiento sencillo y sobre todo está al alcance de muchos debido a su sencillez. Sin embargo en Boream necesitamos mejorar el enlace que hay entre los creative coders y los front end developer.

Tenemos en el punto de mira Storybook, una navaja suiza que al igual que Fractal permite organizar una librería de componentes pero con el añadido de poder crear componentes listos para ser usados en Angular, React o Vue entre otros.

En nuestro caso consideramos que el cambio de Fractal a Storybook no resulta demasiado oneroso, al fin y al cabo la lógica estructural es la misma. Otro ejemplo de gestor de librería de patrones con la mismas características de Fractal es Pattern Lab, muy válido aunque considero que en algunos aspectos le falta rendimiento.

Conclusión

Esta es nuestra experiencia y esperemos que encuentres argumentos interesantes sobre los cuales experimentar.  Siempre nos gusta destacar que las metodologías y las herramientas están para ser nuestros aliados y no invasores: dependiendo del proyecto debemos tener la posibilidad de incluir más o menos herramientas y procesamientos de archivos.

Y tú, ¿tienes alguna experiencia en el uso de biblioteca de patrones? Nos interesaría escuchar alguna y poder intercambiar comentarios.