Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Modern Angular with Lightweight Stores: New Rul...
Search
Manfred Steyer
PRO
October 10, 2024
Programming
0
280
Modern Angular with Lightweight Stores: New Rules and Options
Manfred Steyer
PRO
October 10, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
45
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
4
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
89
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
75
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
86
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
50
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
350
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
160
Other Decks in Programming
See All in Programming
受け取る人から提供する人になるということ
little_rubyist
0
170
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
250
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
700
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.6k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
役立つログに取り組もう
irof
28
9.2k
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
310
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
190
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Ruby is Unlike a Banana
tanoku
96
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
BBQ
matthewcrist
85
9.3k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Transcript
AngularArchitects.io | @ManfredSteyer Modern Angular with Lightweight Stores: New Rules
and Options
"Krapfen"
None
None
Small Change => Huge Impact
What if we changed for a lightweight store?
Lightweight Stores Component Lightweight Store method() Observables, Signals, etc. sync/
async
Two Reasons for a Store Manage State Streamline Dataflow
None
None
None
Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals,
etc. sync/ async Currently: Main Use Case for Signas
Some Lightweight Stores … Akita Elf Pinia NGRX Signal Store
How do Lightweight Stores Change Architecture Rules?
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
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
Baseline Architecture
Stack NGRX Signal Store Angular Nx Monorepo
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.
Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
Sheriff: Module Boundaries on a per-folder basis @softarc/eslint-plugin-sheriff Works with
and without Nx
Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization
in Builds Sheriff
Demo
How Granular Should it be?
Feature Sub- Feature
Where to put the Store?
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
Feature UI Data Util Redux Feature Slice
Feature UI Data Util Lightweight Stores Cmp Cmp Lightweight Stores
can live everywhere! Component vs. Module Exposed vs. Hidden
Demo
Global vs. Local State?
Global vs. Local FeatureStore DomainStore FeatureService UtilityStore
Global vs. Local FeatureStore DomainStore UtilityStore
Demo
Cycles, Redundancies, and Inconsistencies
Let's think it through … • Layering • Redux DevTools
Demo
Free eBook (6th Edition) angularArchitects.io/ebook
Conclusion Lightweight Stores … … size of a (sub-)feature …
can live everywhere … orchestrated by a feature service … leverage layering to prevent cycles … Use DevTools!
Conclusion Architecture … … vertically sliced by domains … horizontally
by layers … enforced by Sheriff or Nx … fast builds with Nx
"Krapfen"
ManfredSteyer AngularArchitects.io Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io