Monday, October 19, 2020

Storybook JS discovery/outline

 

Before starting to work with Storybook, make sure your site/project really needs it. I highly recommend this talk from Laura Elizabeth: https://vimeo.com/214120678

That being said, let’s get started :) 

Storybook should help your project with testing, documentation, and knowledge-sharing (keeping all your knowledge in a central/accessible place).

Storybook is good at a lot of things: a component explorer, style guide, documentation site, playground (i.e. you can try all the states without having to trigger them in the app each time), sandbox, and UI library.

This gives the following advantages:

  • great for QA 
  • great for stress testing all elements/components (for building bulletproof UI components)
  • teammates can review UI without touching code or maintaining a local dev environment.
  • making the on-boarding process easier for new developers, designers and teams = time saved
  • adds an extra layer of security/reassurance for current or future company stakeholders (anyone that looks at the Storybook app can get a bird’s eye view of what we have already created)

Isolated environment


Storybook runs completely independently of your app/project. When doing local development, you can run Storybook on its own port in your localhost.

Storybook add-ons that can help your projects greatly


There's a great add on that allows you to edit props dynamically using the Storybook UI
https://github.com/storybookjs/storybook/tree/master/addons/knobs#storybook-addon-knobs

For testing responsiveness, there's a handy tool called "Viewport" which allows you to view your components in various screen sizes and layouts:

https://github.com/storybookjs/storybook/tree/master/addons/viewport#storybook-viewport-addon


QA: Visual regression tests


Many teams automate Storybook visual review with visual regression tests. This testing methodology takes screenshots of each component every commit and compares them to detect changes.
Squarespace has multiple Storybooks. Visual regression testing each Storybook helps us automatically catch UI bugs.
–Daniel Duan, Software Engineer, Squarespace

QA: Accessibility audits


There are lots more useful add-ons, for example there's one that does an accessibility audit on each of your examples and displays the results in Storybook. It can check for things like having an adequate color contrast ratio or using appropriate aria roles and labels:

https://github.com/storybookjs/storybook/tree/master/addons/a11y#storybook-addon-a11y


Improved code quality


As you write your components in isolation, without regards to business logic, your can potentially put a greater emphasis on code quality and reusability, which can have a positive impact on the team.

Additional advantages


Increased chance of catching all edge cases


We can render components in states that can’t always be easily triggered in the app, improving testing for edge cases.

Smart debugging


Since all states can be viewed easily, it’s much easier to notice how changes to the appearance and behavior of one state can influence others, improving the prevention of UI bugs and regressions.

Better documentation


With Storybook addons, you can document your entire component library as you go and save use cases as “stories” in JavaScript
Posted by at
Labels: , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)