Scaling a UI Delivery with Storybook-Part 1
Increasingly we have more complex web applications with multiple flows and the most accurate layout. The screens have been designed to serve the user an explosion of colors, interactions, animations, textures and sensations!
One thing is for sure, keeping all this code is complicate, even when we have unit tests. But what about the visual?
No matter the architecture used, we have to create a Generic Components Hall! These will give the face of the application serving like Lego parts to build each screen and we will save exponentially the development time, and thus reducing delivery time.
The Development Process
In a application from scratch is simple to create new components and see it. But imagine in a big application with many flows.
Sometimes it is hard to go to a page to improve a component style, and you, probably, will do some workarround to see this component.
Workarrounds like comment code, remove validations, create a new page to see that component. After finish your job, you need to rollback all this alternative solutions to debug the component. Sometimes, we forgot some of them, and it passes from the pull request.
The Storybook can help you
In a nutshell, the StoryBook is a library to visualize templates. In it you can plug any Frontend project like any structure and view the components and everything in it. So you can mount what you want, however, without the need to initialize an application.
Its UI is very reminiscent of those demonstration pages of CSS Frameworks, with a side menu containing the features and a container with the demonstration of these features. And that’s exactly what it serves, to demonstrate the components of the application serving visual documentation of the components, and, why not, other things (remains of the team’s creativity).
Installing the Storybook
The Storybook has extensive support for the most used Frontend Frameworks, as shown in the table below:
The installation process of the storybook is very simple, I will demonstrate with Angular, because it is what I use most.
The first step is to install the storybook and inform the type of the application you are using, which framework.
npx -p @storybook/cli sb init --type angularThe Storybook Cli will do all the setup for you to start using with ease.
- Install the Storybook dependencies;
- Create the config files to initialize, to register addons, tsconfig and typings ;
- Create demo stories at src/stories directory;
- Add the storybook’s server and build scripts at the package.json;
So, to run the server just use the storybook script:
yarn storybookWhen the server start it will open at localhost:6006 and you will have the demo stories.
By default, the storybook will load all *.stories.ts files, but you can configure it editing the file .storybook/config.js.
Creating stories
Let’s create a typography story, just to display css classes to our titles.
Define the simplest style at src/assets/syles.scss.
Let’s scan this story.
The storiesOf method will receive the feature name and for each demonstration we need to define a story calling the method add.
The add method receives a name and a function to return the story. This story is an object with the properties template and styles.
The template has an html string and it will be render by the Storybook server. At the this html we can show the application css and merged with the story inline style.
We can render component in two properties: by template or component.
The component declaration we just need to import the component and declare it in component key.
The story has a property props, by it you can communicate with to the component, passing the variables as Input.
If you need to use the template to render a component, you need to declare the componenet in a module, like in Angular. This is why Storybook creates a dynamic module to each story context, so if you use a component in a module you need to declarate it.
The Storybook has a module builder called moduleMetadata, that extends indirectly from Angular NgModule. This module will be injected in the stories by the addDecorator method.
Conclusion
I’ve been using Storybook from the last 2 years with React, and mostly with Angular. It have been help me and my team a lot.
We can, with no fear, to parallelize our tasks to deliver a feature that could be delayed by the component interdependencies.
It has also dramatically reduced component rework, since all shared components are documented by Storybook.
It has become much easier to debug and update the behavior of a component without having to integrate with the application to check it.
For this post I went through a brief introduction of the features of the Storybook, in the next I will demonstrate more functionalities and use cases.
You can check here part 2 about Depedency Injection
