¿Qué es Storybook y por qué lo necesitas en tus proyectos?

¿Qué es Storybook? Si eres desarrollador frontend, seguramente ya has escuchado hablar de Storybook. Esta herramienta se ha convertido en la número 1 que utilizo en mis proyectos, ya que no puedo imaginar trabajar sin ella. Storybook tiene muchas características y ventajas que la hacen indispensable a la hora de escalar y desarrollar proyectos con un equipo. En este artículo, te explicaré en detalle para qué sirve Storybook y cómo puedes aprovechar al máximo sus funcionalidades.

Mi nombre es Braian y en este artículo te guiaré a través del fascinante mundo de Storybook. ¡Prepárate para descubrir todo lo que esta herramienta puede hacer por ti!

¿Qué es Storybook?

Antes de entrar en detalles de qué es Storybook, es importante entender qué es Storybook. En pocas palabras, Storybook es una herramienta de desarrollo Open Source que nos permite construir y visualizar componentes UI de forma independiente para cualquier framework JavaScript como React, Vue, Angular y más.

Storybook funciona como un catálogo visual de componentes, donde cada uno tiene diferentes configuraciones y estados. Esto permite a los desarrolladores ver de forma aislada cómo se comporta cada componente.

Además, no solo se puede instalar en proyectos nuevos desde cero, sino también en proyectos existentes. Sin embargo, en este artículo nos enfocaremos en su instalación y uso en proyectos nuevos.

¿Por qué usar Storybook?

Storybook trae muchos beneficios al workflow de desarrollo de componentes UI. Algunas de las principales razones para utilizar Storybook son:

1. Mejora el proceso de desarrollo de componentes

Storybook permite construir componentes UI de forma aislada, sin necesidad de builds completos de la aplicación. Esto acelera el desarrollo ya que evita tener que navegar a través de diferentes vistas y llenar formularios para llegar al componente deseado.

Los desarrolladores pueden enfocarse únicamente en el componente en el que están trabajando. Tener un ambiente aislado para acceder rápidamente a cualquier componente ahorra mucho tiempo.

2. Facilita las pruebas de componentes

Storybook hace más sencillo probar componentes UI de forma independiente. Se pueden construir diferentes escenarios e interacciones para verificar que todo funcione correctamente.

Esto es especialmente útil para probar estados de error, carga, y otros casos que pueden ser difíciles de simular dentro de la aplicación completa.

3. Mejora la documentación de componentes

La interfaz visual de Storybook sirve como documentación viva de los componentes. Los desarrolladores pueden ver rápidamente todas las variantes y configuraciones disponibles.

Esto también facilita la comunicación con diseñadores y otros miembros del equipo, ya que pueden ver cómo luce cada componente UI.

4. Promueve la reutilización de componentes

Al construir componentes de forma aislada, se crean piezas verdaderamente reutilizables que no dependen de una lógica de negocio específica.

Esto obliga a pensar en interfaces genéricas y aumenta las chances de reutilizar componentes entre proyectos.

5. Permite el desarrollo de componentes en equipo

Storybook facilita el desarrollo de componentes UI entre múltiples desarrolladores. Cada uno puede trabajar de forma independiente en sus componentes sin afectar el trabajo de otros.

Luego es simple integrar los componentes en la aplicación principal. Esta modularidad en el desarrollo es clave para proyectos grandes.

6. Ayuda a construir una biblioteca de componentes reusable

Muchas empresas grandes como Airbnb, Uber y Twitter han construido bibliotecas de componentes reusables internas usando Storybook.

Esto les permite tener consistencia en el look and feel de sus productos, así como aumentar la velocidad de desarrollo.

Quizás te interese 3 aplicaciones para escuchar audiolibros.

Problemas al desarrollar componentes de la forma tradicional

Desarrollar componentes UI directamente en el código puede ser engorroso y poco productivo. Algunos de los problemas típicos con este enfoque tradicional son:

• Context switching frecuente entre archivos y directorios para llegar al componente en el que se está trabajando. Esto interrumpe el flujo y reduce la concentración.
• Dependencia de builds completos de la aplicación para ver cambios. Compilar y recargar la app entera requiere tiempo y recursos.
• Simular diferentes estados visuales puede requerir modificaciones temporales en el código. Esto genera clutter y es propenso a introducir bugs.
• Difícil de visualizar variantes y estados inusuales de los componentes. Muchas veces estos sólo ocurren en ciertas partes de la app.
• Colaboración más compleja al tener que integrar componentes individuales en la UI final. Se pierde la visión aislada.
• Poca visibilidad del progreso en desarrollo de componentes. Sin una referencia visual, es difícil validar implementaciones.
• Testing manual tedioso al tener que interactuar con diferentes vistas para acceder al componente objetivo.

¿Cómo funciona Storybook?

A nivel técnico, Storybook es una aplicación que corre en paralelo a tu app principal. Se inicia ejecutando un comando en la terminal.

Storybook buscará archivos con la extensión .stories.js y mostrará los componentes definidos en una interfaz de usuario amigable e interactiva.

Por ejemplo, para un componente Button, tendríamos un archivo Button.stories.js con diferentes configuraciones:

// Button.stories.js
import Button from './Button';

export default {
  title: 'Components/Button',
};

export const Primary = () => <Button variant="primary">Primary</Button>;

export const Secondary = () => <Button variant="secondary">Secondary</Button>;

Luego en Storybook veríamos dos variantes del botón, una primaria y una secundaria.

Los archivos .stories.js son únicamente para desarrollo y no se incluyen en el build de producción.

¿Qué es Storybook y sus Características?

Algunas de las características más destacadas que incorpora Storybook son:

• Interfaz visual para navegar diferentes componentes y estados
• Panel de control para modificar props dinámicamente
• Compatibilidad con Markdown para documentación
• Generación de documentación estática
• Plugins oficiales y de la comunidad
• Integración con herramientas de testing como Jest
• Soporte para temas visuales y dark mode
• Vista responsive para probar en diferentes tamaños
• Complementos para accesibilidad, interacciones, diseño y más

Instalación de Storybook

Instalar Storybook es muy simple. En un proyecto React se hace con el siguiente comando:

npx -p @storybook/cli sb init

Esto detectará que es un proyecto React y configurará todo automáticamente.

También funciona por igual para Vue, Angular, Svelte y otros frameworks. Simplemente cambia el flag -p @storybook/cli por el del framework correspondiente.

Una vez instalado, podemos levantar el servidor de desarrollo de Storybook con:

npm run storybook

Aprovechando todo el potencial de Storybook con addons

¿Sabías que posiblemente no estás aprovechando todo el potencial de Storybook? Y es que Storybook tiene todo un ecosistema de addons que nos permite extender sus capacidades para abordar problemas más específicos. Pero, ¿cuáles son los addons primordiales que deberías tener en tu Storybook? En este artículo, te mostraré 6 addons que deberías considerar instalar en tu configuración de Storybook.

6 addon para Storybook

1. Addon de interacciones

El primer addon que vamos a explorar es el addon de interacciones. Este addon es un envoltorio de la biblioteca Testing Library y nos permite ejecutar pruebas de interacción de forma visual. Con este addon, podemos simular eventos como clics y navegar a través de ellos para ver el estado inicial y final de una historia. Esto es especialmente útil para probar interacciones complejas en nuestras historias de Storybook.

2. Addon de accesibilidad

El segundo addon que me gustaría explorar es el addon de accesibilidad. Este addon es muy poderoso, ya que con solo instalarlo y registrarlo, obtendrás una pestaña de accesibilidad en tu Storybook que te mostrará todas las reglas de accesibilidad que deberían cumplir tus componentes. Por ejemplo, si tienes un botón con un contraste insuficiente, este addon te lo señalará. Además, este addon también te permite simular diferentes problemas de accesibilidad, como visión borrosa o percepción de colores alterada. Esto te ayudará a mejorar la accesibilidad de tus componentes y garantizar una mejor experiencia para todos los usuarios.

3. Addon de Service Worker

El addon de Service Worker. Este addon te permite interceptar todas las solicitudes de red realizadas por tus componentes en Storybook. Esto es especialmente útil si estás utilizando llamadas a API en tus componentes y quieres simular respuestas para pruebas. Con este addon, puedes establecer fácilmente respuestas personalizadas para cada solicitud y crear un entorno exclusivo para probar tus componentes.

4. Addon de estados

Otro addon interesante es el addon de estados. Con este addon, puedes establecer diferentes estados para tus componentes y comunicar su estado real a otros desarrolladores o usuarios. Por ejemplo, puedes establecer un estado de «Beta» o «Release» para indicar si un componente está en desarrollo o listo para su lanzamiento. Además, también puedes crear tus propios estados personalizados. Esto es útil para comunicar el estado de tus componentes y mantener a todos informados sobre su progreso.

5. Addon de estilos

El siguiente addon es el addon de estilos. Este addon es completamente agnóstico a los frameworks de CSS que estés utilizando y te permite probar diferentes temas o estilos en tus componentes. Por ejemplo, puedes probar cómo se vería tu componente en un modo oscuro o en un modo de alto contraste. Esto es especialmente útil para verificar si tus componentes se ven bien en diferentes configuraciones de estilo y asegurarte de que siguen las mejores prácticas de diseño.

6. Addon de diseño

Finalmente, tenemos el addon de diseño, que se integra con herramientas de diseño como Figma. Con este addon, puedes establecer enlaces a los diseños originales de tus componentes y tener una referencia visual mientras trabajas en ellos. Esto es especialmente útil si estás implementando diseños de Figma en tu Storybook y quieres asegurarte de que tus componentes sigan los últimos cambios en el diseño.

Estos son solo algunos ejemplos de los addons disponibles en el ecosistema de Storybook. Si quieres explorar más addons, te recomiendo visitar la página de integraciones en el sitio oficial de Storybook. Allí encontrarás una amplia variedad de addons para diferentes necesidades.

Documentación generada automáticamente

Otra ventaja de Storybook es que nos permite generar documentación automáticamente basada en las propiedades de nuestros componentes. Esta documentación es muy útil para mostrar a los stakeholders, diseñadores y otros desarrolladores cómo se utilizan y se configuran nuestros componentes.

La documentación generada por Storybook incluye ejemplos de código, descripciones de propiedades y ejemplos de uso. Además, esta documentación se puede generar como un archivo estático, lo que facilita su distribución y visualización.

Para generar la documentación estática, podemos ejecutar el siguiente comando:

npm run build-storybook

Este comando generará un archivo estático que podemos desplegar en un servidor web o en cualquier servicio que admita archivos estáticos.

Conclusión de qué es Storybook

En resumen, ¿Qué es Storybook? Es una herramienta imprescindible para el desarrollo frontend. Nos permite construir y visualizar componentes de manera aislada, realizar interacciones y pruebas automatizadas, y generar documentación automáticamente. Con Storybook, podemos crear bibliotecas de componentes reutilizables y mejorar la colaboración en equipos de desarrollo.

Si estás trabajando con React, te recomendamos incorporar Storybook a tu flujo de desarrollo para aumentar tu productividad y calidad. La curva de aprendizaje es corta y los beneficios son muchos.

Espero que este artículo te haya dado una idea clara de lo que es Storybook y cómo puedes aprovechar al máximo sus funcionalidades.