Tu galería de componentes con StoryBook

Introducción

He tenido la oportunidad de trabajar en varios proyectos donde un equipo de diseño trabaja antes del desarrollo para estudiar cómo debe construirse la aplicación de cara a la imagen de marca, usabilidad y experiencia de usuario entre otros aspectos.

Lo ideal es que el equipo técnico valide la viabilidad de las propuestas de diseño antes de empezar el desarrollo para evitar tener que rehacer trabajo o encontrarse con funcionalidades que no pueden llevarse a cabo cuando ya estás en pleno desarrollo. Pero la cosa no queda aquí, porque también es ideal que el equipo de desarrollo que se ocupa de hacer la parte front de la aplicación se apoye en el equipo de diseño para validar los desarrollos, cerrando una etapa del proyecto y asegurándose que todo queda como se tenía planeado.

Si además se usa una arquitectura basada en componentes o módulos, a medida que se van acabando se puede dar una entrega de valor al proyecto, cumpliendo con pequeños hitos que garantizan que el proyecto va viento en popa. Y es por esto que seguramente te interesará tener una herramienta donde puedas compartir con tu equipo de diseño, managers o cualquier otra persona que vaya a participar el trabajo realizado.

El problema es que normalmente no interesa dedicar tiempo a desarrollar una herramienta de este estilo, ya que puede ser costoso y alargar mucho el tiempo del proyecto. Es aquí donde entra Storybook, una herramienta que nos permite crear una interfaz de usuario donde incluir una galería de todos nuestros componentes con sus casos de uso, documentación así como integrarse con un montón de funcionalidades que pueden ser de mucha utilidad.

Documentación de Storybook: https://storybook.js.org/

¿Qué ventajas tiene Storybook?

Ya sea Storybook u otra herramienta que nos ayude a crear una interfaz de usuario colaborativa nos aporta una serie de ventajas a la hora de agilizar el proyecto en el que trabajamos además de tener centralizada una buena documentación técnica, funcional y útil sobre los componentes de nuestro proyecto.

En concreto destacaría las siguientes ventajas de Storybook:

• Facilidad de implementación.
• Provee una interfaz sencilla y útil.
• Ayuda a dar visibilidad del estado del proyecto. Muy útil en las primeras semanas donde seguramente se está definiendo las bases del proyecto.
• Ahorro de tiempo: No tienes que invertir tiempo construyendo una interfaz donde poner una muestra de tus componentes y sus estados manualmente.
• Es customizable: Permitiendo configurar temas, addons y adaptar la interfaz a tu marca.
• Se integra con la mayoría de frameworks y librerías de front, como React, Vue o Angular
• Proceso de construcción sencillo para subirse a entornos de hosting estáticos.
• Desacoplada el entorno de desarrollo: Alguien que no desarrolle no va a encontrar amigable el instalarse un repositorio y lanzar servidores locales para probar las funcionalidades de tu aplicación, por lo que tener un sitio a parte donde todo tu equipo pueda acceder en cualquier momento sin dependencia del equipo de desarrollo les hará muy felices.

¿Cómo funciona?

Aunque puede usarse con una configuración básica y dedicarlo solo a crear una galería de componentes de nuestra aplicación, Storybook tiene un montón de funcionalidades que nos van a facilitar mucho la vida y vamos a agradecer. Si bien pueden configurarse addons y temas personalizados hay tres funcionalidades principales que son las que me gustaría destacar en este artículo.

Stories

Son ficheros en los que indicamos cómo funciona un componente o un conjunto de componentes, de manera que cada story que indicamos en el fichero puede ser una implementación de un componente o conjunto.

Es habitual que nuestros componentes tengan parámetros de entrada que modifiquen su comportamiento y la información o aspecto que muestran, por lo que si en lugar de revisar todo el código tenemos en Storybook los casos de uso expuestos, nos puede ayudar mucho a refrescar la memoria y a otros equipos a entender cómo funciona un componente.

Docs

Estos ficheros nos dan la oportunidad de crear páginas de documentación en la que podemos usar stories, incluir guías o explicaciones sobre cualquier aspecto de nuestra aplicación. En definitiva cualquier información que queramos explicar detalladamente podríamos hacerlo con los docs. Éstos son especialmente útiles si queremos crear un sitio web para nuestro sistema de diseño.

Testing

Imagina que queremos rizar el rizo e ir un poco más allá, incluyendo testeo de nuestros componentes o integraciones. Pues también podemos hacerlo con Storybook y esto es especialmente útil para involucrar a otros equipos a asegurar la calidad de la aplicación que estamos construyendo.

A parte de venir con un test runner que puede ejecutar nuestros tests unitarios, Storybook nos permite hacer validaciones de accesibilidad, comprobación de snapshots que ayudan a verificar que si el código fuente de nuestros componentes ha cambiado (En ese caso debemos actualizarlos en Storybook, de lo contrario nos avisaría indicando los errores que se hayan producido), tests de interacción simulando el comportamiento de un usuario así como otras funcionalidades que harán que nuestra aplicación sea muy robusta reduciendo la posibilidad de errores.

Conclusiones

Si has tenido que crear alguna vez una página para mostrar tus componentes a tu equipo de diseño o managers seguramente encontrarás interesante esta herramienta, así que anímate y la próxima vez, o si aún estás a tiempo, propón usar StoryBook y verás que los resultados hablan por sí solos.

Es una herramienta sencilla, y podemos quedarnos con una implementación básica o ir escalando a medida que necesitemos o queramos implementar más funcionalidades.

Al poderse publicar fácilmente en un entorno diferente al del proyecto facilita la colaboración del equipo y si se mantiene actualizada ahorrará mucho tiempo de resolución de dudas o incluso en el onboarding para nuevos integrantes del equipo.