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
610
Angular's Future with Signals @ngStuttgart
Manfred Steyer
PRO
July 04, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
91
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
81
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
160
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
180
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
220
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
510
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
230
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
880
Other Decks in Programming
See All in Programming
DataStoreをテストする
mkeeda
0
280
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
460
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.6k
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
200
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.5k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
230
Vibe Codingをせずに Clineを使っている
watany
17
5.8k
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
170
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
860
List とは何か? / PHPerKaigi 2025
meihei3
0
610
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
620
PsySHから紐解くREPLの仕組み
muno92
PRO
1
540
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building Applications with DynamoDB
mza
94
6.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Embracing the Ebb and Flow
colly
85
4.6k
Why Our Code Smells
bkeepers
PRO
336
57k
How GitHub (no longer) Works
holman
314
140k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Code Review Best Practice
trishagee
67
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Done Done
chrislema
183
16k
Rails Girls Zürich Keynote
gr2m
94
13k
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