Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Marie-Laure Thuret

September 29, 2017
Tweet

More Decks by Marie-Laure Thuret

Other Decks in Programming

Transcript

  1. September 2017
    Storybook:

    Design, Develop, Document and Debug your React UI
    components
    Marie-Laure Thuret

    View Slide

  2. Thanks to our sponsors!

    View Slide

  3. MARIE-LAURE THURET
    Developer at
    @mlthuret

    View Slide

  4. @mlthuret
    A UI component often relies
    on several states

    View Slide

  5. @mlthuret
    A simple pagination component

    View Slide

  6. @mlthuret
    currentPage
    pagePadding
    showNext
    showPrevious
    showLast
    numberOfPages
    showFirst
    A simple pagination component

    View Slide

  7. @mlthuret
    expect buttons to be disabled
    currentPage = 1 currentPage = 6 and nbPages = 6
    A simple pagination component

    View Slide

  8. @mlthuret
    How do we make sure
    they are
    ?
    well documented

    View Slide

  9. @mlthuret
    isolated environment to quickly develop and design
    your components thanks to hot reloading

    View Slide

  10. @mlthuret
    Muhammed Thanish
    https://github.com/storybooks/
    Arunoda Susiripala

    View Slide

  11. @mlthuret
    Introducing a new maintainers team

    View Slide

  12. @mlthuret
    Design
    Develop Document
    Debug
    Discuss
    Development Lifecycle

    View Slide

  13. @mlthuret
    Getting Started
    Easy to install
    Ready for iterating
    quickly
    $getStorybook

    View Slide

  14. @mlthuret
    Storybook interface

    View Slide

  15. @mlthuret
    List of
    the
    stories
    Storybook interface

    View Slide

  16. @mlthuret
    Storybook interface
    Stories
    kind
    List of
    the
    stories

    View Slide

  17. @mlthuret
    Stories
    Stories
    kind
    List of
    the
    stories
    Storybook interface

    View Slide

  18. @mlthuret
    Actions
    and add-
    on
    panels
    Storybook interface

    View Slide

  19. @mlthuret
    Component
    view
    Storybook interface

    View Slide

  20. @mlthuret
    Demo

    View Slide

  21. @mlthuret
    API
    First

    View Slide

  22. @mlthuret
    Create
    live
    documentation

    View Slide

  23. @mlthuret
    Create live documentation
    Document style
    and behaviour

    View Slide

  24. @mlthuret
    How can I use a
    component?
    Create live documentation

    View Slide

  25. @mlthuret
    Examples

    View Slide

  26. @mlthuret
    How do we make sure
    the documentation
    ?
    never breaks

    View Slide

  27. @mlthuret
    We need to
    add tests

    View Slide

  28. @mlthuret
    Testing markup through
    snapshot testing
    Storyshots

    View Slide

  29. @mlthuret
    Tests are your application’s
    specifications

    View Slide

  30. @mlthuret
    Explicit behaviour by adding tests next to
    your stories
    Specs add-on

    View Slide

  31. @mlthuret
    Tests are failing if differences are spotted
    between two components pictures
    Visual regression testing

    View Slide

  32. @mlthuret
    Visual regression testing

    View Slide

  33. @mlthuret
    Visual regression testing

    View Slide

  34. @mlthuret
    Demo

    View Slide

  35. @mlthuret
    what about
    maintenance
    ?

    View Slide

  36. @mlthuret
    Debug and enhance
    Small environment to debug efficiently
    Entry point to start when adding a
    new feature

    View Slide

  37. @mlthuret
    Communicate with
    others

    View Slide

  38. @mlthuret
    Communicate with others
    When
    submitting a
    Pull Request

    View Slide

  39. @mlthuret
    When
    opening
    issues
    Communicate with others

    View Slide

  40. @mlthuret
    When an
    external
    contributor fixes
    a bug
    Communicate with others

    View Slide

  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

    View Slide

  42. @mlthuret
    Why
    adopt
    Storybook
    ?

    View Slide

  43. @mlthuret
    Universal
    Storybook

    View Slide

  44. @mlthuret
    Universal Storybook
    ReactJS React Native VueJS Angular

    View Slide

  45. @mlthuret
    Demo

    View Slide

  46. @mlthuret
    It’s up to
    you to
    create
    what’s
    missing
    The add-on API

    View Slide

  47. @mlthuret
    Add-ons from the community
    And a lot of others…
    Material-UI
    Readme
    Background
    Internationalisation
    Specs

    View Slide

  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

    View Slide

  49. Thanks!
    MARIE-LAURE THURET
    Developer at
    @mlthuret

    View Slide