1 of 24

Kai Röder

Working for AEB

maintainer

@kairoeder

kroeder

2 of 24

The Benefits of a Design System

​

How Storybook can improve your daily work

3 of 24

  • Who has ever made a form?�
  • Who made a multi-step form?�
  • Who had some difficulty developing a component that was buried deep in their app?

​

Before we start, a couple of questions…

4 of 24

  • Who has ever made a form? I did�
  • Who made a multi-step form? I did�
  • Who had some difficulty developing a component that was buried deep in their app? I had

​

Before we start, a couple of questions…

5 of 24

Component development is complicated

6 of 24

  • A component might depend on a particular (server) state�Show a <vip-offer> component only to VIP users�
  • A component might only appear for a short amount of time�Show an info message popup after submitting a form�
  • A component might be hard to get to�A component that is used on step 3 in a form requiring you to fill out the first two steps

​

Component development is complicated

7 of 24

How can we solve this problem?

8 of 24

Isolated Component Development

Develop your components in a distraction-free environment

9 of 24

  • State can be mocked�Test your components in all different states in one place�
  • Focus on the component API�No other components are involved�
  • Put them together�Build a component library and raise awareness of existing components

​

Developing in isolation means

10 of 24

You need an application that renders your components

​

This includes

  • Handling routing
  • Creating a layout
  • Maintenance effort for new components is huge

​

Downsides of an isolated environment

11 of 24

12 of 24

Storybook lives alongside your app

13 of 24

Setup Storybook in just a few steps

​

14 of 24

Component stories

Storybook addons

Story canvas

https://storybookjs-next.now.sh/angular-cli

Additional notes

15 of 24

Personalize Storybook with official and community addons

16 of 24

Storybook configuration

17 of 24

Writing stories

18 of 24

Writing stories

19 of 24

Writing stories

storiesOf API

  • Standard story API until 2019�
  • Stories can reference components or ship their own template�
  • storiesOf is still supported but the recommended story format is the “Component Story Format” (CSF)

20 of 24

Writing stories

Component Story Format (CSF)

  • default export describes your stories and dependencies�
  • Property names are the title of a story but can be overwritten�
  • CSF enables third-party tools to use your stories�
  • Re-use stories in test files

21 of 24

Summary

  • Component development is complicated
    • Infrastructure, State, Business-logic and more are things that might hold you back from doing your task�
  • Isolated Component Development
    • It helps you to focus on one particular component and its inputs and outputs
    • It takes away the need of infrastructure and lets you develop components outside your real application
    • You still need an application that renders your isolated components�
  • Storybook lives besides your application
    • It helps you developing independently without the need of an actual application
    • API documentation or design system: It’s up to you how far you want to push your documentation

22 of 24

Storybook guides at learnstorybook.com

23 of 24

You can find all links and resources at storybook.js.org

Community

github.com/storybookjs/storybook

Storybook discord

Get updates on medium.com/storybookjs

@storybookjs

24 of 24

Let’s have a drink!

​

@kairoeder

kroeder

🍻