-

1. The ABC of
Coded Style Guides
Henning Muszynski
OdessaJS’2018
@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

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

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

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

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

25. 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

26. Define a strategy and goal
Key Takeaway

27. Key Takeaway
Share by deploying

28. Key Takeaway
Don’t overengineer

29. The ABC of
Coded Style Guides
Henning Muszynski
OdessaJS’2018
@henningmus · Doist

30. 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