Developing, Documenting, and Testing your Vite app with Storybook | Ian VanSchooten | ViteConf 2022

Learn how to develop, document, and test your Vite app with Storybook, a UI component library tool that streamlines front-end development, testing, and documentation.

Key takeaways
  • Storybook is a UI component library tool that helps develop, document, and test front-end applications with ease.
  • It combines several popular tools, including Webpack and Jest, without requiring users to override config.
  • Storybook provides an isolated development environment for components, and its stories can be used as documentation.
  • It also offers visual regression testing, snapshot testing, and interaction testing, making component testing more accessible.
  • Storybook supports Vite, a modern development server, and its builder.
  • Using Storybook with Vite, developers can enjoy features like fast rebuilds, fast refresh, and instant hot module reloading.
  • Storybook 7.0 is the latest version, which has improved performance and comes with a new portable docs experiment to render stories into documentation.
  • It also has better support for Vite and is now pre-bundling its manager UI.
  • Ian VanSchooten, the speaker, suggests using Vite with Storybook to improve development speed, and recommends exploring its features, such as snapshot testing and interaction testing.
  • He also shares tips on how to use Storybook effectively, including using MDX for documentation and Chromatic for visual regression testing.
  • Other key takeaways include the importance of collaboration, the benefits of a well-organized component library, and the value of testing components thoroughly.
  • Storybook is used by many large companies, including Microsoft, Shopify, and Adobe, and its development is ongoing, with improvements and new features added regularly.