Developing better UI components with Storybook

Want your UI to look as sleek as your favorite storybook? The new Storybook 4.0 release has new improvements, features, and support. Front-end developers take note: you can test your app components with style.

Before we dive into the new additions, let’s first look at what Storybook is capable of, and what the goal of this project is.

A better UI

Storybook is a development environment for UI components. It runs independent of your front-end code, on its own isolated port away from the rest of the app. During development, it helps by acting as a testing grounds for visualizing your app components.

The description from GitHub states:

You can build quickly without having to worry about application-specific dependencies….Storybook’s easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.

Take advantage of the add-on gallery for a higher level of customization and testing. (Note: Be sure to see the Add-on/Framework support table first, because not all add-ons are supported by all frameworks.) Some choice add-ons include the ability to build demos from UI components, add notes, edit React props, write test specs, and support Google Analytics.

Add-ons are so useful because as the release post states, “Storybook and its addons are view layer agnostic. This means every time someone adds a feature or fixes a bug it benefits every user no matter which framework they choose.” You can even create your own add-ons if there isn’t already one that fits your needs.

Looking for some hands on experience? Check out the examples to see demos and their source. Or, go straight to GitHub and install it.

What’s new in 4.0?

Storybook 4.0 comes packaged with improvements and new features and moves the project ultimately closer to achieving its vision. In the announcement on Medium.com, editor Michael Shilman writes:

Our goal is to help every developer build bulletproof UI components. Regardless of framework or stack. Today we’re one step closer to that goal.

Features and improvements packaged in version 4.0:

Performance improvements upgrades are thanks to Webpack 4 and Babel 7. These also come along with WebAssembly support.
Six new view layers added to the list of tools including: Ember, MarkoJS, Mithril, HTML, Svelte, and Riot.js.
New themes including night mode. Customize its appearance on a whim.
Improved keyboard shortcuts.
New story parameters API.
Mobile support: Need to test on the go? Browse the example on your phone to see the mobile design in action. Here is how it looked on my phone:
For those who are familiar with an older version of Storybook, make sure to look at the deprecation list to see what’s been removed or changed.
Easier, better React Native support. No need to connect to a server in order to run Storybook as an app. Check out the detailed changes and additional features in this post by software engineer Gytis Vinclovas.