Storybook: Sistema de diseño en desarrollo Frontend
Las guías de estilo existen desde hace años, pero desde hace no tanto, diseñadores y desarrolladores se han puesto de acuerdo para trabajar en conjunto en una idea que está dinamizando y facilitando el uso de interfaces de usuario (Users Interface, UI) a lo largo de los productos de grandes compañías.
Cuando creamos aplicaciones con React, Angular o Vue podemos tener miles de componentes en nuestra aplicación y estructura de archivos. Se puede volver un caos si nuestras carpetas no están bien organizadas e, incluso así, es complicado buscar cierto componente. Por ello, el hecho de compartir los componentes es más que recomendable, así como los sistemas de diseño y su consecuencia en el desarrollo de software: las librerías de componentes.
¿Qué es un sistema de diseño?
Las interfaces de usuario modernas se construyen a partir de cientos de componentes UI que se reutilizan sin cesar para ofrecer diferentes flujos de usuario. Los sistemas de diseño catalogan todos los componentes de la interfaz de usuario reutilizables, permitiendo a los equipos construir interfaces complejas y consistentes entre varios proyectos con mayor rapidez.
A su vez pueden contener información sobre su uso, cómo construir dichas interfaces o cualquier información relevante para su implementación o instalación.
Las ventajas de los sistemas de diseño respecto a las antiguas prácticas son su escalabilidad, coherencia y solidez
Las ventajas de los sistemas de diseño respecto a las antiguas prácticas son su escalabilidad, coherencia y solidez, por lo que se han convertido en la piedra angular de las grandes compañías y proyectos en sus aplicaciones.
La reutilización ahorra tiempo y garantiza una experiencia de usuario confiable en todos los productos generando así un entorno homogéneo y más fácilmente mantenible.
Con esta situación y este nuevo paradigma surgía la necesidad de tener una herramienta que catalice ese conocimiento entre diseñadores y desarrolladores, genere una documentación útil para ambos y además facilite el consumo de esos componentes por parte de los proyectos que quieran usar ese sistema de diseño. Justo por ello, Storybook llegó al rescate.
¿Qué es Storybook?
Storybook es una herramienta de código abierto para construir componentes UI y páginas de manera aislada, generando documentación y posibilitando tanto desarrollo como el testing de componentes. Permite la visualización de los componentes de una manera organizada y eficiente, interactuar con ellos con ellos de forma dinámica y testearlos como si se encontraran desplegados en una aplicación real.
También puede generar una página estática con toda la documentación referida a esos componentes, ver el resultado final del componente o incluso el código para poder extraer el propio componente.
Además, tiene disponible un gran número de addons o extensiones, algunas de ellas incluidas por defecto, que aportan información añadida como eventos emitidos por el componente o gestión de la accesibilidad. La personalización es modular y debe ir acorde a las necesidades del proyecto.
Actualmente, soporta frameworks y librerías como React, Angular, Vue, Web Components, Ember o Svelte, entre otros. Se ha convertido en el estándar para este tipo de proyectos por su utilidad y su potencia. Podemos ver ejemplos de completas librerías de componentes, como las de: Audi, Shopify Polaris, JetBrains o Carbon Components.
StoryBook revela otra manera de trabajar
En proyectos en los que se trabaja en equipo y en los que el volumen de tareas es cada vez mayor, es importante seguir un orden y una estructura muy clara y definida. StoryBook nos permite trabajar así, es una herramienta ordenada y colaborativa, haciendo sencilla la reutilización de componentes.
Permite que el flujo de trabajo sea mucho más ágil entre el equipo de diseño y el de desarrollo. Al permitir ver el resultado, es muy fácil y rápido identificar y comprender si es lo que necesitamos o es necesario aplicar alguna mejora o corrección. Grandes empresas como Dropbox, GitHub, Airbnb, Atlassian, Lyft, JetBrains o Microsoft confían en esta herramienta para crear sus propios proyectos. ¿Hablamos?