Today, our Hunters team is talking about Storybook, an open-source tool for building user interfaces by creating components and pages in isolation and independently. Using it, you can accelerate the development, testing, and documentation of your front-end components.
Storybook Features
Storybook is a tool designed for use with numerous front-end frameworks such as React, Angular, VueJS, Ember, Svelte, and Preact . This tool allows you to:
- Isolate the creation of visual components from the development of business logic, resulting in a reduction in the requirements for developing these components.
- Easily test the display of different data types and lengths in components that might otherwise be difficult to reproduce in the system.
- Access and view all application components from the Storybook interface, making it easier to maintain a style guide throughout the project.
- Generate and maintain documentation for user interfaces.
- Create mockups and prototypes of front-ends by interconnecting components using links.
It's also possible to enhance Storybook's functionality by adding add-ons that allow, among other things, checking components' compliance with accessibility standards or displaying components in different screen sizes and resolutions. All available add-ons can be found at Addons | Storybook.
What are Stories?
Storybook is based on Stories . These Stories are representations of different states of front-end components. This way, the same component can be represented in different Stories, each with its own state and content. This allows changes to be made to it and easily visualize how they affect all of the component's defined states, eliminating the need to change the application state for testing.
Stories can also be created from multiple components, resulting in the display of entire pages. Adding links to the components of these Stories allows for navigation between components, creating an interactive prototype.
How to integrate Storybook?
The process for integrating Storybook into a project is simple. There's an executable package with npx that detects the front-end framework used in the project and creates the necessary configuration for running Storybook.
After running it, you will be able to initialize Storybook and view (in the browser) an interface like the following:
Figure 1: Default Storybook project.
In Figure 1, in the left panel, you can see different Stories created by default. Meanwhile, in the main panel, you can see a page layout, which contains the Header component at the top and the page content in the center.
If you click on a component and go to the Docs tab at the top, you can view the properties of a component, as shown in Figure 2:
Figure 2: Documentation tab of a component.
Where can we use Storybook?
The use cases where Storybook excels are:
Large front-end projects or those with a long development period: By creating component documentation and centralizing its display, you can easily understand and view components created by other team members, facilitating their reuse and avoiding the creation of duplicates.
Applications where components display a large amount of data from external sources or entered by the user: Thanks to the ability to define multiple stories for a single component, it can be represented in different states. If an application displays text of varying lengths or images of different sizes, Stories can be used to represent and store them. This way, any subsequent changes to the component and their impact on the data presentation can be visualized.
We can see a video of its operation here:
Want to know more about Hunters?
At Altia, we've designed several programs to help people finishing their degree or recent graduates get started in the IT sector, leveraging their talent and passion for technology. One of these programs is Hunters : people who are trendsetters, have an innovative spirit, and contribute to anticipating future challenges. Being part of Hunters means being part of a cross-functional group capable of generating and transferring knowledge.
Get ahead of the digital solutions that will drive our growth. Find more information about Hunters on the website.
Nicolás Cuello - Software Engineer at Altia
