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