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

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

September 10, 2020
Tweet

Transcript

  1. kuncevic.dev Reactive Services in Angular by ALIAKSEI KUNCEVIČ v 1.0

    (10/09/2020)
  2. kuncevic.dev ALIAKSEI KUNCEVIČ Independent Consultant https://dev.to/kuncevic https://twitter.com/kuncevic https://linkedin.com/in/kuncevic

  3. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) COMMUNITY Angular

    Workshop Angular Sydney (AU) TEACHING‍ kuncevic.dev
  4. kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular frontendwatch.com
  5. kuncevic.dev @kuncevic NGXS Core Team

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

    Team Map
  7. kuncevic.dev TOC ✅ Single Page Apps (SPA) ✅ Reactive Services

    and RxJS ✅ rx-service library
  8. kuncevic.dev Angular vs AngularJS 2+ 1.x

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

  10. kuncevic.dev RxJS

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

  12. kuncevic.dev Component communication

  13. kuncevic.dev Component communication

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

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

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

    Sibling
  17. kuncevic.dev Basic example

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

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

  20. kuncevic.dev Reactive Services

  21. kuncevic.dev Reactive Services

  22. kuncevic.dev What is Service ?

  23. kuncevic.dev What is Reactive Service ?

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

    value ✅ Get current value
  25. kuncevic.dev Demo

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

  27. kuncevic.dev

  28. kuncevic.dev rx-service

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

  30. kuncevic.dev Demo

  31. kuncevic.dev Component Communication Reactive Services and RxJS Reactive Services in

    Angular rx-service library
  32. kuncevic.dev

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

  34. kuncevic.dev kuncevic.dev/daily

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

  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