Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Modern Angular with Signals and Signal Store New Rules for Your Architecture Manfred Steyer, ANGULARarchitects.io

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2 "Krapfen"

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 3

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 4

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 5 Small Change => Huge Impact

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 6 What if we changed for a lightweight store?

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 7 Lightweight Stores Component Lightweight Store method() Observables, Signals, etc. sync/ async

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 8 Two Reasons for a Store Manage State Streamline Dataflow

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 12 Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals, etc. sync/ async Currently: Main Use Case for Signas

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 13 Some Lightweight Stores Akita Elf Pinia NGRX Signal Store

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 14 How do Lightweight Stores Change Architecture Rules?

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 15 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 Agenda

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 16 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Baseline Architecture

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 18 Stack NGRX Signal Store Angular Nx Monorepo

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 19 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 Smart Comp. Dumb Comp. Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 20 Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds

Slide 21

Slide 21 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 21 Sheriff @softarc/eslint-plugin-sheriff Module Boundaries on a Per-Folder Basis

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 22 Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization in Builds Sheriff

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 23 DEMO

Slide 24

Slide 24 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 24 How Granular Should it be?

Slide 25

Slide 25 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 25 Feature Sub- Feature

Slide 26

Slide 26 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 26 Where to put the Store?

Slide 27

Slide 27 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 27 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 Feature Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7

Slide 28

Slide 28 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Feature UI Data Util 28 Redux Feature Slice

Slide 29

Slide 29 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 29 Lightweight Stores Feature UI Data Util Cmp Cmp Lightweight Stores can live everywhere! Component vs. Module Exposed vs. Hidden

Slide 30

Slide 30 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 30 DEMO

Slide 31

Slide 31 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Global vs. Local Stores

Slide 32

Slide 32 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 32 What if a Feature Needs Several Stores? FeatureStore DomainStore FeatureService

Slide 33

Slide 33 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 33 What if a Feature Needs Several Stores? FeatureStore DomainStore

Slide 34

Slide 34 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 34 What if a Feature Needs Several Stores? Store1 Store2 Eventing Utility

Slide 35

Slide 35 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 35

Slide 36

Slide 36 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 36

Slide 37

Slide 37 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 37 Cycles, Redundancies, and Inconsistencies

Slide 38

Slide 38 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 38 • Layering • Prevent Stores accessing each other • Redux DevTools Let‘s Think it Through …

Slide 39

Slide 39 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 39

Slide 40

Slide 40 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 40 DEMO

Slide 41

Slide 41 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 41 6th edition 20 chapters http://angularArchitects.io/ebook Free eBook

Slide 42

Slide 42 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 42 Lightweight Stores … … size of a (sub-)feature … can live everywhere … orchestrated by a feature service … leverage layering to prevent cycles … Use DevTools! Conclusion

Slide 43

Slide 43 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 43 NGRX … … de facto standard for State Management in Angular … Signal Store: lightweight and highly extensible Conclusion

Slide 44

Slide 44 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 44 "Krapfen"

Slide 45

Slide 45 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 45 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io