Storybook Talk / Live Coding

Last week, I gave a talk on Storybook at a The Collab Lab meetup.

Nick Taylor (he/him)

@nickytonline

I had a lot of fun giving my talk on @storybookj…


This content originally appeared on DEV Community and was authored by DEV Community

Last week, I gave a talk on Storybook at a The Collab Lab meetup.

What is Storybook?

Think of it as a workbench for building out components that your application consumes without the burden of running your application. It is also living interactive documentation for your entire team/consumers of components.

Describing building components in Storybook vs. your applciation

By building out your components in isolation, it forces you (in a good way) to really think about how you are building your component. Building things in Storybook will potentially (hopefully) help you avoid tightly coupling things together.

For example, at Forem, we use Elastic Search for search results including the list of users returned in the mention autocomplete component below.

The Forem mention autocomplete component in action in Forem's Storybook

This component knows nothing about Elastic Search. All it knows is that it gets a list of users from a function prop called fetchSuggestions and renders them. In Storybook, we mock that prop by creating a function that returns some mocked data.

A Storybook story is view of a component in a certain state. A component can have many stories. Here we show a button component with different variants.

Different views of a button component in different states in Storybook

Storybook was originally built for React only but has since evolved to support most of today’s popular frameworks like Vue, Angular, and Svelte etc.

There's more, including incorporating Storybook into a The Collab Lab project, so check out the full talk and slide deck.

If you aren't already, give The Collab Lab a follow on DEV!

.ltag__user__id__1697 .follow-action-button { background-color: #FFFFFF !important; color: #000000 !important; border-color: #000000 !important; }
the-collab-lab image

The Collab Lab

The Collab Lab is collaborative, remote project practice for early-career developers. We’re volunteer-driven and free for participants.


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2021-03-16T03:43:46+00:00) Storybook Talk / Live Coding. Retrieved from https://www.scien.cx/2021/03/16/storybook-talk-live-coding/

MLA
" » Storybook Talk / Live Coding." DEV Community | Sciencx - Tuesday March 16, 2021, https://www.scien.cx/2021/03/16/storybook-talk-live-coding/
HARVARD
DEV Community | Sciencx Tuesday March 16, 2021 » Storybook Talk / Live Coding., viewed ,<https://www.scien.cx/2021/03/16/storybook-talk-live-coding/>
VANCOUVER
DEV Community | Sciencx - » Storybook Talk / Live Coding. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/16/storybook-talk-live-coding/
CHICAGO
" » Storybook Talk / Live Coding." DEV Community | Sciencx - Accessed . https://www.scien.cx/2021/03/16/storybook-talk-live-coding/
IEEE
" » Storybook Talk / Live Coding." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2021/03/16/storybook-talk-live-coding/. [Accessed: ]
rf:citation
» Storybook Talk / Live Coding | DEV Community | Sciencx | https://www.scien.cx/2021/03/16/storybook-talk-live-coding/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts