An Introduction To Storybook

An Introduction To Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. In this article, I'll covered what Storybook is all about and when it is useful to take advantage of when building web applications.

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. In this article, I'll covered what Storybook is all about and when it is useful to take advantage of when building web applications.

Table of Contents

  • What is Storybook?
  • Use Cases for Storybook
  • Writing Stories with Storybook
  • Integrating Addons
  • Deploying Storybook as a Static App
  • Integrating with Other Frameworks
  • Wrapping Up
What is Storybook?

Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and a host of other frameworks. It makes building stunning UIs organized and efficient that means developers don’t get distracted with flaky data, unfinished API or business logic.

Storybook runs outside of the main app so users can create UI components in a different environment without worrying about app-specific dependencies and requirements and this makes it easy to keep track of edge cases and as a result, you ship components with confidence.

Use Cases for Storybook

Storybook is currently being used by a lot of teams and engineers as a UI component library because of the way it helps you build components in isolation. Several teams rely on storybook to do the heavy lifting of composing a component library and also as a building block for their design systems. Companies like Algolia, Salesforce, Artsy ,Gov.uk, and GitHub use Storybook to build and distribute UI components that impact millions of people.

Here's a couple of use cases for Storybook.

  • Component Library: With the way Storybook works, we can maintain a component library by utilizing this process of having all components in our application in one location with the ability to test each state of the component.
  • **Design Systems:**A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. With storybook, this becomes easy to achieve you get a design system out of the box.
  • Visual Testing: With Storybook addons, we can integrate visual regression testing in order to test and keep your component library consistent no matter how big it is.
  • **Share across teams:**Storybook can be shared across teams because of the way it can be deployed as a static site functioning solely on its own. It can be shared amongst designers, project managers in a team to give feedback or comments on the current design of the components which improves collaboration within teams.
Writing Stories with Storybook

From the name Storybook what comes to mind when you hear stories is that a combination of stories forms a Storybook right? My thoughts exactly! A Storybook is a combination of different stories for different components. Stories are functions that return something that can be rendered to screen. A story can contain a single state of one component or can be seen as a visual representation of a component.

Building UI components with Storybook is a good choice what this means is you have all components in your application isolated whereby they function regardless of the connection between them and it becomes easy to test out UI components.

When building with Storybook there are several ways to structure and organize stories within your application.

  • Stories inside a component directory
.
 └── src/
  └── components/
   └── button
    └── button.js
    └── button.stories.js
  • Stories outside the src directory
.
 └── src
  └── components
   └── button.js
 └── stories
  └── button.stories.js
  • Stories sub-folder in a component directory
.
 └── src/
  └── components/
   └── button
    └── button.js
    └── stories
     └── button.stories.js

Following any of these methods is a matter of choice. It’s up to you to pick what works best for you or/and your team.

Integrating Addons

Addons are extra features that can be added to a storybook to make them more interactive and useful. With addons we have two ways of implementing them, One way is by using Decorators and another is by using Native Addons. A list of all addons curated by Storybook team can be found on this page.

Decorators: Decorators are wrapper components that wrap a story. An instance where decorators can be handy is when you need to center a story on the displayed screen. We can create a wrapper component and then use it within the story.

const styles = {
  textAlign: 'center',
};
const Center = ({ children }) => {children}
;
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Center from './center';
import Button from './button';

storiesOf('Button', module).add('with text', () => (
  
    Hello Button
  
));

Native Addons: Native addons use Storybook as a platform and interact with it. Native addons can add extra features beyond wrapping stories. An example is the storybook-action addon, this helps with logging the data received by event handlers in Storybook.

Deploying Storybook as a Static App

Storybook can be used alongside with the project we are developing because it gives a great developer experience with features, like hot reloading via Webpack HMR. But also we can extend this further by deploying the Storybook as a static site on its own. This will enable us to showcase our components to everyone and can even pass as a style guide for our application. To do this all you need to do is to configure your storybook using this script.

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

When you run yarn build-storybook this will build the storybook configured in the Storybook directory into a static web app and place it inside the directory called out and then you can proceed to deploy that directory using one of any of these services GitHub Pages, Netlify or Now, etc.

Integrating with Other Frameworks

Storybook supports almost all the frontend frameworks available and in order for you to integrate with either of these frameworks a guide has been written by the storybook team that you can follow to setup storybook for individual frameworks and they include:

Wrapping Up

Storybook works for a lot of use cases as we have seen and integrating it into our workflow will enable us to build comprehensive UI components for our applications in isolation. In this article, I’ve covered what Storybook is all about and when it is useful to take advantage of when building web applications.

React vs Angular vs Vue.js by Example

What is the best JavaScript framework, library that everybody is learning in 2019? React, Angular or Vue? Watch this video to find out.

With all of the various javascript *libraries *and frameworks, you might be a little bit confused as to where to begin. Right now, the three powerhouses in the javascript world are React, Angular and Vue.js.

Sometimes, the best course of action is to make up your own mind based on your own experiences.

And that's exactly what this course will aim to do. We're going to design and develop a single app in React, Angular and Vue.js.

The goal here is to help you determine which workflow you like best based on your own needs and preferences.

The following is the basic flow of what we're going to learn in React, Angular, and Vue.js:

  • Installing & Getting Started with a Project
  • Component Structure
  • Templating
  • Styling
  • Integrating CSS Frameworks
  • Working with API's

This will help you get a solid start with each of these javascript technologies, to the point at which you will walk away with your own opinions.

So, if you're ready to learn, let's get started!

What you’ll learn

  • Create a React App
  • Create an Angular App
  • Create a Vue.js App
  • Create an Adobe XD Prototype Mockup
  • Understand the core differences between React, Angular and Vue.js

Are there any course requirements or prerequisites?

  • HTML
  • CSS
  • Basic Javascript
  • Adobe XD (Experience Design) for Mockup Process (Optional)

Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

What are the differences? Do they each have specific use contexts?