Hoy nuestro equipo de Hunters nos habla de Storybook, una herramienta open source destinada a la construcción de interfaces de usuario mediante la creación de componentes y páginas de forma aislada e independiente. Utilizándolo es posible acelerar el desarrollo, el testing y la creación de documentación para nuestros componentes front-end.

Características de Storybook

Storybook es una herramienta diseñada para ser utilizada en numerosos frameworks front-end como React, Angular, VueJS, Ember, Svelte y Preact. Esta herramienta permite:

• Aislar la creación de componentes visuales del desarrollo de lógica de negocio, resultando en una reducción de requisitos para desarrollar dichos componentes.
• Probar de manera sencilla la visualización de distintos tipos y longitudes de datos en los componentes, que de otra forma podrían ser difíciles de reproducir en el sistema.
• Acceder y visualizar todos los componentes de la aplicación desde la interfaz de Storybook, resultando en una mayor facilidad para mantener una guía de estilo a lo largo de todo el proyecto.
• Generar y mantener documentación para las interfaces de usuario.
• Crear maquetas y prototipos de front-ends mediante la interconexión de componentes utilizando enlaces.

También es posible aumentar las funcionalidades de Storybook mediante la inclusión de add-ons que permiten, entre otras cosas, comprobar el cumplimiento de los estándares de accesibilidad por parte de los componentes o visualizar los componentes en distintos tamaños de pantalla y resoluciones. Se pueden observar todos los add-ons disponibles en Addons | Storybook.

¿Qué son las Stories?

Storybook se basa en Stories. Estas Stories son representaciones de diferentes estados de los componentes front-end. De esta forma, un mismo componente puede estar representado en diferentes Stories, cada una con su estado y contenido, lo que permite realizar cambios en él y poder visualizar fácilmente cómo afectan a todos los estados definidos del componente, eliminando la necesidad de cambiar el estado de la aplicación para realizar comprobaciones.

También se pueden crear Stories a partir de varios componentes, dando lugar a la visualización de páginas completas. Si a los componentes de estas Stories se les agregan enlaces es posible obtener navegación entre componentes, formando un prototipo con el que se puede interactuar.

¿Cómo integrar Storybook?

El proceso para integrar Storybook en un proyecto es sencillo. Existe un paquete ejecutable con npx que se encarga de detectar el framework front-end que se utiliza en el proyecto y crear la configuración necesaria para la ejecución de Storybook. 

Tras ejecutarlo será posible inicializar Storybook y visualizar (en el navegador) una interfaz como la siguiente:

Figura 1: Proyecto Storybook por defecto.

En la Figura 1, en el panel de la izquierda, se pueden observar distintas Stories creadas por defecto. Mientras tanto, en el panel principal se puede observar una composición de página, que contiene arriba el componente Header y en el centro el contenido de la página.

Si se hace clic en un componente y se accede a la pestaña Docs, que se encuentra en la parte superior, se pueden visualizar las propiedades de un componente, como se puede ver en la Figura 2:

Figura 2: Pestaña de documentación de un componente.

¿Dónde podemos usar Storybook?

Los casos de uso en los que Storybook destaca son los siguientes:

• Proyectos front-end grandes o con un periodo largo de desarrollo: Debido a la creación de documentación sobre los componentes y la centralización de su visualización, se pueden conocer y visualizar fácilmente los componentes creados por otros miembros del equipo, facilitando la reutilización de estos y evitando la creación de duplicados.
• Aplicaciones en las que los componentes muestran una gran cantidad de datos de fuentes externas o que han sido introducidos por el usuario: Gracias a la posibilidad de definir múltiples historias para un mismo componente, se puede representarlo en distintos estados. En el caso de que una aplicación presente textos de distintas longitudes o imágenes de distintos tamaños, mediante el uso de Stories se puede representarlos y almacenarlos. De esta manera se podrá visualizar cualquier cambio posterior que afecte al componente y su impacto en la presentación de los datos.

Podemos ver un vídeo de su funcionamiento aquí:

¿Quieres saber más sobre Hunters?

En Altia hemos diseñado varios programas para que las personas que estén terminando su carrera o sean recién tituladas puedan iniciarse en el sector IT, sumando su talento y pasión por la tecnología. Uno de ellos es Hunters: personas que les gustan las tendencias, tienen alma innovadora y contribuyen a anticipar los retos del futuro. Formar parte de Hunters es formar parte de un grupo transversal con capacidad de generar y transferir conocimiento.

Anticípate a las soluciones digitales que nos harán crecer. Consulta más información sobre Hunters en la web.

Nicolás Cuello

Ingeniero de Sotfware en Altia