Light mode or dark mode?
English, French, or German?
iOS or Android?
Chrome, Safari, or Firefox?
User interfaces (UIs) today aren’t what they were 10 years ago. The modern UIs we interact with on our devices come with display options and are often personalised to different segments of users.
These segments might have to do with location, language, currency, customer profile, and more. Plus, there are accessibility considerations.
Users today place high expectations on their experience using web and mobile applications. A seamless, relevant, consistent, and even personalised experience is the new norm.
All of this means that front-end developers have their work cut out for them.
The complicated world of UI design and development
For any given UI component, front-end developers today might have to render dozens of versions. “Mature projects can contain hundreds of components that yield thousands of discrete variations,” as Storybook’s article “Why Storybook?” explains.
So you can imagine that without proper workflow tools, UI design and development can easily become a rat’s nest.
The agile front-end developer
These many moving parts of UI creation place the burden on front-end developers to map out components—and their variations—in a way that makes it possible to work with other developers and with stakeholders, customers, and so on.
Developers have also undergone a massive shift in the way projects get managed and executed. Agile methodologies have made for a fast-paced, iterative, and highly collaborative process to go to market.
Features get added often and fast, which means testing has to be rigorous and reliable. Approval processes have to be thorough and efficient.
So you can imagine, front-end dev toolkits have evolved right along with the rising complexity of needs and expectations.
Developers rely on various frameworks and component libraries to build UIs.
Beyond that, they also need tools to manage the complex workflow. And that’s exactly where Storybook.js, featured on TechRadar by Devoteam, is making waves.
What is Storybook.js?
Storybook.js is a tool front-end developers use to not just build and visualise but also test UI components in an isolated environment.
Storybook serves as a single source of truth for all these components and their various states. But it also keeps all the developers, project managers, stakeholders—anyone who has a say in the application’s UI—on the same page.
It turns what would otherwise be a messy, impossible-to-track spiderweb of UI components into a neatly documented, easy-to-follow workflow.
Storybook also makes testing a breeze. It shows developers how the UI actually works as currently programmed.
To boot, Storybook is open-source and has a solid community behind it building popular “Storybooks” (which you can explore in their Component Encyclopedia), add-ons, and more.
Is Storybook a mature UI development tool?
Storybook was launched in 2016 by a Sri Lankan startup by the name of Kadira.
It was eventually handed over to the open-source community and is now maintained by Chromatic (Chroma Software Inc.).
It saw early adoption in 2017 as a “niche tool for UI perfectionists,” says Michael Shilman, Storybook’s Product Lead in this video. And now it is a “mainstream fixture of the front-end tool chain.”
Currently there are over 150,000 public GitHub projects using Storybook.
It has grown to become the most popular UI component development tool for React, Vue, and Angular.
How does Storybook work?
Storybook replaces the old way of looking at UI components as a complicated “component tree.”
Instead, Storybook captures components and their variations as “stories.”
What is a story in Storybook.js?
Let’s say we have a login screen for a certain application. Well, that one component might have multiple different “states” (or variations). Different users might see different versions, or states, of this same login screen.
In Storybook, each of these different states is called a “story.”
In technical terms, stories are “a declarative syntax for supplying props and mock data to simulate component variations,” Storybook explains in their documentation. “Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behaviour.”
Storybook allows developers to save these states as stories and come back to them at any point, such as during testing and QA.
What can developers do with Storybook?
Storybook allows developers to:
- Spot test every state of every component in a sandbox environment
- Perform visual regression tests, to help catch bugs in UI appearance
- Simulate user behaviour beyond just rendering UI states but actual interactions and exchange of data
- Conduct accessibility tests to make sure the UI components and their states support user needs inclusively
- Snapshot-test stories against known baselines to help catch markup changes that could trigger errors
- Test component states outside of Storybook by importing files into different test tools
Developers can do all of this without having to worry about dependencies or business logic.
What else does Storybook do?
With Storybook, you don’t have to worry about creating documentation for your UI components. The tool auto-generates the documentation. All UI components and their various states get indexed.
What are the benefits of Storybook?
Storybook is a great way to keep UI development organised, efficient, and streamlined.
It helps teams:
- Catch—and fix—bugs in UI early, well before production stage
- Foster better collaboration between designers and developers
- Simplify getting approval or signoff from directors, stakeholders, and customers
- Generate documentation effortlessly and make it easy for all parties to understand
- Perform every kind of test needed to ensure the UI is robust and durable
Storybook was designed to take the headache and hassle out of front-end development so developers can meet the demands placed on them while producing the high-performance UIs the average user expects today.
What integrations does Storybook support?
The wonderful thing about Storybook is that there’s no vendor lock-in and no API lock-in.
Storybook uses the Component Story Format, an open standard based on JavaScript ES6 modules.
Developers can export each story as a JavaScript function they can reuse with other tools—such as Jest, Testing Library, Chromatic, Axe, Playwright, and Cypress.
Storybook supports a growing number of integrations so developers can connect or create feature-rich workflows.
Their website has an updated list of integrations and popular add-ons.
How can I learn more?
This article is part of a greater series centred around the technologies and themes found in the second edition of the TechRadar by Devoteam. To read further into these topics, please explore the TechRadar by Devoteam.
