Sustainable SPA with DDD - The beginning of a wonderful friendship?

Slide 1

Slide 1 text

@ManfredSteyer Sustainable SPA with DDD The beginning of a wonderful friendship? angular-architects.io

Slide 2

Slide 2 text

What do we need for a good architecture? Experience

Slide 3

Slide 3 text

@ManfredSteyer Domain Driven Design

Slide 4

Slide 4 text

@ManfredSteyer How to create sustainable frontend architectures with ideas from DDD? ?

Slide 5

Slide 5 text

@ManfredSteyer How to create sustainable frontend architectures with ideas from DDD? ?

Slide 6

Slide 6 text

@ManfredSteyer Contents 1) DDD in a Nutshell 2) Monorepos 3) Monorepos & DDD 4) DDD & Micro Frontends

Slide 7

Slide 7 text

@ManfredSteyer About me… • Manfred Steyer ANGULARarchitects.io • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 8 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops

Slide 8

Slide 8 text

@ManfredSteyer 1) DDD in a nutshell

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@ManfredSteyer This is what Strategic DDD prevents

Slide 12

Slide 12 text

@ManfredSteyer Example e-Procurement System

Slide 13

Slide 13 text

@ManfredSteyer Catalog Approval Specification Ordering Example Sub-Domains

Slide 14

Slide 14 text

@ManfredSteyer 2) Monorepos

Slide 15

Slide 15 text

@ManfredSteyer Workspace

Slide 16

Slide 16 text

@ManfredSteyer Advantages No version conflicts No burden with distributing libs

Slide 17

Slide 17 text

@ManfredSteyer Moving back and forth Npm Registry

Slide 18

Slide 18 text

@ManfredSteyer https://nrwl.io/nx

Slide 19

Slide 19 text

@ManfredSteyer Visualize Module Structure

Slide 20

Slide 20 text

@ManfredSteyer 3) Nx Monorepos and Strategic Design

Slide 21

Slide 21 text

@ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.

Slide 22

Slide 22 text

@ManfredSteyer Catalog Ordering Shared Feature API Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer

Slide 23

Slide 23 text

@ManfredSteyer Catalog Ordering Shared Feature API Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer

Slide 24

Slide 24 text

@ManfredSteyer Application Domain Infrastructure Isolate your domain! Domain e. g. data access Use case specific facades, state management Entities, biz logic

Slide 25

Slide 25 text

@ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean Architecture • Anyway: We need to restrict access b/w libraries

Slide 26

Slide 26 text

@ManfredSteyer DEMO

Slide 27

Slide 27 text

@ManfredSteyer BLOG ANGULARarchitects.io

Slide 28

Slide 28 text

@ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of retesting • Access restrictions • Information Hiding

Slide 29

Slide 29 text

@ManfredSteyer Facades and State Management

Slide 30

Slide 30 text

@ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { […] }

Slide 31

Slide 31 text

@ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { public products: Product[] = []; […] } State!

Slide 32

Slide 32 text

@ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } […] }

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

@ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { public products: Observable; constructor(private productService: ProductService) { } search(category: string): void { […] } } Also key for messaging

Slide 36

Slide 36 text

@ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have State

Slide 37

Slide 37 text

@ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have State

Slide 38

Slide 38 text

@ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have State Store (z. B. Redux/ NGRX) Observable Action

Slide 39

Slide 39 text

@ManfredSteyer Entities & Aggregates

Slide 40

Slide 40 text

@ManfredSteyer Entity/ Aggregate Root (OOP) public class BoardingList { private int id; private int flightId; private List entries; private boolean completed; // Getters and Setters public void setStatus(int passengerId, BoardingStatus status) { // Complex logic to update status } }

Slide 41

Slide 41 text

FP und DDD?

Slide 42

Slide 42 text

@ManfredSteyer Entities (FP) export interface BoardingList { readonly id: number; readonly flightId: number; readonly entries: BoardingListEntry[]; readonly completed: boolean; } export function updateBoardingStatus( boardingList: BoardingList, passengerId: number, status: BoardingStatus) { // Complex logic to update status }

Slide 43

Slide 43 text

@ManfredSteyer 4) Micro Frontends

Slide 44

Slide 44 text

@ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature … … … … … … … … … @ManfredSteyer e-Procurement App Deployment Monolith

Slide 45

Slide 45 text

@ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature … … … … … … … … … @ManfredSteyer Catalog App Ordering App Option 1: One App per Domain

Slide 46

Slide 46 text

@ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature … … … … … … … … … @ManfredSteyer Catalog App Ordering App Option 2: One Monorepo per Domain Publish shared libs seperately via npm Different Versions

Slide 47

Slide 47 text

@ManfredSteyer BLOG ANGULARarchitects.io

Slide 48

Slide 48 text

Summary • Slicing into sub-domains • Slicing into layers • Finegrained libraries • Enforce restrictions • Fits to micro frontends

Slide 49

Slide 49 text

@ManfredSteyer

Slide 50

Slide 50 text

@ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops