4 min to read
Storybook
Holaaaaa como andan?? Hoy les traigo una joyitaaaa, siii! Se trata deeee Storybook !!!
Qué es
Como siempre la idea es resumir, asi que ahi vaaa! Storybook es una herramienta más para el desarrollo frontend/UI. Nos ayuda a desarrollar con mayor velocidad nuestros componentes. Básicamente nos permite desarrollar y mantener aislados nuestros componentes visuales! Piola, no?
Instalación y Configuración
Lo copado de Storybook es su compatibilidad con Angular, React, Vue.. asi que no hay excusassss, animate!
Como siempre, voy a hacer foco en la instalación y configuración para nuestro amado Angular! :)
Para instalar vamos con
npx -p @storybook/cli sb init --type angular
Esta instalación nos va a crear una carpeta .storybook en nuestra root directory, con algunas stories y pequeños componentes de base para que veamos como funciona todo. También nos va a generar algunos comandos en nuestro package.json para hacer uso de la herramienta.
Ojo al piojo! Con la última versión hasta la fecha de Storybook (6), podemos tener problemas de compatibilidad con el paquete core-js, una de las soluciones alternativas es que subamos la versión de core-js a la 3.
Otras alternativas acá
Compilación y uso
Una vez instalado todo, mandamos la magia con
npm run storybook
Nos va a levantar en chrome algo así http://localhost:6006/ con toda la base.
Ahora que tenemos todo listo, lo único que tenemos que hacer, es crear las stories para nuestros componentes!
Las stories no son más que archivos nombrados como nuestrocomponente.stories.ts, donde vamos a exportar por un lado, la configuración y dependencias que necesitamos para instanciar nuestro componente, y por el otro, las constantes que deseemos haciendo uso de nuestro componente en diferentes situaciones, parámetros y contextos.
Esto va a ser más facil verlo con un ejemplo, aca va una plantilla bien simple para nuestra primer story:
import { moduleMetadata } from '@storybook/angular';
import { MyComponent } from './my-component.component';
export default {
title: 'MyComponent',
decorators: [moduleMetadata({
imports: [],
declarations: [MyComponent],
entryComponents: [MyComponent]
})]
};
export const Holis = () => ({
template: `
<my-component></my-component>
`});
Guardamos, y automáticamente Storybook va a refrescar nuestro navegador para reflejar los cambios.
Más adelante podemos hacer crecer la story de nuestro componente, agregando nuevas constantes para ver cómo se comporta nuestro componente ante ciertos parámetros y eventos.
Ventajas
Una de las razones por la que storybook es elegido es porque no sólo nos ayuda a crear nuestras app con mayor velocidad, sino que además, permite darnos una rápida visualización de los componentes que tenemos en un repo, ni te cuento si trabajamos en un monorepo, donde la app crece y crece y ya ni sabemos que hay!! Así que nos ayuda a evitar las duplicaciones de código y/o de componentes, incluso cuando creamos nuevos nos da cierta info para que podamos desarrollar pensando en escala.
Otra ventaja muy copada es que nos ayuda a prevenir bugs. Cuando algo se rompe, podemos rápidamente saber si el componente es quien necesita el fix o si hay problemas en la implementación del componente/contexto.
También podemos destacar como ventaja que entre desarrolladores y diseñadores podemos mejorar la coordinación y comunicación teniendo esta herramienta, generando un design system unificado acá mismo.
Claramente hay muchas otras ventajas, en el link oficial que dejé mas arriba se pueden ver, y si se animan la verdad se invierte poco tiempo en darle una oportunidad y al toque perro van a ver que esta copado!
Conclusión
En resumen, Storybook no sólo nos permite gestionar nuestros componentes visuales, sino también pantallas, datos, testing, features complejas, siempre en los contextos que decidamos definirles.
BONUSSSSS!! Si! Teniendo Storybook podemos ir mas alla e implementar Chromatic, BackStopJS y otras herramientas de preferencia para testear y poder hacer regresiones visuales
Viendo todas estas ventajas los invito a darle una chance.
Happy cooooooding!!
