Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Angular with the NGRX Signal Store New R...

Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz

Manfred Steyer

September 18, 2024
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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.
  4. 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
  5. Feature UI Data Util Lightweight Stores Cmp Cmp Lightweight Stores

    can live everywhere! Component vs. Module Exposed vs. Hidden
  6. Let's think it through … • Layering • Prevent Stores

    accessing each other • Redux DevTools
  7. Conclusion Lightweight Stores … … size of a (sub-)feature …

    can live everywhere … orchestrated by a feature service … leverage layering to prevent cycles … Use DevTools!
  8. Conclusion NGRX … … de facto standard for State Management

    in Angular … Signal Store: lightweight and highly extensible
  9. Conclusion Architecture … … vertically sliced by domains … horizontally

    by layers … enforced by Sheriff … fast builds with Nx … visualized with Detective