- FRONTEND
- BEST PRACTICES
- OCTUBRE 2019
Hemos introducido Fractal como administrador de patrones
Suscríbete a Insights
Déjanos tu email y te mantendremos al tanto de todas nuestras publicaciones. Solo recibirás una comunicación al mes aproximadamente. Tranquilo, no mandamos spam ;)
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.
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.
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.
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.
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.
Boream insights
Descubre tendencias y sigue el día a día de nuestros proyectos.
Ver todos los insights-
Backend Best practices
Aplicando soluciones de Inteligencia Artificial para la creación de Chatbots en Drupal
Con la rápida evolución de la Inteligencia Artificial (IA), las empresas y organizaciones buscan cada vez más formas de automatizar la atención al cliente y mejorar la experiencia del usuario. Los chatbots, impulsados por tecnologías de IA, se han convertido en una solución popular para estas necesidades. Drupal, con su arquitectura modular y flexible, es una plataforma ideal para integrar estas soluciones.
-
UX-CX
Solid, UX y datos personales. ¿Una utopía o una realidad?
Solid es una tecnología basada en los estándares actuales de Internet que permite la organización de datos e identidades en las aplicaciones que desarrollemos. Hasta aquí poca cosa nueva. La revolución viene dada porque con esta tecnología es el propio usuario quien tiene el control de sus datos y quien da el permiso de uso a las compañías a través de un WebID.
-
Diseño UX-CX Research
Sesgos cognitivos y prejuicios en los procesos de diseño de interfaz: como combatirlos
Como diseñadores de interfaz y de experiencia de usuario debemos tomar decisiones rápidas que impactan de manera notable en el resultado final de nuestros productos digitales. Generalmente no somos conscientes de que estas decisiones pueden verse profundamente afectadas por una interpretación errónea de la realidad, sesgada por nuestra propia experiencia y alejada de una comprensión racional del entorno.
-
Backend Best practices
Desarrollo Drupal conexión con LDAP: control de acceso.
Tras el primer insight donde comentamos los pasos básicos de conexión de un desarrollo Drupal con un Sistema LDAP, en esta nueva entrega profundizamos en algunos aspectos más avanzados o particulares.