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
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)
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
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
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.
Discover 1 Placeholder Button Header A 3 Button Button Primary
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
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
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
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
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
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
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
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
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
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)
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
aziziyazit
yasulab
komagata
tamai_63
amarelo_n24
toksato
kfujita
kaityo256
fast_doctor
matleenalaakso
cbtlibrary
tkimura12
shlominoach
morganepeng
carmenintech
chrislema
davidbonilla
mongodb
bkeepers
tammielis
keithpitt
swwweet
schacon
rmw