Angular's Future with Signals @ngStuttgart

Transcript

1. @ManfredSteyer Angular's Future with Signals ManfredSteyer
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Zone.js: Monkey Patching After Event Handler: Inform Angular CD Checks Components all components (default) or selected ones (OnPush)
5. @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
6. @ManfredSteyer Signals!
7. @ManfredSteyer Signals!
8. @ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
9. @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>
10. @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>
11. @ManfredSteyer
12. @ManfredSteyer
13. @ManfredSteyer
14. @ManfredSteyer
15. @ManfredSteyer
16. @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
17. @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); }
18. @ManfredSteyer Work w/o Zone.js Interop with traditional components Fine-grained CD No need to update code!
19. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation, Nx, DDD 12 chapters
20. @ManfredSteyer Fine-grained CD Zone-less Future Convertible to Observables and vice versa! No need to unsubscribe! No need to update code!
21. @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