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's Future with Signals @ngStuttgart
Search
Manfred Steyer
PRO
July 04, 2023
Programming
1
620
Angular's Future with Signals @ngStuttgart
Manfred Steyer
PRO
July 04, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
99
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
CursorはMCPを使った方が良いぞ
taigakono
1
220
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
360
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
110
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
340
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
Select API from Kotlin Coroutine
jmatsu
1
220
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
Thoughts on Productivity
jonyablonski
69
4.7k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
How to Ace a Technical Interview
jacobian
277
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Invisible Side of Design
smashingmag
300
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Faster Mobile Websites
deanohume
307
31k
Unsuck your backbone
ammeep
671
58k
Transcript
@ManfredSteyer Angular's Future with Signals ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Zone.js: Monkey Patching After Event Handler: Inform Angular CD
Checks Components all components (default) or selected ones (OnPush)
@ManfredSteyer Zone.js: Magic Zone.js: ~100K Cannot patch async/await coarse grained
CD e.g. Components are always checked as a whole, even if only a tiny fraction changed
@ManfredSteyer Signals!
@ManfredSteyer Signals!
@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
@ManfredSteyer flights: Flight[] = []; const flights = await this.flightService.findAsPromise(from,
to); this.flights = flights; <div *ngFor="let f of flights"> <flight-card [item]="f" /> </div>
@ManfredSteyer flights = signal<Flight[]>([]); const flights = await this.flightService.findAsPromise(from, to);
this.flights.set(flights); <div *ngFor="let f of flights()"> <flight-card [item]="f" /> </div>
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer @Component({ signals: true, selector: 'temperature-calc', template: ` <p>C: {{
celsius() }}</p> <p>F: {{ fahrenheit() }}</p> `, }) export class SimpleCounter { celsius = signal(25); fahrenheit = computed(() => this.celsius() * 1.8 + 32); } Taken from the Signals RFC: https://github.com/angular/angular/discussions/49685
@ManfredSteyer @Component({ signals: true, selector: 'temperature-calc', template: ` <p>C: {{
celsius() }}</p> <p>F: {{ fahrenheit() }}</p> `, }) export class SimpleCounter { celsius = input(25); fahrenheit = computed(() => this.celsius() * 1.8 + 32); }
@ManfredSteyer Work w/o Zone.js Interop with traditional components Fine-grained CD
No need to update code!
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation, Nx, DDD
12 chapters
@ManfredSteyer Fine-grained CD Zone-less Future Convertible to Observables and vice
versa! No need to unsubscribe! No need to update code!
@ManfredSteyer • Maintainable Architectures • 🆕🔥 Standalone Components & APIs
• Micro Frontends and Module Federation • 🆕🔥 Signals and Your Architecture: CD, NGRX, RxJS-Interop Public or Company Training, Remote or On-Site German: angulararchitects.io/workshop-de English: angulararchitects.io/workshop-en