New Dimensions in Front end Development with Storybook JS

Engineered for rapid UI development

Components are great for building user interfaces no frontend developer would argue against that. They make it easy to tie your code to specific use cases, reuse code, test and analyze it and much more. But as your application grows, even the components aren’t enough to keep track of everything that is going on with your application. A tool that allows to build components in isolation and still study the relationship between them would be nice. We found that Storybook might just be what we (all) needed.

What is Storybook?

As you can read on the official Storybook website, Storybook is an open-source tool for developing UI components in isolation. It supports all the popular frontend frameworks/libraries such as React, Vue and Angular, helping improve the efficiency and organization of your UI development.

But you didn’t come here to read a Wikipedia-like definition of Storybook, did you? So let’s focus on what problems exactly Storybook solves. And let me tell you, it has already helped us and our project tremendously.

Storybook JS — the problem it solves

During one of our frontend-heavy projects, developers at The Software House participated in the development of various user interfaces for the many tools offered by our client’s marketing automation platform. It was a large project and included several frontend developers working simultaneously on various seemingly standalone aspects of it.

Regardless, it was essential for the client to ensure consistent, self-aware design across all the UIs, on top of great UX and performance. In addition, the project was not a one-time deal it was supposed to lay the further foundation for even more ambitious developments in the future. It means that scalability of all the user interfaces and the ease in taking over the project by new people while keeping the quality intact was one of the top requirements.

Not an easy nut to crack, huh? To make it happen, we decided to go for Storybook, because all that we have written in this blogpost so far describes exactly the kind of development scenario that inspired the Storybook tool.

With Storybook, your entire team can simultaneously collaborate on the development of the components in an app-like environment, but minus all the business logic. You can try all the states without having to trigger them in the app each time and improve testing capability. It also greatly promotes one of the biggest selling points of components in the first place — code reusability. Let’s take a close look at the main benefits of Storybook and how you can make use of them in practice

Read more: What’s the difference between UX and UI design in software development?

Storybook — benefits

Storybook’s concept is appealing, but it shines its brightest in actual practice by offering:

• Easy access to all components

With Storybook, you can access every component and browse through all of its states without having to worry about business logic and ticking all the boxes you would normally have to in an actual app.

• Ease of sharing and reusing components, stories

Since you can reach all of them so easily, each component and story can be easily reused across the entire software project by any developer who works on it, ensuring consistent design and UX in the process.

• Increased chance of catching all edge cases

You can render components in states that can’t always be easily triggered in the app, improving testing for edge cases. Storybook UI development is extremely efficient in the long-term.

• Highly improved communication between developers and designers…

Storybook application can be easily shared with and commented on by designers so that they can add their input regarding the implementation of the designs. There is no need for a separate tool for this purpose. The same goes for project managers.

• …as well as clients!

Another group that can use this feature are clients. Storybook makes it easy to show pieces of the software to keep the client in the loop. Even small pieces of UI can be shared and made available for feedback, preventing longer periods without any deliverables.

• Improved code quality

As you write your components in isolation, you can potentially put a greater emphasis on code quality and reusability, which can have a positive impact on your entire team and organization without regards to business logic.

• Better documentation

With Storybook addons, you can document your entire component library as you go or save use cases as stories in JavaScript.

How to use Storybook? Let’s check Storybook JS out in practice!

Storybook makes a great design system and UI component quality control tool when you’re building a large view, for example, a complex form. It’s very suitable for applications built according to the atomic design principle because it provides easy and clear access to all the components in the system.