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

Style Guide Driven Development with Angular & Storybook

Style Guide Driven Development with Angular & Storybook

Repo: https://github.com/ksivamuthu/ng-storybook-demo

The gap between the design and the developers' world is real. Teams are solving this problem with the style guide/design system built or exported from design systems. The style guide behavior is different from the actual components developed in Angular and duplicate the efforts and becomes tough to maintain the living style guide. Creating a reusable, testable shared component development is more challenging, especially when the 100s of angular apps developed across the teams are using the shared components.

Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases. In this session, let us discuss the use cases of developing components in isolation and supercharge your workflows with different storybook addons and testing the interactions of components. And also, this session explains in detail how the living style guide documentation prepared for shared angular components created and used across the enterprise teams with the demo.

Sivamuthu Kumar

July 15, 2020
Tweet

More Decks by Sivamuthu Kumar

Other Decks in Technology

Transcript

  1. Style Guide Driven
    Development with
    Angular & Storybook
    July 15, 2020

    View Slide

  2. Sivamuthu Kumar
    Software Architect, Computer Enterprise Inc,
    Cloud, Mobile, IoT, ML
    Orlando, FL
    ksivamuthu ksivamuthu ksivamuthu

    View Slide

  3. Let’s start

    View Slide

  4. The Magic
    Organization
    This Photo by Unknown Author is licensed under CC BY-SA

    View Slide

  5. 100s of
    applications

    View Slide

  6. Unique
    Visual Style

    View Slide

  7. Shared
    Components

    View Slide

  8. Living
    Style / Component
    Guide

    View Slide

  9. Design Development Product / QA Review

    View Slide

  10. DESIGN
    THAT’S SOMEONE ELSE JOB

    View Slide

  11. DEVELOPMENT
    TRANSLATE TO HTML (CODE)

    View Slide

  12. MORE DEVELOPMENT TEAMS
    REINVENTING THE WHEEL

    View Slide

  13. PRODUCT TEAM
    REVIEW DESIGN AND PRODUCT

    View Slide

  14. How do we
    bridge the gap?

    View Slide

  15. Style Guide Driven Development
    DISCOVER APP
    FEATURES
    ABSTRACT INTO
    COMPONENTS
    IMPLEMENT &
    DOCUMENT
    PLUG & PLAY
    COMPONENT

    View Slide

  16. Storybook

    View Slide

  17. What is Storybook?
    Why Storybook?
    What does it resolve?
    How it does?

    View Slide

  18. View Slide

  19. Storybook
    Capabilities

    View Slide

  20. Actions
    Show when user actions occur in the component

    View Slide

  21. View Slide

  22. Knobs
    Allow user input in stories

    View Slide

  23. View Slide

  24. More Addons

    View Slide

  25. Design Development Product / QA Review

    View Slide

  26. View Slide

  27. Design Development Product / QA Review

    View Slide

  28. Development Teams
    - Documentation

    View Slide

  29. Design Development Product / QA Review

    View Slide

  30. Product Team
    Review

    View Slide

  31. View Slide

  32. View Slide

  33. Repo:
    https://github.com/ksivamuthu/ng-storybook-demo

    View Slide

  34. Thank you
    Sivamuthu Kumar
    ksivamuthu

    View Slide