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
Angular Architectures with Signals @ngPoland
Search
Manfred Steyer
PRO
November 06, 2023
Programming
0
210
Angular Architectures with Signals @ngPoland
Manfred Steyer
PRO
November 06, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
80
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
48
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
90
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
85
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
310
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
640
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
410
ゆるい個人開発のススメ
kuroppe1819
10
1k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
100
Hanami and htmx
bkuhlmann
0
220
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
390
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
500
Let's learn code review
riofujimon
2
570
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
Sheets API使ってみた
toshi0383
2
150
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Visualization
eitanlees
137
14k
Ruby is Unlike a Banana
tanoku
96
10k
How to Ace a Technical Interview
jacobian
273
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
The Cult of Friendly URLs
andyhume
74
5.7k
A designer walks into a library…
pauljervisheath
201
23k
Designing the Hi-DPI Web
ddemaree
276
33k
Documentation Writing (for coders)
carmenintech
61
4k
Six Lessons from altMBA
skipperchong
22
3k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
The Invisible Side of Design
smashingmag
294
49k
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
@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 { […]
swap(): void { patchState(this.state, (state) => ({ from: state.to, to: state.from })); } […] }
@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 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 const BooksStore = signalStore( withEntities<Book>({ collection: 'book' }), withEntities<Author>({
collection: 'author' }) );
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Services + Signals NGRX NGRX Signal Store Different Flavors
rxMethod Custom Features
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io