Explorando el soporte avanzado para Vite 5 en Storybook 8

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Storybook y Vite se han situado entre las bibliotecas más populares en el mundo frontend en los últimos años. A medida que ambas se mejoran, cada vez más desarrolladores las eligen como buenas opciones para desarrollar componentes de interfaz de usuario aislados (Storybook) y agrupar código (Vite).

En este artículo, analizaremos las últimas actualizaciones de Storybook 8, centrándonos en su compatibilidad mejorada con Vite como herramienta de desarrollo. Esto ayudará a demostrar por qué la combinación de Storybook y Vite es una excelente opción a considerar al crear los componentes de interfaz de usuario para su próximo sitio web, además de explicar sus altas tasas de retención en las recientes encuestas sobre el estado de JavaScript .

¿Por qué Storybook?

Storybook es, sin duda, la herramienta más común para desarrollar, documentar y probar componentes de interfaz de usuario aislados. Lanzado en 2016 como una herramienta para el desarrollo de componentes de React, captó la atención de la comunidad de código abierto y, a pesar de algunas desventajas , se convirtió en la plataforma confiable y popular que es hoy.

Storybook está diseñado para ofrecer un entorno aislado y más productivo para crear las piezas de tu interfaz de usuario. Esta configuración permite a los desarrolladores centrarse por completo en la lógica y la funcionalidad de los componentes, independientemente de la lógica de negocio.

A lo largo de los años, Storybook ha mejorado su compatibilidad con las principales bibliotecas y frameworks de interfaz de usuario, como React, Vue, Angular y Svelte. Hoy en día, podemos configurar rápidamente un proyecto de Storybook compatible con la mayoría de las herramientas habituales en el desarrollo de interfaces.

¿Por qué Vite?

Vite apareció por primera vez en el mundo frontend en 2020 como una alternativa más rápida y eficiente a los empaquetadores basados ​​en JavaScript. Incluye Rollup y esbuild como dos dependencias principales, ambas utilizadas para compilar y optimizar la aplicación según el entorno de destino.

Una de las principales razones por las que Vite es más rápido que otras herramientas de desarrollo es su compatibilidad nativa con módulos ES en los navegadores. Este proceso de transpilación de módulos busca una versión más cercana al código fuente, lo que mejora la eficiencia. Esta versión se entrega al navegador como módulos individuales, en lugar de uno o más paquetes que los incluyan todos, como ocurre con webpack.

Al desarrollar una aplicación, queremos que nuestros cambios se reflejen en la página lo antes posible, un proceso denominado ” Reemplazo de Módulos en Caliente” . Con las mejoras basadas en módulos ES, Vite puede reflejar esos cambios en el navegador mucho más rápido porque, como se mencionó anteriormente, no compilaremos la aplicación completa ni crearemos un nuevo paquete. En su lugar, tendremos una nueva versión del módulo modificado.

Vite 5 se lanzó a finales de 2023 e incluyó una actualización para el uso de Rollup 4 , la herramienta de empaquetado utilizada para compilar código en un entorno de producción. Storybook 8 ya ofrece compatibilidad con esta última versión de Vite.

¿Qué hace que la combinación de Storybook y Vite sea atractiva?

Al ofrecer soporte de primera clase para Vite como herramienta de compilación a partir de Storybook 7, los proyectos de Storybook ahora aprovechan muchas de las grandes cosas que Vite aporta a la comunidad, como tamaños de instalación más pequeños y un amplio soporte del ecosistema.

El esfuerzo de integrar Vite como herramienta de compilación en Storybook permite lograr tiempos de inicio más rápidos de compilación y de desarrollo en comparación con el uso de webpack, la otra opción integrada. Esto se debe principalmente a dos aspectos importantes:

• Una fase de preempaquetado que utiliza esbuild, donde la aplicación Storybook, que incluye los controles de navegación de la historia y los complementos, se empaqueta con antelación para que no tengamos que compilarla durante el inicio. Solo queda encargarse del iframe donde se renderizan nuestros componentes.
• Eliminación de dependencias internas innecesarias, posible mediante la implementación de compatibilidad con navegadores modernos y versiones de Node.js

Esta mejora en el soporte también nos permitió integrar Storybook en los proyectos de Vite sin necesidad de configuración, ya que extiende automáticamente la configuración de Vite en lugar de dejarla en manos del usuario. Como explicaron en su blog sobre el lanzamiento de Storybook 7 , la mentalidad al respecto ha cambiado a medida que el equipo de Storybook se dio cuenta de que es más importante simplificar la adopción de una herramienta que ofrecer a los desarrolladores un alto nivel de personalización desde el principio.

Además, el paquete @storybook/builder-vite nos ofrece una forma sencilla de añadir Storybook a un proyecto webpack existente. En ese caso, solo los componentes e historias se compilarán con Vite, lo que resulta en tiempos de inicio y actualización más rápidos al desarrollar componentes. El resto del proyecto continúa usando webpack como empaquetador; sin embargo, el simple hecho de que puedas mejorar fácilmente tu experiencia de desarrollo eligiendo Vite es razón suficiente para probarlo.

En cuanto a las estadísticas, Storybook y Vite han experimentado un crecimiento continuo a lo largo de los años, especialmente en el último. A medida que Vite crezca y elimine sus inconvenientes, se espera que cada vez más proyectos de Storybook lo utilicen como sustituto de webpack.

Los puntos mencionados anteriormente nos muestran cómo el trabajo continuo de las comunidades de Vite y Storybook está ayudando a mejorar el soporte para las numerosas herramientas frontend disponibles actualmente. A medida que estas herramientas se integren y evolucionen, seguiremos obteniendo información valiosa para mejorar nuestras prácticas de desarrollo web.

Soporte mejorado para Vite en Storybook 8

Un ejemplo de las mejoras continuas mencionadas en la sección anterior es el soporte más completo de Vite que viene con Storybook 8.

Entre otras excelentes características, Storybook 8 ofrece compatibilidad con Vite rediseñada, pruebas de Vitest y compatibilidad con Vite 5. Esto demuestra que la comunidad involucrada en esta última versión considera a Vite como la herramienta de compilación de próxima generación.

Características de Vite 5

Como se mencionó anteriormente, Vite 5 está disponible desde 2023. Uno de los principales cambios en esta versión es el uso de Rollup 4, que promete tiempos de empaquetado reducidos (aunque parece que las mejoras reales solo se percibieron en las siguientes iteraciones después del lanzamiento de v4).

La última versión también ofrece una API más limpia y se centra en mejoras de rendimiento, con casos de uso bien documentados y orientación sobre qué verificar cuando se enfrenta a impactos en el rendimiento que su aplicación pueda estar sufriendo.

En cuanto al rendimiento, Vite 5 permite listar módulos que se pueden “calentar”, lo que significa que los módulos de uso frecuente se transformarán y almacenarán en caché con antelación para que se puedan entregar justo cuando se solicitan. Esto mejora los tiempos de carga de la página y, en consecuencia, la experiencia general del desarrollador. Consulte más detalles sobre esta opción de configuración aquí .

Uso de las utilidades de espionaje y espera de Vitest

La última versión de Storybook también ofrece mejoras en las pruebas, incluyendo Vitest como parte del framework . El framework de pruebas personalizado de Storybook utiliza Jest y la biblioteca de pruebas de React para impulsar sus pruebas. Con la última versión, se reemplaza el uso de las utilidades y por las proporcionadas por Vitest.@storybook/testspyexpect

Limitaciones de Vite

Como todas las herramientas, Vite también presenta algunas desventajas. A pesar del rápido crecimiento de su uso, aún no está tan consolidado como alternativas como webpack.

Webpack está disponible desde 2012 y ofrece un alto nivel de personalización para escenarios más complejos, además de documentación consolidada y numerosos casos de uso que pueden servir de referencia. Por otro lado, Vite, si bien es prometedor, podría requerir el desarrollo de algunas soluciones para proyectos con configuraciones altamente personalizadas.

Un aspecto importante de la implementación de Vite es el uso de dos empaquetadores independientes: esbuild y Rollup. Uno se utiliza para empaquetar código para entornos de desarrollo y el otro es más aplicable a la compilación de código de producción. La separación de estas herramientas puede causar discrepancias entre las compilaciones de desarrollo y producción. Sin embargo, existe un proyecto en curso basado en Rust llamado Rolldown , que pretende reemplazar a estos dos empaquetadores.

Conclusión

Dado que Vite ha conquistado la web, es justo decir que su integración con otras herramientas, no solo con Storybook, seguirá mejorando y abarcando muchos más casos. Por lo tanto, aunque pueda encontrar limitaciones al usar Vite con su configuración actual, vale la pena observar su desarrollo en las próximas iteraciones.

Tiempos de inicio y actualización más rápidos, una amplia gama de soporte en la comunidad y la facilidad de adopción son los puntos clave que debes tener en cuenta al elegir Vite para tu próximo proyecto de Storybook.

Consulta la publicación del blog de lanzamiento de Storybook 8 para obtener más detalles sobre las características de la nueva versión, como la huella cero de React para proyectos que no sean React y el soporte para componentes de servidor React.

Por último, los siguientes son recursos que pueden ayudarle a configurar un proyecto Vite y agregar una aplicación Storybook para ejecutar junto con su proyecto:

• Andamiaje de su primer proyecto Vite
• Cómo agregar Storybook a un proyecto existente

Si quieres conocer otros artículos parecidos a Explorando el soporte avanzado para Vite 5 en Storybook 8 puedes visitar la categoría Guias.