StoryBook: Stop reinventing the Wheel

Desde principios de los tiempos, las personas más brillantes han destacado sobre los demás, porque se han propuesto darle una “vuelta” a algo que ya existe, en vez de buscar la forma de rehacerlo. El desarrollo de Web Components permite aislar e individualizar elementos personalizables y reutilizables. Gracias a StoryBook, tenemos una herramienta que los unifica y facilita su visualización, desarrollo, personalización, o test de manera cómoda, rápida y sencilla.

Utilizando esta herramienta, he descubierto cómo es posible que el tiempo de visualización y ejecución de los componentes sea una ventaja, y no un gran inconveniente como me ha ocurrido en otros proyectos. Permite el desarrollo de tu trabajo pensando en la interfaz del usuario.

 

Contexto

 

Antes de explicar en qué consiste esta herramienta de trabajo, sus principales características, así como el uso que se puede hacer de ella, es importante que nos situemos en un contexto.

¿Por qué la idea de escribir este post? Hace unos meses entré a formar parte de un proyecto de desarrollo web en el utilizaban StoryBook. Yo nunca había oído hablar sobre esto, de hecho, no sabía lo que era. Por poner un ejemplo muy simple: en la presentación del proyecto, uno de los compañeros nos enseñó uno de los componentes que ya estaba creado, un botón, y desde el primer momento, vi que era posible hacer cambios desde la propia herramienta.

Había configurado la posibilidad de cambiar el color del botón, de los textos e incluir un icono que acompañaba al texto entre otras funcionalidades. No solo esto, sino que, además, había montado un layout básico y muy simple con este botón. Se podía ver en un contexto real. Una de las opciones que permite el menú de herramientas de StoryBook, es la posibilidad de ver el desarrollo y su comportamiento responsive, extraer en un iframe la variante con la que se está trabajando, además de poder hacer zoom sobre e incluso la documentación del propio componente, algo tan básico como necesario.

 

 

En esta imagen, que proporciona la propia web de StoryBook, se ve el menú de herramientas que comentaba anteriormente y el menú lateral, donde está disponible la librería de componentes del proyecto con el que se esté trabajando.

En la web oficial de StoryBook, definen esta herramienta como:

“StoryBook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment.”

 

Casos de uso

 

Para empezar a trabajar con ella, es necesario que exista un proyecto basado en alguno de los frameworks con los que es compatible, y seguir los pasos de instalación que desde la web oficial indican de forma muy detallada. Actualmente, soporta frameworks y librerías como React, Marko, Angular, Vue, Mithril, Svelte, Meteor, Web Components y Ember.

Además, es posible personalizar la interfaz con la que se trabaja. Se puede cambiar el logo y el nombre que viene por defecto y modificarlo por el nombre del proyecto con el que estemos trabajando. Se visualizaría en la esquina superior izquierda. Más adelante, veremos más extensiones o plugins que se pueden añadir y que mejoran el trabajo diario de desarrollo.

Para el desarrollo de los Webs Components, es importante que primero, se defina la estructura que va a tener a nivel de código, así como sus variantes. De esta forma, manteniendo un orden y un mismo patrón en el desarrollo, se puede consultar esta librería de forma rápida y sencilla desde el menú lateral.

 

Características principales

 

Cada componente es una historia, y cada historia muestra los distintos estados ya renderizados del componente. Además, puede tener tantas variantes como los desarrolladores consideren oportunas. Esta historia está conformada por un archivo que contiene la base tanto a nivel de HTML como CSS, así como el JavaScript adaptado al framework que se use, pero lo que aquí realmente nos interesa para ver el potencial de esta herramienta, es la posibilidad de ver las modificaciones de código en tiempo real, trabajar con datos de forma dinámica y tener acceso a todos los componentes desarrollados hasta el momento. Es una manera de trabajar en equipo muy cómoda, ya que puedes acceder a componentes desarrollados por compañeros, los cuales se van agregando y forman parte de la librería que conforma el proyecto.

En la siguiente imagen, se puede ver cómo se puede modificar el texto. Este es un ejemplo muy básico, pero también se pueden consultar las variantes de color, textos o imágenes entre otros ejemplos, que hayamos desarrollado, permitiendo sacar el máximo partido a StoryBook.

 

 

Para ver los cambios en esta herramienta de trabajo, en la sección de Controls, la cual se puede personalizar el nombre, el propio desarrollador puede crear un desplegable, como se ve en el ejemplo de “backgroundColor”, un botón para elegir entre varias opciones, un campo de texto… y de esta forma, crear unos ejemplos, en los cuales sea fácil su visualización, así como las pruebas o test que se necesite realizar.

 

Addons

 

No nos podemos olvidar de los addons o extensiones que permite añadir StoryBook, lo que ofrece un desarrollo mucho más completo y eficiente en el día a día. Desde la web oficial, hay un listado de APIs con numerosos métodos que permiten personalizar estos plugins con documentación detallada al respecto. La configuración es muy sencilla. En primer lugar, se debe importar el API propio de addons, y después, utilizar el método que necesitemos y aplicarle la funcionalidad que ofrece.

Por otro lado, hay extensiones que vienen por defecto, son las llamadas “Essential addons”. Una de las más utilizadas por lo práctica que resulta es “Actions”. A continuación, puede verse un ejemplo de la visualización de esta funcionalidad. Lo que se consigue es poder ver los eventos con los que se está trabajando en este componente y ver su estado.

 

 

Existe una extensión para gestionar la accesibilidad. Se configura previamente el nivel de accesibilidad y en función de ello, te muestra si estás cometiendo o no algún error que no cumpla con el nivel establecido. En esta imagen, puede verse como el listado con los errores categorizados según el grado de cumplimiento o no con el nivel de accesibilidad.

 

 

Otra extensión de gran utilidad es la de poder incluir, a través de parámetros y con una configuración muy sencilla, los enlaces a los diseños de los componentes con los que trabajen los desarrolladores. Únicamente, es necesario copiar el link a la página donde se encuentre el prototipo de diseño con los que ha trabajado previamente el equipo de UX/UI (invision o zeplin entre otros) y aparece en la propia interfaz de StoryBook, lo que facilita la visualización del diseño a la hora del desarrollo y puede servir de gran ayuda en demos con cliente, permitiendo poner en contexto aquello que se está mostrando.

La documentación es otro de los puntos fuertes. Todos sabemos, que, teniendo una buena documentación del trabajo realizado, facilitará el trabajo a los compañeros y a uno mismo, si lo tiene que retomar en un futuro. StoryBook, tiene una sección llamada, “Docs”, en el menú superior de herramientas que permite ver el resultado final del componente y el código para poder extraer de este componente y utilizarlo en otra parte del proyecto, ya sea como parte de otro componente o incluso, que se pueda exportar para que se puedan utilizar en gestores de contenidos como Adobe experience manager.

Por último, y no por ello menos importante, es el momento de explicar la creación de “historias” es decir, el contenido de los literales que forman cada uno de los componentes. StoryBook es compatible con MDX, formato de archivo que combina Markdown con JSX. Así, se podrá incrustar bloques de código al igual que texto puro en cualquier parte del componente. De esta manera, quedará una documentación muy clara y completa.

 

 

Las ventajas de utilizar Storybook son:

 

  • Rapidez y fácil comprensión con aquellos desarrollos en los que se está trabajando
  • Posibilidad de trabajar con datos de forma dinámica
  • Fácil reutilización de componentes
  • Agiliza el trabajo en equipo tanto a nivel interno como con otros equipos
  • Personalización según las necesidades del proyecto

 

Conclusión

 

StoryBook te descubre otra manera de trabajar. En proyectos en los que se trabaja en equipo, y en el que el volumen de tareas es cada vez mayor, es importante seguir un orden y una estructura muy clara y definida. StoryBook te permite trabajar así, es una herramienta colaborativa y en la que la reutilización de componentes se convierte en un punto positivo y no, en una fuente de problemas.

Permite que el flujo de trabajo sea mucho más fluido entre el equipo de diseño y el de desarrollo. Al tener tanta visibilidad el resultado, es muy fácil ver como ha quedado y si es necesario hacer cualquier mejora o corrección.

Grandes empresas como Dropbox, GitHub, airbnb, Lyft, Jet brains y Mozilla confían en esta herramienta para crear sus propios proyectos.