Modern Angular with Lightweight Stores: New Rules and Options

Slide 1

Slide 1 text

AngularArchitects.io | @ManfredSteyer Modern Angular with Lightweight Stores: New Rules and Options

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

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

Slide 8

Slide 8 text

Two Reasons for a Store Manage State Streamline Dataflow

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals, etc. sync/ async Currently: Main Use Case for Signas

Slide 13

Slide 13 text

Some Lightweight Stores … Akita Elf Pinia NGRX Signal Store

Slide 14

Slide 14 text

How do Lightweight Stores Change Architecture Rules?

Slide 15

Slide 15 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 16

Slide 16 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 17

Slide 17 text

Baseline Architecture

Slide 18

Slide 18 text

Stack NGRX Signal Store Angular Nx Monorepo

Slide 19

Slide 19 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 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

How Granular Should it be?

Slide 25

Slide 25 text

Feature Sub- Feature

Slide 26

Slide 26 text

Where to put the Store?

Slide 27

Slide 27 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 28

Slide 28 text

Feature UI Data Util Redux Feature Slice

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Demo

Slide 31

Slide 31 text

Global vs. Local State?

Slide 32

Slide 32 text

Global vs. Local FeatureStore DomainStore FeatureService UtilityStore

Slide 33

Slide 33 text

Global vs. Local FeatureStore DomainStore UtilityStore

Slide 34

Slide 34 text

Demo

Slide 35

Slide 35 text

Cycles, Redundancies, and Inconsistencies

Slide 36

Slide 36 text

Let's think it through … • Layering • Redux DevTools

Slide 37

Slide 37 text

Demo

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Conclusion Lightweight Stores … … size of a (sub-)feature … can live everywhere … orchestrated by a feature service … leverage layering to prevent cycles … Use DevTools!

Slide 40

Slide 40 text

Conclusion Architecture … … vertically sliced by domains … horizontally by layers … enforced by Sheriff or Nx … fast builds with Nx

Slide 41

Slide 41 text

"Krapfen"

Slide 42

Slide 42 text

ManfredSteyer AngularArchitects.io Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io