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
590
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 the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
7
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
14
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
69
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
320
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
250
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Other Decks in Programming
See All in Programming
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
230
Developer Joy == Developer Productivity (really!)
hollycummins
1
100
Kotlin 2.0 and Beyond
antonarhipov
2
150
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
160
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
370
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
130
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Happy Clients
brianwarren
96
6.6k
How GitHub (no longer) Works
holman
310
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Navigating Team Friction
lara
183
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
4 Signs Your Business is Dying
shpigford
179
21k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
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