Serie Storybook: Usando storybook para desarrollo de componentes

#storybook #react #javascript #frontend

📰 En este artículo aprenderás

Cuál es el material de construcción primordial de React y el por qué de su importancia
Qué es Storybook
El porqué de Storybook al desarrollar junto a equipos

🗨️ Contenido

El problema

Los componentes de React son el material de construcción primordial de las aplicaciones React. Si los escribimos con inteligencia, podemos reutilizar los componentes en otras aplicaciones de React. Pero cuando construye un componente, es necesario trabajar para comprobar cómo funciona en todas las circunstancias. Por ejemplo, en una aplicación asincrónica, React podría representar el componente con propiedades indefinidas. ¿El componente seguirá renderizándose correctamente? ¿Mostrará errores?

Pero si está construyendo componentes como parte de una aplicación compleja, puede ser difícil crear todas las situaciones que su componente deberá afrontar.

Además, si tiene desarrolladores especializados en experiencia de usuario (UX) trabajando en su equipo, puede perder mucho tiempo si tienen que navegar a través de una aplicación para ver el componente único que tienen en desarrollo.

Sería útil si hubiera alguna forma de mostrar un componente de forma aislada y pasarle conjuntos de propiedades de ejemplo. Aquí es cuando entra la solución

Storybook: la herramienta para desplegar componentes

Storybook es una herramienta para mostrar bibliotecas de componentes en varios estados. Podría describirlo como una galería de componentes (aunque no le hace justicia). En realidad, Storybook es una herramienta para el desarrollo de sistemas de diseño basados en componentes.

Sistemas de Diseño ¿Son necesarios?

Como mencioné en el anterior párrafo el Storybook nos permite estar en la intersección entre varios equipos (frontend, UI, UX) gracias a que provee un sistema de diseño basado en componentes.
Pero a pesar de la publicidad y alboroto, un sistema de diseño no es una solución milagrosa o panacea. Si trabajas en un equipo modesto en una sola aplicación, estará mejor con un directorio de componentes de IU en lugar de configurar la infraestructura para habilitar un sistema de diseño.

La escalabilidad de un sistema de diseño funciona a su favor cuando comparte componentes de interfaz de usuario en muchos proyectos. Si se encuentra pegando los mismos componentes de la interfaz de usuario en diferentes aplicaciones o entre equipos, esta guía es para usted.

🔥 Recapitulando

Repasemos lo que aprendiste

Los componentes de React son el material de construcción primordial de las aplicaciones React.
Si piensas con inteligencia, puedes reusar componentes de React
Si solo se toca la parte del código, pueden haber discrepancias e ineficiencias entre equipos, especialmente de UX, UI y Frontend.
Storybook permite crear sistemas de diseños basados en componentes.
Storybook también resuelve la ineficiencia entre equipos, al dar un entorno de desarrollo para frontend, y brindar un entorno de producción para que los demás equipos puedan visualizar el trabajo y hacer comentarios cuando se requiera.

🔚 Fin

Sabes cuando un sistema de diseño es una opción viable. Conoces que los componentes son el bloque principal de React y estás anuente de la importancia para los equipos.