Storybook Driven Development (SDD) - it’s the future of Front end development!

I recently started working for as a Front end engineer on the Prototyping and Innovation team. The team is very cross functional we work with user experience design (UX), design, research, and engineering teams. We build front end prototypes for all sorts of things ranging from bots to web and native apps. Since my arrival on May 10th 2017 I believe we’ve built at least 5 different prototypes. Our teams tools of choice for front end prototyping are: React w/ Styled-components.

In the process of jumping into coding you need to understand what already exist in your codebase. How do you do this without spinning up your app and crawling each page? One of the ways you can keep yourself from rewriting UI that already exists is to duhh know what exist already or go through your app and figure it out. I believe there is defiantly a better way to know what already exist in your app.

Intro “Strorybook driven development (SDD)” through use of Storybook.

Storybook in my opinion is the best way to test your UI in isolation from the rest of your app. Check it out here

The idea of SDD is very similar to Test driven development (TDD). SDD just like TDD, aims for you to only write UI that is proven to be needed by your requirements and to always write stories first. There are a ton of benefits that come from developing a stories before writing UI. Here are a few:

  • Living playground to test and iterate on your components isolated from the rest of your app
  • The clutter of your app disappears and you can really focus in on individual components
  • Designers can test components as you publish them to your storybook
  • etc.

Diving into SDD

The easiest way to jump into story driven development is to simply run

yarn global add @storybook/cli
cd my-react-app

and start building some stories! The best way to make sure your team actually writes stories is to automatically generate them. My team developed a simple template script that spits out a component, and a story for that component. Our script then recompiles the index components to ensure your component list matches your existing components structure.