Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart

Slide 1

Slide 1 text

Strategic Design (DDD) for the Frontend ANGULARarchitects.io

Slide 2

Slide 2 text

Good Fences Make Good Neighbors!

Slide 3

Slide 3 text

Vertical Architectures Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Conway's law Minimize Cognitive Load!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

5 Questions

Slide 6

Slide 6 text

6 • How large should a vertical be? • How to find good verticals? • How to evaluate my current solution? • How to implement verticals? Agenda

Slide 7

Slide 7 text

About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer

Slide 8

Slide 8 text

8 How Large Should a Vertical be?

Slide 9

Slide 9 text

Forces Influencing Desirable Size Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Minimum Size: Correlating Features Maximum Size: Single Team

Slide 10

Slide 10 text

10 How to Find Good Verticals?

Slide 11

Slide 11 text

@ManfredSteyer Align Software with (Business) Domain!

Slide 12

Slide 12 text

@ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices

Slide 13

Slide 13 text

@ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices

Slide 14

Slide 14 text

@ManfredSteyer Example Flight System

Slide 15

Slide 15 text

@ManfredSteyer Booking Check-in Boarding Luggage Example Sub-Domains

Slide 16

Slide 16 text

@ManfredSteyer Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage Finding Sub-Domains

Slide 17

Slide 17 text

@ManfredSteyer Event Storming

Slide 18

Slide 18 text

@ManfredSteyer Booking Boarding Bounded Context as „Linguistic Boundary“ Ubiquitous Language Flight Price Seats Passenger Tickets Flight Ticket

Slide 19

Slide 19 text

@ManfredSteyer Linguistic Boundaries in BE & FE Frontend Backend

Slide 20

Slide 20 text

@ManfredSteyer Linguistic Boundaries in BE & FE Frontend Backend

Slide 21

Slide 21 text

@ManfredSteyer BFF as a Technical Solution Frontend Backend BFF BFF BFF

Slide 22

Slide 22 text

@ManfredSteyer Another Perspective: Team Topologies 4 Fundamental Team Topologies 3 Interaction Modes

Slide 23

Slide 23 text

@ManfredSteyer Taken from: Team Topologies, Skelton, Pais, 2019 Flow

Slide 24

Slide 24 text

@ManfredSteyer Align Software with (business) domain! Cognitive Load

Slide 25

Slide 25 text

@ManfredSteyer 28 • Business Domain (most common one!) • Regulatory Compliance • Change Cadence • Team Location • Risk • Performance Isolation • Technology • User Personas Fracture Planes

Slide 26

Slide 26 text

@ManfredSteyer 29 Evaluating the Current State

Slide 27

Slide 27 text

@ManfredSteyer Forensic Analysis Source Code History History History Forensic Analysis „Hidden“ Patterns e.g., Git History

Slide 28

Slide 28 text

@ManfredSteyer

Slide 29

Slide 29 text

@ManfredSteyer 32 DEMO

Slide 30

Slide 30 text

@ManfredSteyer 33 Implementing Verticals

Slide 31

Slide 31 text

@ManfredSteyer Options Folders Libraries Applications Implementation Options

Slide 32

Slide 32 text

@ManfredSteyer Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds

Slide 33

Slide 33 text

@ManfredSteyer 36 DEMO

Slide 34

Slide 34 text

@ManfredSteyer Sheriff: Module Boundaries on a per-folder basis @softarc/eslint-plugin-sheriff Works with and without Nx

Slide 35

Slide 35 text

@ManfredSteyer Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization in Builds Sheriff

Slide 36

Slide 36 text

@ManfredSteyer 39 DEMO

Slide 37

Slide 37 text

@ManfredSteyer Micro Frontends: Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')

Slide 38

Slide 38 text

@ManfredSteyer 41 DEMO

Slide 39

Slide 39 text

@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book • From DDD to Micro Frontends • 20 Chapters • > 18.000 (!) Downloads

Slide 40

Slide 40 text

@ManfredSteyer More: Angular Architecture Workshop • Maintainable Architectures with Modern Angular • Strategic Design with Nx & Sheriff • Micro Frontends with Module Federation • Signals and Your Architecture: CD & Zone-less, NGRX & Signal Store, RxJS-Interop, Resource API, Linked Signals International (English) Version in May German Version in August

Slide 41

Slide 41 text

@ManfredSteyer Conclusion Decoupled Verticals Business Domain Mirror Team Structure Cognitive Load Forensic Analysis Folders, Libs, Apps

Slide 42

Slide 42 text

Good Fences Make Good Neighbors!