Style Guide Driven Development

3 minutes lightning talk with Azizi the series

Transcript

1. Style-Guide Driven Development 3 mins @aziziyazit Lighting talk 2
2. Style-guide driven development 4 Phases Design Auditing Component Abstraction Publish into Storybook Integrated in Apps 1 2 3 4 Placeholder Button Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Header A Placeholder A Atoms Button Molecules Header Header A Placeholder Button Button Button Secondary Button
3. Style-guide driven development Design Auditing 1 Logout Logout Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Auditing Button Primary <a-button(click)=“click”> Button </a-button> Button Secondary Button Button
4. Style-guide driven development Component Abstraction 2 Logout Logout Logout Logout development
5. Style-guide driven development Publish to Storybook 3 Logout Logout deployment Button Primary <a-button(click)=“click”> Button </a-button> Button Secondary Button Button
6. Style-guide driven development Integrate to Apps 4 integration Button Primary <a-button(click)=“click”> Button </a-button> Button Secondary Button Button Button Button Button
7. Component architecture Atomic Design A Button Header Placeholder Header A Placeholder Button Atom Molecules Organisms Header A Placeholder Button