Skip to content

Instantly share code, notes, and snippets.

@yannbf

yannbf/course-outilne.md

Last active May 18, 2020 09:27
Show Gist options
  • Save yannbf/207cbeceaf2fa01a98920f8f7d541def to your computer and use it in GitHub Desktop.
Save yannbf/207cbeceaf2fa01a98920f8f7d541def to your computer and use it in GitHub Desktop.
Download ZIP
Course outline
Raw
course-outilne.md

STORYBOOK COURSE

Course length: Around 4h

Course purpose: Introduce the advantages of using storybook in app development and break the concept that Storybook is only good for component libraries

Target audience: All levels of developers

PART 1 - Storytelling (10min)

  • Tell a story about app development and the pain that us devs usually face:

    1 - Takes time to setup the development environment

    2 - Maybe needs to spin up docker containers, services, maybe compilation takes long time in a monorepo, etc.

    3 - Feature might be hard to reach (e.g. component in checkout/payment flow)

    4 - Once PR is made and stakeholders give feedback the pain repeats

PRE-PART 2 - Prepare grounds to introduce Storybook (5-10min)

  • Before people used to handle templates like with jQuery or ruby on rails- But now the world of development has changed, most projects now have a componentized view layer
  • We deal with a lot of reusability, props and other concepts, stuff we were not used to before.
  • With that, component driven design arises. CDD: primitives -> composite -> screens
  • CDD is where Storybook comes to play

PART 2 - Introduce Storybook (10-20min)

  • Nice visualization with graphics and metaphors
  • Show how lighter and faster it is to develop on it
  • Show where Storybook lives (on the side of the application)
  • Mention hot-reloading dev environment, addons for testing, deploy previews, responsive UI
  • Mention use cases where Storybook fits into (component library, design systems, style guides, app development)

PART 3 - Showcase a great example of storybook in a real life scenario (3-5min)

PART 3 - Show example application, medium complexity (30min)

  • Install Storybook in the application
  • Make a simple story
  • Make a decorator (like for styled components)
  • Add an addon (maybe docs/a11y/toolbar)

PART 4 - Retrofitting Storybook in existing application (2h)

  • Now that they are familiar with the basics of Storybook, extract components from that application into stories
  • Explain the gains that we now have with that + addons

PART 5 - Go through before/after Storybook (5min)

  • Summarize pain points before and how much better it is now

PART 6 - Extra resources (10min)

  • Addon gallery
  • Community
  • Storybook pages (docs, learn storybook, etc)
  • Chromatic

PART 7 - Go through Chromatic (15min) (can be a bonus session)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment