La investigación corre a cargo de Marielle
Cuando se trata de acelerar el proceso de desarrollo de softwareUna herramienta fiable suele ser suficiente. ¡Para la gestión de código JavaScript, Storybook JS es el go-to!
Si su equipo está buscando una herramienta fácil de usar con una amplia gama de características, Storybook JS es la respuesta. Puede ayudar a los desarrolladores a construir de forma más rápida y eficiente al permitirles crear numerosos componentes de interfaz de usuario de forma aislada rápidamente.
Este blog te permite profundizar en las ventajas, limitaciones y aplicaciones prácticas de Storybook JS. Así que, ¡empecemos!
¿Qué es Storybook?
Storybook no es sólo un taller de frontend. Es un patio de recreo creativo para construir componentes y páginas de interfaz de usuario en un glorioso aislamiento. Utilizado por miles de equipos en todo el mundo, es la herramienta definitiva para el desarrollo de interfaz de usuario, pruebas y documentación. ¿Y lo mejor? Es de código abierto y completamente gratuita.
Proporciona un espacio aislado para crear, visualizar y documentar componentes de interfaz de usuario y permite a los desarrolladores ver el aspecto y el comportamiento de los componentes en diferentes estados, lo que facilita la detección y corrección de problemas en las primeras fases del proceso de desarrollo. Storybook es utilizado por los desarrolladores de front-end y diseñadores a desarrollar componentes más rápidamente, mejorar la calidad de su código y garantizar un aspecto coherente en toda la aplicación.
Facilita el desarrollo de estados elusivos y casos extremos sin necesidad de ejecutar toda la aplicación. Se puede adoptar de forma incremental y se integra con las herramientas estándar del sector.
5 ventajas de utilizar Storybook
Muchos desarrolladores front-end están recurriendo ahora a Storybook por su amplia gama de ventajas. Pero cada organización tendrá que planificar los requisitos de su proyecto antes de utilizar Storybook para sus necesidades específicas.
He aquí algunas de sus ventajas:
Ofrece componentes de interfaz de usuario más duraderos
Storybook permite a los desarrolladores desarrollar rápidamente componentes aislados y páginas y realizar un seguimiento de sus casos de uso como historias. Verifique los casos extremos de difícil acceso de la interfaz de usuario. Utilice complementos para simular todo lo que necesita un componente: contexto, solicitudes de API, características del dispositivo, etc.
Pruebe las interfaces de usuario con menos esfuerzo y sin escamas
Las historias son una forma pragmática y reproducible de realizar un seguimiento de los estados de la interfaz de usuario. Utilícelas para realizar pruebas puntuales de la interfaz de usuario durante el flujo de trabajo de desarrollo. Storybook ofrece flujos de trabajo integrados para pruebas automatizadas de accesibilidad, interacción y visualización. También puede utilizar las historias como casos de prueba importándolas a otras herramientas de prueba de JavaScript.
Documenta fácilmente los componentes de la interfaz de usuario para que tu equipo pueda reutilizarlos
Storybook es la única fuente de verdad para su interfaz de usuario. Las historias indexan todos los componentes y sus distintos estados, lo que facilita a los desarrolladores frontales la búsqueda y reutilización de patrones de interfaz de usuario existentes en varias historias. Storybook también genera automáticamente documentación a partir de esas historias.
Muestra cómo funciona la interfaz de usuario
Las historias muestran cómo funcionan realmente las interfaces de usuario, no sólo una imagen de cómo se supone que deberían funcionar. De este modo, todo el mundo está de acuerdo con lo que se está produciendo actualmente. Publica Storybook para obtener la aprobación de tus compañeros de equipo. También puedes incrustarlos en Wikis, Markdown y Figma para agilizar la colaboración.
Automatice los flujos de trabajo de desarrollo de la interfaz de usuario
Storybook es compatible con su flujo de trabajo de integración continua. Añádelo como paso de integración continua para automatizar las pruebas de la interfaz de usuario, revisar la implementación con los compañeros de equipo y obtener la aprobación de las partes interesadas.
4 desventajas de utilizar Storybook
A pesar de tener una amplia gama de ventajas, Storybook también tiene algunos inconvenientes que los desarrolladores deben tener en cuenta antes de utilizarlo.
A continuación se indican las limitaciones de la creación de proyectos mediante Storybook:
Larga configuración inicial
Inicializar Storybook para un proyecto puede llevar mucho tiempo, especialmente para proyectos grandes y complejos. Puede ser difícil entender cómo encaja todo, y se necesita tiempo, concentración y esfuerzo para conseguir la configuración correcta.
Integración limitada
Aunque Storybook puede integrarse con muchos frameworks y librerías front-end, puede que no sea compatible con todas las herramientas y sistemas. Si está utilizando una biblioteca u otros marcos que no son compatibles con Storybook, entonces puede que tenga que buscar una alternativa.
Varios recursos necesarios
Ejecutar Storybook puede consumir muchos recursos, especialmente en proyectos grandes, y puede requerir recursos adicionales para mantener un rendimiento óptimo. Además, realizar cambios en los componentes puede llevar más tiempo del esperado debido a la cantidad de trabajo necesario.
Añade otro nivel de complejidad
Aunque Storybook ofrece muchas ventajas, también puede añadir otra capa de complejidad al proceso de desarrollo de la interfaz de usuario. Puede resultar complicado garantizar que los componentes desarrollados en Storybook coincidan con el comportamiento de los componentes de la aplicación final.
Cómo ayuda Storybook a diseñadores y desarrolladores
El quid del problema es que los diseñadores y los desarrolladores utilizan herramientas distintas. Al final hay que pasar la información de un lado a otro manualmente. Y si algo sale mal, la cosa puede complicarse. Afortunadamente, Storybook resuelve este problema proporcionando una única fuente de información sobre los sistemas de diseño y la interfaz de usuario: tanto los diseñadores como los desarrolladores ven lo mismo.
Storybook conecta componentes codificados en marcos de JavaScript como React con herramientas de diseño como Figma. Esto permite detectar incoherencias en una fase más temprana del proceso y garantizar que los diseños y el código se correspondan. Además, puedes publicar tu Storybook para facilitar la revisión de la interfaz de usuario y consolidar los comentarios en una ubicación centralizada.
Con los componentes reutilizables, desarrolladores y diseñadores disponen de una construcción compartida. Los equipos descomponen una página en sus elementos constitutivos y crean variaciones de cada componente para adaptarse a distintos estados de la interfaz de usuario.
Los desarrolladores utilizan Storybook para desarrollar componentes de interfaz de usuario y capturar sus estados como historias. En cambio, los diseñadores modelan estos estados como variantes de componentes en Figma. Storybook conecta los dos, haciendo que la entrega sea mucho más fluida.
El proceso comienza con el montaje por parte de los diseñadores de una cuadrícula de variantes, a menudo denominada hoja de adhesivos.
Como desarrollador, tu objetivo es garantizar que la interfaz de usuario codificada coincida con el diseño original. Tener los diseños y la interfaz de usuario en vivo uno al lado del otro hace que sea mucho más fácil construir según las especificaciones.
Libro de cuentos Complemento de diseño le permite incrustar archivos Figma directamente en el propio Storybook.
Se trata de archivos activos que puede inspeccionar. Si el diseñador introduce algún cambio, lo verá de inmediato.
Del mismo modo, el Plugin Storybook Connect permitirá a los diseñadores integrar historias en directo en Figma. Así les resultará más fácil actualizar los diseños para que coincidan con lo que se está produciendo.
Cómo instalar Storybook y escribir historias
Utilice el Storybook CLI para instalarlo en un solo comando. Ejecute esto dentro del directorio raíz de su proyecto existente:
npx storybook@latest init
Nota: storybook init no está hecho para proyectos vacíos. Necesita ser instalado en un proyecto que ya está configurado con un marco para que funcione.
Dependiendo de su marco, primero, cree su aplicación y luego comprueba que todo funciona ejecutando
npm run storybook
Iniciará Storybook localmente y mostrará la dirección. Dependiendo de la configuración de su sistema, se abrirá automáticamente la dirección en una nueva pestaña del navegador, y usted será recibido por una pantalla de bienvenida.
Escribir historias
Para empezar, crea un directorio "stories" dentro de la carpeta components. También puedes consultar las guías de instalación de Create React App y Guías de instalación de cuentos para más información.
exportación por defecto que contiene:
- componente - el propio componente
- título - cómo agrupar o categorizar el componente en la barra lateral de Storybook
- para generar automáticamente documentación sobre nuestros componentes
- excludeStories- información adicional requerida por la historia pero que no debe ser renderizada en Storybook
- argTypes - especifica los args comportamiento en cada historia
Detectar problemas de accesibilidad
Las pruebas de accesibilidad se refieren a la práctica de auditar el DOM renderizado con herramientas automatizadas frente a un conjunto de heurísticas basadas en WCAG y otras buenas prácticas aceptadas en el sector. Actúan como primera línea de control de calidad para detectar violaciones flagrantes de la accesibilidad, garantizando que una aplicación sea utilizable por el mayor número posible de personas, incluidas las que sufren discapacidades como problemas de visión, audición y trastornos cognitivos.
El libro de cuentos incluye un complemento de accesibilidad.
Ejecute el siguiente comando para instalar el addon:
yarn add -dev @storybook/addon-a11y
A continuación, actualice el archivo de configuración de Storybook para habilitarlo:
Automatice las pruebas con el ejecutor de pruebas
Con la función de reproducción de Storybook, pudimos sortear nuestro problema, permitiéndonos interactuar con nuestra interfaz de usuario y comprobar rápidamente cómo responde si actualizamos nuestras tareas, manteniendo la coherencia de la interfaz de usuario sin ningún esfuerzo manual adicional.
La buena noticia es que sí podemos. Storybook's corredor de prueba nos permite hacer precisamente eso. Es una utilidad autónoma alimentada por Dramaturgo-que ejecuta todas nuestras pruebas de interacción y detecta las historias rotas.
Ejecute el siguiente comando para instalarlo:
yarn add -dev @storybook/test-runner
A continuación, actualice sus scripts package.json y añada una nueva tarea de prueba:
{
"scripts": {
"test-storybook": "test-storybook"
}
}
Por último, con tu Storybook en marcha, abre una nueva ventana de terminal y ejecuta el siguiente comando:
prueba de hilo-libro de cuentos -ver
Integraciones / Complementos
Storybook ofrece una amplia gama de complementos que pueden utilizarse para ampliar su funcionalidad y mejorar el proceso de prueba y depuración. Por ejemplo, el complemento "storybook-addon-jest" permite a los desarrolladores ejecutar pruebas Jest dentro de Storybook, y el complemento "storybook-addon-chromatic" permite a los desarrolladores probar los componentes en distintos entornos y dispositivos.
Consulte aquí los addons más populares y una guía sobre cómo instalarlos.
Publicar Storybook en un espacio de trabajo compartido para su aprobación
Antes de realizar el envío, querrás invitar a los diseñadores a que revisen la interfaz de usuario para asegurarse de que es correcta y conseguir ese dulce comentario de "LGTM-Envíalo". GitHub actúa como un espacio de trabajo en la nube en el que los revisores asignados pueden dejar comentarios y aprobar Pull Requests para tu código. Cromáticade Storybook, ofrece un servicio similar para la interfaz de usuario. Le ayuda a recoger opiniones sobre la interfaz de usuario publicación tu libro de cuentos.
Chromatic se integra en su línea de producción CI. Publica automáticamente su Storybook cuando se crea una Pull Request. A continuación, puede asignar revisores que pueden comentar y solicitar ajustes en los cambios que no están del todo bien. Piense en ello como una revisión de código, pero para su interfaz de usuario.
Para terminar, cuando entregue los diseños a desarrollo, coloque los diseños junto a la implementación. En Storybook, utilice la función Complemento de diseño. En Figma, utilice el botón Plugin Storybook Connect.
Cuando revise el desarrollo con los diseñadores, publique su Storybook en un espacio de trabajo compartido como Cromática. Esto proporciona a su equipo un punto de referencia actualizado en el que pueden dejar comentarios, obtener opiniones y asignar revisores.
Conclusión
Storybook es una potente herramienta para React, React Native, Vue, Angular, Svelte y muchos otros frameworks. Tiene una próspera comunidad de desarrolladores y una gran cantidad de complementos. Esta introducción araña la superficie de lo que es posible y lo productivo que es construir UIs duraderas. Al proporcionar un entorno centralizado para desarrollar y probar componentes de interfaz de usuario, Storybook agiliza el proceso de desarrollo, reduciendo el tiempo y el esfuerzo necesarios para desarrollar componentes de alta calidad.
Profundice en sus útiles recursos:
- Documentación oficial del Libro de cuentos contiene documentación sobre la API, enlaces a la comunidad y la galería de complementos.
- Manual de pruebas de interfaz de usuario destaca las mejores prácticas de flujo de trabajo utilizadas por equipos de alta velocidad en Twilio, Adobe, Peloton y Shopify.
- Manual de ensayos visuales, un libro electrónico gratuito de 31 páginas, profundiza en el uso de Storybook para probar componentes visualmente.
¿Necesita contratar diseñadores UI/UX para su proyecto?
Hoy en día, una aplicación es el reflejo de su diseño. Una gran experiencia de usuario es la diferencia entre una aplicación que se utiliza y otra que no. Contratar a un Diseñador UI/UX puede ayudar a que su proyecto alcance todo su potencial.
En StarTechUP nos encargamos de todo, desde el diseño hasta la creación de prototipos y el desarrollo, para que usted no tenga que preocuparse de nada. Nuestros experimentados diseñadores crearán algo único y potente que cumpla todos sus requisitos.
Si necesita ayuda para crear aplicaciones móviles react, aplicaciones webo cualquier otro soluciones de softwareno dude en ponerse en contacto con nosotros. Contamos con un equipo de profesionales dispuestos a asumir el reto y construir algo de lo que pueda sentirse orgulloso.
Póngase en contacto con nosotros hoy mismo para empezar.
