Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 17 And Signals

Angular 17 And Signals

Recap about Angular Changes overtime and how Angular 17 comes as game changer with Signals

Dany Paredes

December 02, 2023
Tweet

More Decks by Dany Paredes

Other Decks in Technology

Transcript

  1. @angular
    Defer views in Angular
    Dany Paredes
    GDE / Technical Writer Kendo Telerik
    Angular Reactivity with Signals

    View full-size slide

  2. What version of Angular
    are you currently using in
    production?
    😉

    View full-size slide

  3. About Me
    Dany Paredes
    🏀 NBA, 🏆🅰ngular GDE
    Technical Writer for Telerik
    Google Dev Library
    http://danywalls.com

    View full-size slide

  4. The Starting Lineup: JavaScript's Early All-Stars

    View full-size slide

  5. October, 2010
    AngularJS
    two-way data binding,
    revolutionizing how web
    applications were built.
    I wish a
    Happy
    2013!😉
    The Early Days: AngularJS

    View full-size slide

  6. September 2016
    Angular 2
    Complete rewrite from
    AngularJS, introducing a
    component-based
    architecture
    March 2017
    Angular 4
    Introducing HttpClient, a
    smaller, New router life
    cycle events for Guards
    and Resolvers.
    Nov 2017 & May 2019
    Angular 5, 6, 7, 8
    Angular in the Pre-React Era: Struggling to Hold Court

    View full-size slide

  7. February 2020
    Angular 9
    Ivy
    AOT
    Type checking
    June 2020-
    November 2021
    A10- A11-A12-A13
    The Comeback: Angular's Evolution Through Community Insight

    View full-size slide

  8. Revealing Strategies
    and Actions Leads to
    Others Learning and
    Benefiting Over Time
    😒
    The Turning Point

    View full-size slide

  9. November 2022
    Angular 15
    Standalone Stable
    - Composition API
    Ng Optimized Image
    - Functional Guards
    May 2023
    Angular 16
    Signals (preview)
    Hydratation(preview)
    ESBuild
    Required Inputs
    The Comeback
    The Comeback: Angular's Evolution Through Community Insight
    June 2022
    A14
    Standalone Components
    (preview)
    Strict Typed Forms
    Angular Debug Extension

    View full-size slide

  10. State of Angular Reactivity
    🛺

    View full-size slide

  11. NgZone ChangeDetection
    Reactivity, Change Detection and NgZone

    View full-size slide

  12. Change Detection

    View full-size slide

  13. export class App {
    ngZone = inject(NgZone);
    name = 'Angular';
    click() {
    //other code…
    this.ngZone.runOutsideAngular(() => {
    console.log("Hello Vienna");
    }
    );
    }
    }
    decoded
    Cipher

    View full-size slide

  14. ChangeDetectionStrategy.OnPush

    View full-size slide

  15. More About Change Detection & ZoneJS
    https://www.youtube.com/@DecodedFrontend

    View full-size slide

  16. 🤷‍
    ♀️
    Subject
    switchMap
    distinctUntilChanged
    BehaviorSubject
    HttpClient
    mergeMap

    View full-size slide

  17. Angular hear the community
    feedback to make easy to learn
    and start.

    View full-size slide

  18. Angular 17: The Game Changer

    View full-size slide

  19. Key Features of Angular 17
    angular.dev
    Vite & esbuild DI Debugging
    Input
    Transform
    Built-In Control Flow
    Async Animations & View Transition
    API
    New Lifecycle Hooks
    Server Side Rendering

    View full-size slide

  20. What Next ?
    Preconnect Image Directive Testing
    Styles and
    StylesUrl
    defer
    Material 3
    Server Side Rendering
    hydratation

    View full-size slide

  21. Momentum forwards
    v15 v16 v17+
    Angular Release
    User research
    and prototyping
    GitHub RFCs
    (Request for
    Comments)

    View full-size slide

  22. Developer
    Preview
    Momentum forwards
    v15 v16 v17+
    Angular Release
    User research
    and prototyping
    GitHub RFCs
    (Request for
    Comments)
    Signal-based
    APIs

    View full-size slide

  23. Developer
    Preview
    Momentum forwards
    v15 v16 v17+
    Angular Release
    User research
    and prototyping
    GitHub RFCs
    (Request for
    Comments)
    Support for
    inputs, outputs
    and queries
    Signal-based
    APIs

    View full-size slide

  24. Developer
    Preview
    Momentum
    forwards
    v15 v16 v17+
    Angular Release
    User research
    and prototyping
    GitHub RFCs
    (Request for
    Comments)
    Fully zoneless
    apps
    Support for
    inputs, outputs
    and queries
    Signal-based
    APIs

    View full-size slide

  25. Angular Momentum

    View full-size slide

  26. Reactivity
    Everywhere
    Precision
    Updates
    Lightweight
    Dependencies
    Signal primitives let you
    react to state changes
    anywhere in your code, not
    just components.
    Signals unlocks better
    performance- by-default -
    by minimizing the work
    Angular performs to keep
    your DOM up-to-date with
    precise writes.
    Signals are ~2KB* and fast.
    With no requirement to load
    third-party dependencies and
    no up-front startup cost when
    your page first loads.
    Build Faster Apps By Default

    View full-size slide

  27. signal computed effect
    Three reactive primitives
    Developer
    Preview

    View full-size slide

  28. signal
    A value that can tell Angular when it changes
    Signal

    View full-size slide

  29. signal
    A value that can tell Angular when it changes
    capable of notifying its context of future changes in
    its value
    Signal

    View full-size slide

  30. signal
    A value that can tell Angular when it
    changes
    capable of notifying its context of future
    changes in its value
    Signal

    View full-size slide

  31. First Last Full Name
    Emma Twersky Emma Twersky
    Dany Paredes Dany Paredes
    firstName = signal("Dany");
    lastName = signal("Paredes");

    View full-size slide

  32. //declare a signal
    name = signal('');
    //set
    this.name.set('dany');
    //update
    this.name.update((n) => `${n}walls`);

    View full-size slide

  33. signal
    computed
    Derive new value when one of
    the dependent signals change
    2. Compute

    View full-size slide

  34. First Last Full Name
    Emma Twersky Emma Twersky
    Simona Cotin Simona Cotin
    firstName = signal("Simona");
    lastName = signal("Cotin");
    fullName = computed(() => firstName()+
    " " + lastName());

    View full-size slide

  35. effect
    computed
    signal
    An effect is a side-effectful operation which reads
    the value of zero or more signals
    Automatically scheduled to be re-run whenever
    any of those signals is notified of a change
    3. Effect

    View full-size slide

  36. export class App implements OnInit {
    count = signal(0);
    limitMessage = 'Feel free to click!';
    constructor(): void {
    effect(() => {
    if (this.count() == 10) {
    this.limitMessage = 'You reached the limit, sorry';
    }
    });
    }

    View full-size slide

  37. Injection Context
    Effects is that they
    can only be used in
    an injection context
    Effects runInjectionContext

    View full-size slide

  38. injector = inject(Injector);
    ngOnInit(): void {
    runInInjectionContext(this.injector, () => {
    effect(() => {
    console.log(this.lastClient());
    })
    });
    }
    Effects and Injection Context

    View full-size slide

  39. How Signals works?
    💖

    View full-size slide

  40. Model as signals
    view
    view
    view
    view view
    view
    Refresh
    queue:
    Precision updates

    View full-size slide

  41. Model as signals
    Refresh
    queue:
    Precision updates
    view
    view
    view
    view view
    view

    View full-size slide

  42. Model as signals
    Refresh
    queue:
    Precision updates
    view
    view
    view
    view view
    view

    View full-size slide

  43. Model as signals
    view
    Refresh
    queue:
    Precision updates
    view
    view
    view
    view view
    view

    View full-size slide

  44. Model as signals
    Refresh
    queue: view
    Precision updates
    view
    view
    view
    view view
    view

    View full-size slide

  45. Model as signals
    Refresh
    queue:
    Precision updates
    view
    view
    view
    view view
    view

    View full-size slide

  46. Fast
    Lightweight
    dependencies

    View full-size slide

  47. Writing a Signals

    View full-size slide

  48. @Injectable({ providedIn: 'root' })
    export class CardsService {
    cards = signal([]);
    cardSlots = signal(3);
    lastClient = signal('No clients yet!');
    add(holder: string) {
    const card = {
    id: Math.random().toFixed(),
    holder,
    status: 'pending',
    };
    this.cards.update((p) => [...p, card]);
    this.cardSlots.update((p) => p - 1);
    this.lastClient.set(`Thanks ${holder}`!!);
    }
    }
    decoded
    Cipher

    View full-size slide

  49. @Component({
    selector: 'my-app',
    standalone: true,
    imports: [CommonModule],
    template: `
    {{title}}
    We have {{cardSlots()}} slots
    {{lastClient()}}

    [disabled]="soldOut()">Save

    {{card.holder}} {{card.id}}

    `,
    })
    decoded
    Cipher

    View full-size slide

  50. export class App {
    private cardsService = inject(CardsService);
    cards = this.cardsService.cards;
    cardSlots = this.cardsService.cardSlots;
    soldOut = this.cardsService.soldOut;
    lastClient = this.cardsService.lastClient;
    add(holder: HTMLInputElement) {
    this.cardsService.add(holder.value);
    holder.value = '';
    }
    }
    decoded
    Cipher

    View full-size slide

  51. 👀
    But What about Rxjs ?

    View full-size slide

  52. toSignal toObservable takeUntilDestroyed
    Get the current value of an
    Observable as a reactive
    Signal.
    Exposes the value of an
    Angular Signal as an RxJS
    Observable.
    Completes the Observable
    when the calling context
    (component, directive,
    service, etc) is destroyed.
    RxJS Interop

    View full-size slide

  53. Interoperability
    Backwards compatible
    Reactive ecosystem

    View full-size slide

  54. Embrace The Community

    View full-size slide

  55. Content & Resources

    View full-size slide

  56. Thanks!
    👍
    @danywalls www.danywalls.com

    View full-size slide