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
580
Angular's Future with Signals @ngStuttgart
Manfred Steyer
PRO
July 04, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
110
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
90
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
170
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
75
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
110
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
95
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
260
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
450
Micro Frontends with Web Standards
manfredsteyer
PRO
1
330
Other Decks in Programming
See All in Programming
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
mb_trim関数を作りました
youkidearitai
PRO
1
240
AmperとFleetを使ったAndroidアプリ
yoppie
0
300
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
AppRouter Panel Talk
yosuke_furukawa
PRO
1
530
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
860
Deep Dive into React Stream/Serialize
mugi_uno
4
870
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
TypeScriptのパフォーマンス改善
yajihum
14
5.1k
Featured
See All Featured
Designing for Performance
lara
601
67k
In The Pink: A Labor of Love
frogandcode
138
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Mythical Team-Month
searls
217
42k
How STYLIGHT went responsive
nonsquared
92
4.9k
Practical Orchestrator
shlominoach
183
9.8k
Making Projects Easy
brettharned
109
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
What the flash - Photography Introduction
edds
64
11k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
The Cost Of JavaScript in 2023
addyosmani
21
4k
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