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

Reactive Services in Angular

Reactive Services in Angular

This is a lightning talk about how handle component communication in Angular apps using reactive services approach. As a part of this talk I am introducing rx-service library that simplifying the implementation of reactive services and helps to make them simpler and more consistent.

Demo: https://github.com/kuncevic/progressive-state-management-with-ngxs

Rx Service
https://github.com/kuncevic/rx-service

p.s
This talk is a small part of my Progressive State Management talk that you can watch here:

Video: https://youtu.be/mY9rlno7_uc

Aliaksei Kuncevič

September 10, 2020
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

Transcript

  1. kuncevic.dev
    Reactive Services in Angular
    by ALIAKSEI KUNCEVIČ
    v 1.0 (10/09/2020)

    View Slide

  2. kuncevic.dev
    ALIAKSEI KUNCEVIČ
    Independent Consultant
    https://dev.to/kuncevic
    https://twitter.com/kuncevic
    https://linkedin.com/in/kuncevic

    View Slide

  3. kuncevic.dev
    @kuncevic
    Angular Minsk (BY)
    Frontend Tech (AU)
    COMMUNITY
    Angular Workshop
    Angular Sydney (AU)
    TEACHING‍
    kuncevic.dev

    View Slide

  4. kuncevic.dev
    @kuncevic CREATOR

    Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
    frontendwatch.com

    View Slide

  5. kuncevic.dev
    @kuncevic
    NGXS Core Team

    View Slide

  6. kuncevic.dev
    @kuncevic
    @markwhitfeld
    @overthesanity
    @splincodewd
    @c4rniatto
    @amcdnl
    @apolo_codes
    @joaqcid NGXS Team Map

    View Slide

  7. kuncevic.dev
    TOC
    ✅ Single Page Apps (SPA)
    ✅ Reactive Services and RxJS
    ✅ rx-service library

    View Slide

  8. kuncevic.dev
    Angular vs AngularJS
    2+
    1.x

    View Slide

  9. kuncevic.dev
    npm show @angular/core version

    View Slide

  10. kuncevic.dev
    RxJS

    View Slide

  11. kuncevic.dev
    What is the most common
    challenge in SPA's ?

    View Slide

  12. kuncevic.dev
    Component communication

    View Slide

  13. kuncevic.dev
    Component communication

    View Slide

  14. kuncevic.dev
    Parent
    Nested components
    Child 1
    Child 2
    Child N

    View Slide

  15. kuncevic.dev
    Parent
    Child 1
    Component communication
    Child 2
    Child N

    View Slide

  16. kuncevic.dev
    Parent
    Child 1
    Component communication
    Child 2
    Child N
    Sibling

    View Slide

  17. kuncevic.dev
    Basic example

    View Slide

  18. kuncevic.dev
    Basic solution
    ✅ Parent to Child @Input()
    ✅ Child to Parent @Output()

    View Slide

  19. kuncevic.dev
    Nested components
    @Input() and @Output()

    View Slide

  20. kuncevic.dev
    Reactive Services

    View Slide

  21. kuncevic.dev
    Reactive Services

    View Slide

  22. kuncevic.dev
    What is Service ?

    View Slide

  23. kuncevic.dev
    What is Reactive Service ?

    View Slide

  24. kuncevic.dev
    RxJS BehaviorSubject
    ✅ Set initial value
    ✅ Set new value
    ✅ Get current value

    View Slide

  25. kuncevic.dev
    Demo

    View Slide

  26. kuncevic.dev
    Can we do better than that ?

    View Slide

  27. kuncevic.dev

    View Slide

  28. kuncevic.dev
    rx-service

    View Slide

  29. kuncevic.dev
    github.com/kuncevic/rx-service

    View Slide

  30. kuncevic.dev
    Demo

    View Slide

  31. kuncevic.dev
    Component Communication
    Reactive Services and RxJS
    Reactive Services in Angular
    rx-service library

    View Slide

  32. kuncevic.dev

    View Slide

  33. kuncevic.dev
    twitter.com/kuncevic
    linkedin.com/in/kuncevic
    Th nk you!
    dev.to/kuncevic

    View Slide

  34. kuncevic.dev
    kuncevic.dev/daily

    View Slide

  35. kuncevic.dev
    meetup.com/Angular-Sydney

    View Slide

  36. kuncevic.dev
    Links
    Demo code and full talk video
    github.com/kuncevic/progressive-state-manag
    ement-with-ngxs
    youtu.be/mY9rlno7_uc
    rx-service library
    github.com/kuncevic/rx-service

    View Slide