Angular Architecture Revisited Modernizing Angular Architectural Patterns

Embed

Start on current slide

Slide 1

Slide 1 text

Angular Architecture Revisited Modernizing Patterns RainerHahnekamp Spring Camp 2026

Slide 2

Slide 2 text

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com ● Rainer Hahnekamp ● ANGULARarchitects.io ● NgRx Core Team ● Developer / Trainer / Speaker @RainerHahnekamp Open Source Projects NgRx Toolkit Testronaut NgRx Sheriff

Slide 3

Slide 3 text

RainerHahnekamp An Architectural Journey...

Slide 4

Slide 4 text

RainerHahnekamp https://go.nx.dev/angular-patterns-ebook Features are grouped in scopes

Slide 5

Slide 5 text

RainerHahnekamp https://www.angulararchitects.io/ Manfred Steyer Scopes are domains. Partial

Slide 6

Slide 6 text

Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain (Holidays ) Domain (Customers) Domain (Bookings) Domain (Diary) Layer 1 - Domain modules

Slide 7

Slide 7 text

RainerHahnekamp Layer 1 ● Shell ○ Minimum to start application ○ Header, footer, main area ○ Core services ● Domains ○ Isolated ○ Minimum of communication ● Shared ○ Different types ○ Forms, UI, Services, Grids, etc. ○ Domains use them

Slide 8

Slide 8 text

Live Coding

Slide 9

Slide 9 text

RainerHahnekamp Holidays Feature Domain Layer 2

Slide 10

Slide 10 text

RainerHahnekamp Layer 2 ● Features ○ Drives the Use case ○ Is on top of the domain ○ UI components are always reusable/generic ● Domain ○ Domain Models ○ Services for backend ○ Logic

Slide 11

Slide 11 text

RainerHahnekamp Holidays Feature Domain Layer 2 Fabian Gosebrink I also have domain-speciﬁc UI components.

Slide 12

Slide 12 text

RainerHahnekamp *Container Components ● Least Possible Template ● Reading from Store ● Dispatching to Store ● Least Possible Typescript ● No Dependency Injection, only @Input and @Output ● No Observables! customers- container add-container input() output() *Presentational Components customers customer edit-container *Also known as ● Smart & Dumb Components ● Feature & UI components

Slide 13

Slide 13 text

RainerHahnekamp Container & Presentational Components ● Advantages ○ Works always ○ Clear separation of concerns ● Disadvantages ○ Overhead / Dogmatic Overuse ○ Proxy Container Components

Slide 14

Slide 14 text

RainerHahnekamp Holidays Feature UI Domain

Slide 15

Slide 15 text

RainerHahnekamp Holidays Feature UI Domain 🤔

Slide 16

Slide 16 text

RainerHahnekamp Holidays Feature Data UI

Slide 17

Slide 17 text

RainerHahnekamp Feature Data UI Model Holidays

Slide 18

Slide 18 text

RainerHahnekamp Feature UI Model Holidays

Slide 19

Slide 19 text

RainerHahnekamp Domain with multiple features Quiz Data UI Model Shop Data UI Model Holidays Core Data UI Model

Slide 20

Slide 20 text

RainerHahnekamp Domain with multiple features Quiz Data UI Model Shop Data UI Model Holidays Core Data UI Model This is lightweight???

Slide 21

Slide 21 text

Live Coding

Slide 22

Slide 22 text

RainerHahnekamp A few ideas…

Slide 23

Slide 23 text

RainerHahnekamp https://www.youtube.com/watch?v=hGzdN4OjbeA

Slide 24

Slide 24 text

RainerHahnekamp https://www.youtube.com/watch?v=hGzdN4OjbeA Stores are cheap!

Slide 25

Slide 25 text

RainerHahnekamp Alex Okrushko Marko Stanimirović SignalStore doing Container-speciﬁc tasks

Slide 26

Slide 26 text

RainerHahnekamp ● Ideas from hexagonal architecture ● UI is an adapter of the state ● Store the center Younes Jaaidi The state is the domain

Slide 27

Slide 27 text

RainerHahnekamp https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Slide 28

Slide 28 text

RainerHahnekamp Switching the perspective Feature Container UI Component Presentational Data Store Container as mapper between Store & UI

Slide 29

Slide 29 text

RainerHahnekamp Switching the perspective Feature Container UI Component Presentational Data Store Store does ALL the logic Feature Container UI Component Presentational Data Store Container as mapper between Store & UI

Slide 30

Slide 30 text

RainerHahnekamp Switching the perspective Feature Container UI Component Presentational Data Store Feature Container UI Component Presentational Data Store Store does ALL the logic Feature Container UI Component Presentational Data Store Container as mapper between Store & UI

Slide 31

Slide 31 text

RainerHahnekamp Switching the perspective Feature Container UI Component Presentational Data Store Role of Container??? Feature Container UI Component Presentational Data Store Store does ALL the logic Feature Container UI Component Presentational Data Store Container as mapper between Store & UI

Slide 32

Slide 32 text

RainerHahnekamp A modern/lightweight approach (Store as Hooks?) Feature Container UI Component Presentational Data Store Component Component Component Store

Slide 33

Slide 33 text

RainerHahnekamp Container & Presentational ✅ Works always ✅ Clear separation of concerns ⛔ Overhead / Dogmatic Overuse ⛔ Proxy Container Components Store & Components ✅ Works always ✅ Clear separation of concerns ✅ No Overhead / Simple ✅ No Proxy Containers

Slide 34

Slide 34 text

Live Coding

Slide 35

Slide 35 text

RainerHahnekamp Old wine in a new bottle?

Slide 36

Slide 36 text

RainerHahnekamp Old wine in a new bottle? ● New Implications ● Architecture based on heavyweight stores ○ Container Component as mediator ● Component hierarchies still exist ○ All with same role ● Feature Component as Route-assigned component