[Ng-keralam] Style Guide Driven Development

Style Guide Driven Development using Angular-Storybook

Transcript

1. Style-Guide Driven Development @aziziyazit
2. Test Driven Development Test Failed Dev Passed Codes & Unit Tests
3. Architects Software divided using domain as a boundaries Event Storming Dev Design Business Sales Context Support Context 1 1 Image is taken from https://martinfowler.com/tags/domaindrivendesign.html Domain Driven Development
4. Component & the guide to used it Component Dev Design 2 2 Image is taken from storybook.js.org Application Dev Style-Guide Driven Development Living Style Guide (LSG)
5. Style-Guide Driven Development If we look at the high level, SGDD is a practice many are already doing: developing components and documenting them in a style guide
6. Style-Guide Driven Development Discover 1 Component Abstraction 2 Implement & Documentation 3 4 Placeholder Button Header A Placeholder A Button Header Header A Placeholder Button Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Button Button Button Integrated in Apps What’s interesting about SGDD is that it both provides a playground and a framework for development, isolated from the application’s implementation. This isolation encourages creating components in an abstract way, making them more reusable.
7. 3 Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Implement & Documentation Component Abstraction 2 4 Placeholder A Button Header Header A Placeholder Button Button Button Button Integrated in Apps Discover 1 Placeholder Button Header A Requirements Designs Designer Design Audit Requirement Grooming Produce LSG
8. Discover 1 Placeholder Button Header A 3 Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Implement & Documentation 4 Button Button Button Integrated in Apps LSG Component Audit Component Abstraction 2 Placeholder A Button Header Header A Placeholder Button Audit results New Component? New Variant? develop based on audtit results Component Dev
9. Discover 1 Component Abstraction 2 4 Placeholder Button Header A Placeholder A Button Header Header A Placeholder Button Button Button Button Integrated in Apps 3 Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary At this stage, you got Components & the Style-Guide Implement & Documentation LSG
10. Component Abstraction 2 Placeholder A Button Header Header A Placeholder Button Discover 1 Placeholder Button Header A 3 Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Implement & Documentation 4 Button Button Button Integrated in Apps App Dev LSG component integration API integration API develop
11. Why SGDD matter App 60% 40%?
12. Any organization that designs a system will produce a design whose structure is a copy of the organization's communication structure. Conway Law
13. This is making sense by looking at the collaboration gap between designer and developer App 60% 40%?
14. The 'Inverse Conway Maneuver' recommends evolving your team and organizational structure to promote your desired architecture Designer Component Dev Application Dev Dev team Components & Living StyleGuide Layout & integrations
15. Bridging the gap between designer and developer empathy towards others all specs can be inspected App 100% LSG pixel perfect Component Dev Application Dev Designer Single source of truth
16. Benefits of adapting SGDD all specs can be inspected App 100% pixel perfect Cognitive load LSG Component Dev Designer Application Dev Separating responsibilities between Component Dev and App Dev
17. Button Button Header ID Password Header Header ID Password Header Button Button App 1 Living Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary v1 v2 App 2 App 1 App 2 Benefits of adapting SGDD
18. Benefits of adapting SGDD all specs can be inspected App 100% pixel perfect Application Dev Component Dev Designer LSG DevOps mindset & culture component button login page textfield base code & layout implement button & textfield API integration mainline branch by abstraction Continuous integration Continous feedback
19. Benefits of adapting SGDD Agile Scrum Ceremonies LSG Sprint 2 weeks Planning Development Daily Scrum Review LSG LSG Story point Story estimation Component Dev to update about component progress App LSG Component lib consumers DoD App LSG Product Owner
20. Benefits of adapting SGDD Stakeholders Product Owner LSG Designer LSG design develop publish testing & verify Testing platform Prototyping platform can be assembled together to build any number of applications
21. Discover 1 Placeholder Button Header A 3 Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Implement & Documentation 4 Button Button Button Integrated in Apps Component Abstraction 2 Placeholder A Button Header Header A Placeholder Button Benefits of adapting SGDD Component abstraction making code reusable, reusability makes scale possible
22. SGDD And Angular Workspace Projects component-lib style-guide application1 application2 dist component-lib use component source code in dev env use component compiled & optimized code in prod env Angular Monorepo
23. SGDD And Component-based framework Components are portions of reusable code within your system and they serve as the building blocks of your application’s interface. Components range in complexity. Reducing components to a single function like a button or dropdown increases flexibility, making them more reusable. Image is taken from https://www.bitovi.com/blog/style-guide-driven-development
24. SGDD And Angular Schematics Customising Angular projects to suit the particular needs of your own organisation Example organisation requirements: • All components must have Style Guide • All components must have adapt Atomic Design methodology • Component name is based on Atomic Type org schematics generate
25. Atomic Design 3 Image is taken from https://atomicdesign.bradfrost.com/ 3
26. SGDD And Angular Schematics $ ng generate sgdd:component ? what is the component name ? what is the component atomic type button > Atom Molecules Organism CREATED a-button.component.ts (1335 bytes) CREATED a-button.component.css (535 bytes) CREATED a-button.component.html (95 bytes) CREATED a-button.stories.ts (2390 bytes)
27. SGDD And Angular Builder Customise the Angular CLI by adding or modifying commands. For example, you could supply a builder to perform an entirely new task, or to change which third-party tool is used by an existing command. builder deploy
28. SGDD And Angular Builder $ ng deploy Build complete User verified Site ID confirmed deploying project from location ./storybook-static
29. Discover 1 Component Abstraction 2 Implement & Documentation 3 4 Placeholder Button Header A Placeholder A Button Header Header A Placeholder Button Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Button Button Button Integrated in Apps SGDD And builder schematics monorepo
30. Evolution of a Style Guide LSG Style-Guide Driven Development