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
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
700
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
400
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
22
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
410
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
270
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
170
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
170
Other Decks in Programming
See All in Programming
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Honoとフロントエンドの 型安全性について
yodaka
4
250
GAEログのコスト削減
mot_techtalk
0
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Designing for Performance
lara
604
68k
Agile that works and the tools we love
rasmusluckow
328
21k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Applications with DynamoDB
mza
93
6.2k
Facilitating Awesome Meetings
lara
51
6.2k
Navigating Team Friction
lara
183
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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