Angular's Future with Signals @ngStuttgart

Transcript

1. @ManfredSteyer
   Angular's Future with Signals
   ManfredSteyer
   

   View Slide

2. @ManfredSteyer
   

   View Slide

3. @ManfredSteyer
   

   View Slide

4. @ManfredSteyer
   Zone.js:
   Monkey
   Patching
   After Event
   Handler:
   Inform Angular
   CD Checks
   Components
   all components (default)
   or selected ones (OnPush)
   

   View Slide

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
   

   View Slide

6. @ManfredSteyer
   Signals!
   

   View Slide

7. @ManfredSteyer
   Signals!
   

   View Slide

8. @ManfredSteyer
   Signal
   as Producer
   4711
   Consumer
   read
   set
   notify
   4712
   

   View Slide

9. @ManfredSteyer
   flights: Flight[] = [];
   const flights = await this.flightService.findAsPromise(from, to);
   this.flights = flights;
   
   
   
   

   View Slide

10. @ManfredSteyer
    flights = signal([]);
    const flights = await this.flightService.findAsPromise(from, to);
    this.flights.set(flights);
    
    
    
    

    View Slide

11. @ManfredSteyer
    

    View Slide

12. @ManfredSteyer
    

    View Slide

13. @ManfredSteyer
    

    View Slide

14. @ManfredSteyer
    

    View Slide

15. @ManfredSteyer
    

    View Slide

16. @ManfredSteyer
    @Component({
    signals: true,
    selector: 'temperature-calc',
    template: `
    C: {{ celsius() }}
    F: {{ fahrenheit() }}
    `,
    })
    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
    

    View Slide

17. @ManfredSteyer
    @Component({
    signals: true,
    selector: 'temperature-calc',
    template: `
    C: {{ celsius() }}
    F: {{ fahrenheit() }}
    `,
    })
    export class SimpleCounter {
    celsius = input(25);
    fahrenheit = computed(() => this.celsius() * 1.8 + 32);
    }
    

    View Slide

18. @ManfredSteyer
    Work w/o
    Zone.js
    Interop with
    traditional
    components
    Fine-grained
    CD
    No need to
    update code!
    

    View Slide

19. @ManfredSteyer
    Free eBook (5th Edition)
    ANGULARarchitects.io/book
    Module Federation, Nx, DDD
    12 chapters
    

    View Slide

20. @ManfredSteyer
    Fine-grained
    CD
    Zone-less
    Future
    Convertible to
    Observables
    and vice versa!
    No need to
    unsubscribe!
    No need to
    update code!
    

    View Slide

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
    

    View Slide