Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Ng-keralam] Style Guide Driven Development

861e71f9f52486eb8bba75261a923004?s=47 Azizi Yazit
January 27, 2022

[Ng-keralam] Style Guide Driven Development

Style Guide Driven Development using Angular-Storybook

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

January 27, 2022
Tweet

More Decks by Azizi Yazit

Other Decks in Education

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