Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Style Guide Driven Development with Angular & Storybook July 15, 2020
Slide 2
Slide 2 text
Sivamuthu Kumar Software Architect, Computer Enterprise Inc, Cloud, Mobile, IoT, ML Orlando, FL ksivamuthu ksivamuthu ksivamuthu
Slide 3
Slide 3 text
Let’s start
Slide 4
Slide 4 text
The Magic Organization This Photo by Unknown Author is licensed under CC BY-SA
Slide 5
Slide 5 text
100s of applications
Slide 6
Slide 6 text
Unique Visual Style
Slide 7
Slide 7 text
Shared Components
Slide 8
Slide 8 text
Living Style / Component Guide
Slide 9
Slide 9 text
Design Development Product / QA Review
Slide 10
Slide 10 text
DESIGN THAT’S SOMEONE ELSE JOB
Slide 11
Slide 11 text
DEVELOPMENT TRANSLATE TO HTML (CODE)
Slide 12
Slide 12 text
MORE DEVELOPMENT TEAMS REINVENTING THE WHEEL
Slide 13
Slide 13 text
PRODUCT TEAM REVIEW DESIGN AND PRODUCT
Slide 14
Slide 14 text
How do we bridge the gap?
Slide 15
Slide 15 text
Style Guide Driven Development DISCOVER APP FEATURES ABSTRACT INTO COMPONENTS IMPLEMENT & DOCUMENT PLUG & PLAY COMPONENT
Slide 16
Slide 16 text
Storybook
Slide 17
Slide 17 text
What is Storybook? Why Storybook? What does it resolve? How it does?
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Storybook Capabilities
Slide 20
Slide 20 text
Actions Show when user actions occur in the component
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Knobs Allow user input in stories
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
More Addons
Slide 25
Slide 25 text
Design Development Product / QA Review
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Design Development Product / QA Review
Slide 28
Slide 28 text
Development Teams - Documentation
Slide 29
Slide 29 text
Design Development Product / QA Review
Slide 30
Slide 30 text
Product Team Review
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Repo: https://github.com/ksivamuthu/ng-storybook-demo
Slide 34
Slide 34 text
Thank you Sivamuthu Kumar ksivamuthu