What is Storybook? Better React UI Component Development

[00:00 - 00:04] So, what is Storybook? I want to answer that with a story.

[00:05 - 00:16] Let's suppose you're developing on a project and your project manager comes to you saying, "Hey, I need to develop a feature for the checkout page." In order to work on that feature, you might as well have to spin up the backend instances.

[00:17 - 00:31] You might have to run the application and then once you run the application, you have to authenticate the specific users. And then you need to click here, click there, go through different steps, all the way to finally find that feature component, which is the only thing you actually cared about in the first place.

[00:32 - 00:39] And that process is happening all over and over every single time you have to work on that feature again. So what do we learn from that story?

[00:40 - 00:59] We basically have a complex setup that is required to run the application, might take some time to compile a big project. The feature is pretty hard to reach and there's the possibility of flaky data or incomplete APIs which might impact your development and overall the entire external environment affected your development process.

[01:00 - 01:18] So if we're able to get to that story but we actually just focus on that single component, which was the only thing we cared about in the first place and not only that but actually extract these components in isolation, being able to work on them even easier, all of the problems that we just mentioned, they kind of go away. But how do we actually do that?

[01:19 - 01:25] Well, Storybook is the tool that supports that workflow. Storybook is an open source UI workshop that helps you build components in isolation.

[01:26 - 01:45] You can visualize the different visual states of your components and with the help of add-ons you can maybe switch props at runtime and see how your component behaves as well as detect if your components are behaving in certain ways that you're expecting as well as even switching backgrounds or themes. And additionally, Storybook provides a way to automatically generate documentation pages from your components based on its metadata.

[01:46 - 01:54] It also helps you put documentation and development closely together. So in short, Storybook is a tool that helps you build components in isolation.

[01:55 - 02:01] It lives outside of your application which is faster and simpler to use. It provides hot reloading the environment for a great developer experience.

[02:02 - 02:12] You can also mock all use cases you want for any component you have and it works as a living documentation which makes it simpler to maintain. If you're using add-ons you get extra functionality and integrations.

[02:13 - 02:28] Overall it's a tool with a mindset of developing first and integrating later which helps you get rid of the external environment and focus on what matters to you. You have an incredible amount of add-ons that provide you all kinds of different functionality as well as integrations with so many tools that you use and love.

[02:29 - 02:34] So who is Storybook for? A lot of people think that Storybook is a tool only for developers but that's not true.

[02:35 - 02:45] Well, first of all for developers there is the value of being a development tool for both application and component libraries. There's an extra value as a documentation tool for developers.

[02:46 - 03:02] However, it could also be used by designers to serve as a UI catalog so they can check whether the components are already implemented in the application and that will help them make the designs for the apps. It's also useful for stakeholders because Storybook can be shared across other non-technical folks and they can use it as a showcasing tool.

[03:03 - 03:08] And overall it's a tool for everyone that helps collaboration improve overall. So how does it actually work?

[03:09 - 03:18] It starts with the simple installation process which is supporting a lot of different frameworks. You run NPXSB in it in your root folder and it will install everything necessary for Storybook.

[03:19 - 03:26] And then once that is done you can run your own Storybook and that will open Storybook. But Storybook doesn't automatically get everything from your project.

[03:27 - 03:42] So given a situation where you have a restaurant card component just as simple as that, it receives props and it renders differently based on that. You have to create a new file called restaurantcard.story.jsx of which you import that restaurant card component and then you have the following constructs.

[03:43 - 03:57] There is a default export which contains the metadata of the component which will be sent to Storybook as well as named exports of which we call Stories and each of them represent a visual state of the component. So there essentially a component plus some extra annotations.

[03:58 - 04:12] For instance the default will render a default state of the component with all of these informations from there and the loading state will basically render the loading state of the component. So following that logic you can basically have as many Stories as you have use cases for your components.

[04:13 - 04:22] And there is a lot of companies using Storybook which is pretty cool and I'm going to show you an example of a real case for Storybook. Here's the Guardian, one of the biggest newspapers in the UK.

[04:23 - 04:41] As you can see the website is pretty complex and it contains a lot of different components which can have different variants. However, to develop the used Storybook which allows them to see things in isolation in all of their variants being able to document each of their components and going even to something more complex like an entire front page.

[04:42 - 04:53] So looking at a workflow without Storybook you normally have to develop and integrate at the same time. That sometimes requires a lot of effort and also your pull requests end up becoming quite big.

[04:54 - 05:16] So you make the pull requests you have to publish the entire app to a test environment so you can get the feedback from your colleagues. But if you add Storybook to that workflow you can actually develop and only later integrate which allows you to actually focus on small pieces of your feature components let's say and then you can make smaller pull requests which are easier to review and you can publish Storybook containing that component for people to test and give you feedback.

[05:17 - 05:24] So in the next lesson we're going to go through all the interesting concepts around Storybook as well as how things work piece by piece and I hope you enjoyed the lesson and I'll see you in the next one.