days
-4
-3
hours
-1
-5
minutes
-2
-1
seconds
-3
-4
search
What's been added in the newly released version 4.0?

Developing better UI components with Storybook

Sarah Schlothauer
© Shutterstock / Nagomyi

UI developers are always on the look-out for a tool to make their lives easier. Storybook helps developers test their UI components in an isolated environment. What’s been added in the newly released version 4.0?

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.

SEE ALSO: New React Native tool coming your way — Vasern joins the party 

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.

SEE ALSO: JavaScript dominates open source, Java trails behind

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:
    Storybook
  • 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.

Migrating to the newest release? Follow the guide for the easiest upgrade.

Have you used Storybook and has it improved how you develop UI components?

Author
Sarah Schlothauer

Sarah Schlothauer

All Posts by Sarah Schlothauer

Sarah Schlothauer is an assistant editor for JAXenter.com. She received her Bachelor's degree from Monmouth University in Long Branch, New Jersey and is currently enrolled at Goethe University in Frankfurt, Germany where she is working on her Masters. She lives in Frankfurt with her husband and cat.

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of