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
signals-arc.pdf
Search
Manfred Steyer
PRO
November 29, 2023
Programming
0
310
signals-arc.pdf
Manfred Steyer
PRO
November 29, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
210
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
190
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
140
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
42
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
90
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
320
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
27
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
370
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
メルカリ ハロ アプリの技術スタック
atsumo
2
880
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
100
本編では話さない Zig の話
andpad
2
120
CSC509 Lecture 07
javiergs
PRO
0
140
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
5
220
GrafanaのHTTP API を眺めてみよう
rinchoku
0
470
CSC509 Lecture 04
javiergs
PRO
0
170
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
CSC509 Lecture 05
javiergs
PRO
0
180
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
850
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
360
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Building Adaptive Systems
keathley
38
2.2k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Statistics for Hackers
jakevdp
796
220k
Embracing the Ebb and Flow
colly
84
4.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Transcript
@ManfredSteyer ManfredSteyer Angular Architectures with Signals
@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private _flights = signal<Flight[]>([]); readonly flights = this._flights.asReadonly(); async load(from: string, to: string) { const flights = await […]; this._flights.set(flights); } }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private _flights = signal<Flight[]>([]); readonly flights = this._flights.asReadonly(); async load(from: string, to: string) { const flights = await […]; this._flights.set(flights); } }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private _flights = signal<Flight[]>([]); readonly flights = this._flights.asReadonly(); private _from = signal('Hamburg'); readonly from = this._from.asReadonly(); private _to = signal('Graz'); readonly to = this._to.asReadonly(); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private state = signal({ from: 'Hamburg', to: 'Graz', flights: [] as Flight[], […] }); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private state = signal({ from: 'Hamburg', to: 'Graz', flights: [] as Flight[], […] }); readonly flights = computed(() => this.state().flights); readonly from = computed(() => this.state().from); […] }
@ManfredSteyer
@ManfredSteyer select(selector) selectSignal(selector)
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { private
state = signalState({ from: 'Paris', to: 'London', flights: [] as Flight[], basket: {} as Record<number, boolean>, }); readonly flights = this.state.flights; readonly from = this.state.from; […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
readonly selected = computed( () => this.flights().filter((f) => this.basket()[f.id]) ); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, { from, to }) } […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, (state) => ({ from, to })); } […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, updateRoute(from, to)); } […] } function updateRoute<T>(from: string, to: string) { return (state: T) => ({ from, to }) }
@ManfredSteyer
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
[…] );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), […] );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }) );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const BookingStore = signalStore( withEntities({ entity: type<FlightState>(), collection: 'flight'
}), );
@ManfredSteyer
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withSignals(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }), withCallState() );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withSignals(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }), withCallState() );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Link to Article
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Services + Signals NGRX NGRX Signal Store Different Flavors
Custom Features
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io