Build a Modern JS Project - #9 Storybook

Published: 15 February 2019
on channel: Code Realm
5,934
104

Our project is starting to take shape and is already featuring several runnable examples for both browsers and Node. The library users can now refer to the example code to speed up integration or even run the demos on their own. This serves as both documentation and demo code for the public.

However, it does not address the need for a development environment. We can certainly preview our components with a local dev server, but this requires a build setup with a full-fledged app that would serve our spinners. It would be much easier to design and develop our components one by one in a sandboxed environment. This way, we could test out the states of each spinner, try out various props, and play with styling. We can build such a playground from scratch, or we can use an open-source library such as Storybook.

Storybook started out as a development environment for building UI components with React. It then expanded to other frameworks like Vue and Angular, but the philosophy remains the same to this day. As you onboard Storybook, you'll notice that it will begin reshaping your dev workflow. Whereas your natural instinct might be to write out and put together very specialized components as part of a monolith app, Storybook will drive you to focus on one component at a time to flesh out and solidify the API and state of each UI element.

You'll find that Storybook is many things all at once - a playground, a preview, a styleguide, and a sandbox for your components. It especially appeals to library authors that build UI elements for others to consume and require their API to be consistent and rock-solid. But Storybook also proves invaluable for closed-source projects as well by improving productivity and developer experience.

If you've worked with Styleguidist https://react-styleguidist.js.org/ Storybook will feel like home

Give it a try if you haven't already! It might change the way you build your apps https://storybook.js.org/

The Delightful Storybook Workflow https://blog.hichroma.com/the-delight...


Watch video Build a Modern JS Project - #9 Storybook online without registration, duration hours minute second in high quality. This video was added by user Code Realm 15 February 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,93 once and liked it 10 people.