Download as PDF, PPTX
More Related Content
Similar to The ABC of Coded Style Guides
![[Web开发Css系列].Apress.Pro.Css.Techniques.Nov.2006](https://cdn.slidesharecdn.com/ss_thumbnails/webcssapressprocsstechniquesnov2006-124531316749-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
The ABC of Coded Style Guides
- 1. The ABC of CodedStyle 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.
- 5. More productive teamwork Calmercommunication More organized team knowledge Twist
- 6. Reactist ‣ React ComponentLibrary ‣ Used in Todoist and Twist ‣ Open Source
- 7. Avatar Name Level Experience Bar SidewaysScrolling Content Badge Activity
- 8. What is aCoded Style Guide? ‣ Directory of your components in different states ‣ Components rendered in isolation ‣ Components built in isolation ‣ Live documentation
- 9. Advantages ‣ Encourage reuseand raising awareness ‣ Higher stability and lower maintenance ‣ Coherent branding ‣ Testing and documentation
- 10.
- 11. Agenda 1. Roll yourown 2. Styleguidist 3. Storybook
- 12.
- 13. Roll Your Own ‣Main Goal: Add value for your users ‣ Stand on the shoulders of giants ‣ (Development) resources are scarce
- 14. Styleguidist ‣ Supports: Vueand React ‣ Markdown description of components ‣ Uses your jsdoc and prop types ‣ Zero config for CRA ‣ Otherwise webpack and custom config file
- 20. Styleguidist ‣ (+) Livecode 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 ‣ (+) Easierto demo complex (legacy) components ‣ (+) Test data can be reused ‣ (-) Styling is way less flexible ‣ (-) Creating a documentation is harder
- 27.
- 28. Other solutions ‣ SketchDesign Libraries ‣ react-cosmos: showcasing more complex states ‣ … many more
- 29. Pitfalls or: Learn fromour 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 strategyand goal Key Takeaway
- 31. Key Takeaway Share bydeploying
- 32.
- 33. The ABC of CodedStyle 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