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
800
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
450
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
23
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
430
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
370
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
180
Other Decks in Programming
See All in Programming
AIプログラミング雑キャッチアップ
yuheinakasaka
10
1.7k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Datadog Workflow Automation で圧倒的価値提供
showwin
1
100
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
DROBEの生成AI活用事例 with AWS
ippey
0
140
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
GAEログのコスト削減
mot_techtalk
0
120
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
190
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Unsuck your backbone
ammeep
669
57k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
344
40k
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