Vertical Architectures for Scalable Angular Applications

Slide 1

Slide 1 text

AngularArchitects.io | @ManfredSteyer Vertical Architectures for Scalable Angular Applications angular.love

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Questions

Slide 6

Slide 6 text

Questions • How large should a vertical be? • How to find good verticals? • How to implement them? • How to enforce rules? • How to analyse your implementation?

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

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

How to Find Good Verticals?

Slide 11

Slide 11 text

@ManfredSteyer Align Software with (business) domains!

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 Passenger Travel Agency Check-in Agent Boarding Agent

Slide 17

Slide 17 text

@ManfredSteyer Event Storming

Slide 18

Slide 18 text

@ManfredSteyer Booking Boarding Bounded Context Ubiquitous Language Flight Price Seats Passenger Tickets Flight Ticket

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@ManfredSteyer Implementing Verticals

Slide 24

Slide 24 text

@ManfredSteyer Options Folders Libraries Applications Micro Frontends

Slide 25

Slide 25 text

@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@ManfredSteyer Analysis: Detective

Slide 30

Slide 30 text

@ManfredSteyer Demo

Slide 31

Slide 31 text

@ManfredSteyer Announcing: Barrel-less Sheriff

Slide 32

Slide 32 text

@ManfredSteyer Try Out Detective in Your Code Base! npm i @softarc/detective -D npx detective

Slide 33

Slide 33 text

@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new Signal Store Chapters

Slide 34

Slide 34 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 German Version: angulararchitects.io/workshop-de English Version: angulararchitects.io/workshop-en

Slide 35

Slide 35 text

@ManfredSteyer Conclusion Decoupled Verticals Business Domain Mirror Team Structure Cognitive Load Flow & Value Stream