Teams today are facing similar problems: How do we encourage the reuse of existing components? How do we raise awareness for them? How do we keep them stable while keeping maintenance efforts low? How do we ensure a coherent branding without exploiting our designers? If you are worried by these questions fear no longer. I aim to show you a way out of this self-made jungle into a brighter world of coded style guides. We will explore together how we can tear down walls between design and development and how everyone can benefit from introducing living component directories into their project.

1. The ABC of
Coded Style Guides
Henning Muszynski
@henningmus · Doist

2. “Let’s style this <span> like the button we have
over there”
—
and other great ideas you might have had

3. Hi, I’m Henning !
‣ Living in Hamburg, Germany
‣ Studied Business IT &
Computer Science
‣ Software Engineer at Doist

4. Twist
Todoist

5. More productive teamwork
Calmer communication
More organized team knowledge
Twist

6. Reactist
‣ React Component Library
‣ Used in Todoist and Twist
‣ Open Source

7. Avatar
Name
Level Experience Bar
Sideways Scrolling Content
Badge
Activity

8. What is a Coded Style Guide?
‣ Directory of your components in different states
‣ Components rendered in isolation
‣ Components built in isolation
‣ Live documentation

9. Advantages
‣ Encourage reuse and raising awareness
‣ Higher stability and lower maintenance
‣ Coherent branding
‣ Testing and documentation

10. Solution Characteristics
Workshop Storefront
Develop
Design
Document
Test

11. Agenda
1. Roll your own
2. Styleguidist
3. Storybook

12. Roll Your Own
Don’t

13. Roll Your Own
‣ Main Goal: Add value for your users
‣ Stand on the shoulders of giants
‣ (Development) resources are scarce

14. Styleguidist
‣ Supports: Vue and React
‣ Markdown description of components
‣ Uses your jsdoc and prop types
‣ Zero config for CRA
‣ Otherwise webpack and custom config file

20. Styleguidist
‣ (+) Live code editor for every example
‣ (+) Completely customizable styles
‣ Default already beautiful
‣ (-) Markdown sometimes requires some hacking or
intermediate components

21. Storybook
‣ Supports: React, React Native, Vue and Angular, …
‣ Stories are just Javascript™
‣ Extensible via (a lot of) addons
‣ Zero config (webpack based)

25. Storybook & Testing
‣ Same data used for rendering & testing
‣ Automated (visual) snapshots
‣ Viewing test results in stories
‣ Manual checking more affordable (through isolation)

26. Storybook
‣ (+) Easier to demo complex (legacy) components
‣ (+) Test data can be reused
‣ (-) Styling is way less flexible
‣ (-) Creating a documentation is harder

27. Workshop Storefront
Storybook Styleguidist

28. Other solutions
‣ Sketch Design Libraries
‣ react-cosmos: showcasing more complex states
‣ … many more

29. Pitfalls
or: Learn from our learnings
‣ Start with “easy” components for quick wins
‣ Don’t try to do everything at once
‣ Encourage contribution & make part of reviews

30. Define a strategy and goal
Key Takeaway

31. Key Takeaway
Share by deploying

32. Key Takeaway
Don’t overengineer

33. The ABC of
Coded Style Guides
Henning Muszynski
@henningmus · Doist

34. Resources
Blogs / Articles / Talks
- https://github.com/SaraVieira/styleguide-driven-development
- https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06
- https://spin.atomicobject.com/2018/01/24/react-storybook/
- http://bradfrost.com/blog/post/the-workshop-and-the-storefront/
- https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07
Storybook
- https://storybook.js.org/basics/quick-start-guide/
- https://github.com/storybooks/storybook
- https://storybook.js.org/examples/
Styleguidist
- https://github.com/styleguidist/react-styleguidist
- https://react-styleguidist.js.org/docs/getting-started.html
Others
- https://medium.com/@skidding/fighting-for-component-independence-2a762ee53272
- https://github.com/react-cosmos/react-cosmos