Storybook: dev, design, debug and document your UI components

Transcript

1. September 2017 Storybook: Design, Develop, Document and Debug your React UI components Marie-Laure Thuret
2. Thanks to our sponsors!
3. MARIE-LAURE THURET Developer at @mlthuret
4. @mlthuret A UI component often relies on several states
5. @mlthuret A simple pagination component
6. @mlthuret currentPage pagePadding showNext showPrevious showLast numberOfPages showFirst A simple pagination component
7. @mlthuret expect buttons to be disabled currentPage = 1 currentPage = 6 and nbPages = 6 A simple pagination component
8. @mlthuret How do we make sure they are ? well documented
9. @mlthuret isolated environment to quickly develop and design your components thanks to hot reloading
10. @mlthuret Muhammed Thanish https://github.com/storybooks/ Arunoda Susiripala
11. @mlthuret Introducing a new maintainers team
12. @mlthuret Design Develop Document Debug Discuss Development Lifecycle
13. @mlthuret Getting Started Easy to install Ready for iterating quickly $getStorybook
14. @mlthuret Storybook interface
15. @mlthuret List of the stories Storybook interface
16. @mlthuret Storybook interface Stories kind List of the stories
17. @mlthuret Stories Stories kind List of the stories Storybook interface
18. @mlthuret Actions and add- on panels Storybook interface
19. @mlthuret Component view Storybook interface
20. @mlthuret Demo
21. @mlthuret API First
22. @mlthuret Create live documentation
23. @mlthuret Create live documentation Document style and behaviour
24. @mlthuret How can I use a component? Create live documentation
25. @mlthuret Examples
26. @mlthuret How do we make sure the documentation ? never breaks
27. @mlthuret We need to add tests
28. @mlthuret Testing markup through snapshot testing Storyshots
29. @mlthuret Tests are your application’s specifications
30. @mlthuret Explicit behaviour by adding tests next to your stories Specs add-on
31. @mlthuret Tests are failing if differences are spotted between two components pictures Visual regression testing
32. @mlthuret Visual regression testing
33. @mlthuret Visual regression testing
34. @mlthuret Demo
35. @mlthuret what about maintenance ?
36. @mlthuret Debug and enhance Small environment to debug efficiently Entry point to start when adding a new feature
37. @mlthuret Communicate with others
38. @mlthuret Communicate with others When submitting a Pull Request
39. @mlthuret When opening issues Communicate with others
40. @mlthuret When an external contributor fixes a bug Communicate with others
41. @mlthuret Design Develop Document Debug Discuss Iterate quickly Live documentation Add specifications through tests Create a styleguide Share stories Entry points Isolated environment Hot reloading Expose props Isolate bugs Storybook contribution during the developer journey
42. @mlthuret Why adopt Storybook ?
43. @mlthuret Universal Storybook
44. @mlthuret Universal Storybook ReactJS React Native VueJS Angular
45. @mlthuret Demo
46. @mlthuret It’s up to you to create what’s missing The add-on API
47. @mlthuret Add-ons from the community And a lot of others… Material-UI Readme Background Internationalisation Specs
48. @mlthuret Roadmap Playground add-on Theming ability Add-on API refactoring See multiple stories in 1 preview Responsive and multi-device viewports preview Automatic story detection
49. Thanks! MARIE-LAURE THURET Developer at @mlthuret