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.

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?
19. Storybook Capabilities
20. Actions Show when user actions occur in the component
22. Knobs Allow user input in stories
24. More Addons
25. Design Development Product / QA Review
27. Design Development Product / QA Review
28. Development Teams - Documentation
29. Design Development Product / QA Review
30. Product Team Review
33. Repo: https://github.com/ksivamuthu/ng-storybook-demo
34. Thank you Sivamuthu Kumar ksivamuthu