$30 off During Our Annual Pro Sale. View Details »

Angular's Future with Signals @ngStuttgart

Angular's Future with Signals @ngStuttgart

Manfred Steyer
PRO

July 04, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

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