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.

F90901a95c7fbb99b541e8189838cf43?s=128

Sivamuthu Kumar

July 15, 2020
Tweet

Transcript

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

    2020
  2. Sivamuthu Kumar Software Architect, Computer Enterprise Inc, Cloud, Mobile, IoT,

    ML Orlando, FL ksivamuthu ksivamuthu ksivamuthu
  3. Let’s start

  4. The Magic Organization This Photo by Unknown Author is licensed

    under CC BY-SA
  5. 100s of applications

  6. Unique Visual Style

  7. Shared Components

  8. Living Style / Component Guide

  9. Design Development Product / QA Review

  10. DESIGN THAT’S SOMEONE ELSE JOB

  11. DEVELOPMENT TRANSLATE TO HTML (CODE)

  12. MORE DEVELOPMENT TEAMS REINVENTING THE WHEEL

  13. PRODUCT TEAM REVIEW DESIGN AND PRODUCT

  14. How do we bridge the gap?

  15. Style Guide Driven Development DISCOVER APP FEATURES ABSTRACT INTO COMPONENTS

    IMPLEMENT & DOCUMENT PLUG & PLAY COMPONENT
  16. Storybook

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

    it does?
  18. None
  19. Storybook Capabilities

  20. Actions Show when user actions occur in the component

  21. None
  22. Knobs Allow user input in stories

  23. None
  24. More Addons

  25. Design Development Product / QA Review

  26. None
  27. Design Development Product / QA Review

  28. Development Teams - Documentation

  29. Design Development Product / QA Review

  30. Product Team Review

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

  34. Thank you Sivamuthu Kumar ksivamuthu