Slide 1

Slide 1 text

AngularArchitects.io | @ManfredSteyer Modern Angular Architectures With Nx and Lightweight Stores

Slide 2

Slide 2 text

"Krapfen"

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Small Change => Huge Impact

Slide 6

Slide 6 text

What if we changed for a lightweight store?

Slide 7

Slide 7 text

How do Lightweight Stores Change Architecture Rules?

Slide 8

Slide 8 text

Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals, etc. sync/ async

Slide 9

Slide 9 text

Some Lightweight Stores … Akita Elf Pinia NGRX Signal Store

Slide 10

Slide 10 text

Agenda 1) Baseline Architecture 2) How Large Should a Store be? 3) Where To Put The Store? 4) Global and/or Local State? 5) Preventing Cycles, Redundancies, and Inconsistencies

Slide 11

Slide 11 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 12

Slide 12 text

Baseline Architecture

Slide 13

Slide 13 text

Stack NGRX Signal Store Angular Nx Monorepo

Slide 14

Slide 14 text

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 15

Slide 15 text

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

Slide 16

Slide 16 text

Sheriff: Boundaries on a per-folder basis Rainer Hahnekamp, AngularArchitects @softarc/eslint-plugin-sheriff

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Demo

Slide 19

Slide 19 text

How Large Should it be?

Slide 20

Slide 20 text

Feature Sub- Feature

Slide 21

Slide 21 text

Where to put the Store?

Slide 22

Slide 22 text

Booking Boarding 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 Feature

Slide 23

Slide 23 text

Feature UI Data Util Redux Feature Slice

Slide 24

Slide 24 text

Feature UI Data Util Lightweight Stores Cmp Cmp Lightweight Stores can live everywhere! Component vs. Module Exposed vs. Hidden

Slide 25

Slide 25 text

Demo

Slide 26

Slide 26 text

Global vs. Local State?

Slide 27

Slide 27 text

Global vs. Local FeatureStore DomainStore FeatureService UtilityStore

Slide 28

Slide 28 text

Cycles, Redundancies, and Inconsistencies

Slide 29

Slide 29 text

Let's think it through … • Layering • Prevent Stores accessing each other • Redux DevTools

Slide 30

Slide 30 text

Free eBook (6th Edition) angularArchitects.io/ebook

Slide 31

Slide 31 text

Conclusion Lightweight Stores … … have the size of a (sub-)feature … can live everywhere … can be orchestrated by a feature service … can leverage layering to prevent cycles … should use DevTools

Slide 32

Slide 32 text

"Krapfen"

Slide 33

Slide 33 text

ManfredSteyer AngularArchitects.io Slides & Examples