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

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