Progressive State Management with NGXS

Progressive State Management with NGXS that was delivered at:

✅ 11 Nov 2020 - Angular Leipzig ✅ 17 Oct 2020 - GDG Perth ✅ 15 Sept 2020 - ngHeidelberg ✅ 31 Aug 2020 - Adventures in Angular ✅ 25 Aug 2020 - Angular Oslo ✅ 6 Aug 2020 - Angular Air ✅ July 25 2020 - Angular NL ✅ June 30 2020 - Angular NYC

Progressive State Management is a technique that allows to progressively enhance the functionality of the application state in a way that won't affect the existing application data flow.

This talk is about how to manage state of your Angular apps progressively starting by using Reactive Services approach and then switching to NGXS if you decide to power up the functionality of your app state with sophisticated state management solution and plugins

Demo: https://github.com/kuncevic/progressive-state-management-with-ngxs
Video: https://youtu.be/mY9rlno7_uc
Podcast: https://devchat.tv/adv-in-angular/aia-298-progressive-state-management-with-ngxs-with-aliaksei-kuncevic

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

NGXS:
https://ngxs.io
https://ngxs.io/plugins
https://ngxs.io/ngxs-labs
https://tinyurl.com/ngxs-slack

Other:
The Power of NGXS Selectors https://youtu.be/y3F99IsnNvI by Mateus Carniatto at Angular Air
NGXS and NGXS Data https://youtu.be/BtVHm0FJIRA?t=114 by Max Ivanov at Angular Minsk

Transcript

1. kuncevic.dev
   Progressive State Management
   with ALIAKSEI KUNCEVIČ
   v 1.6 (04/05/2021)
   with NGXS
   talk #37
   

   View Slide

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

   View Slide

3. kuncevic.dev
   @kuncevic
   COMMUNITY
   📢
   TEACHING 󰞹
   
   PODCAST
   🎙
   OSS 🤓
   💻
   

   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
   ✅ Progressive state management
   ✅ Common problem with SPA's
   ✅ Reactive services
   ✅ Benefits of state management
   ✅ From reactive services to NGXS
   

   View Slide

8. kuncevic.dev
   Progressive State Management
   🏃
   

   View Slide

9. kuncevic.dev
   Progressive State Management
   COMPONENT
   A
   COMPONENT
   B
   observable
   observable Store (NGXS)
   Rx
   Service
   Rx
   Service
   

   View Slide

10. kuncevic.dev
    Reactive Services
    State Management
    Progressive State Management
    🏃
    Extra Features
    

    View Slide

11. kuncevic.dev
    What is the most common
    problem 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 Reactive Service ?
    

    View Slide

23. kuncevic.dev
    RxJS BehaviorSubject 🚀
    

    View Slide

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

    View Slide

25. kuncevic.dev
    Demo
    

    View Slide

26. kuncevic.dev
    rx-service
    

    View Slide

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

    View Slide

28. kuncevic.dev
    State Management 🤖
    

    View Slide

29. kuncevic.dev
    What is your favourite state
    management solution ?
    

    View Slide

30. kuncevic.dev
    Top state management solutions
    for Angular 🤖
    

    View Slide

31. kuncevic.dev
    ✅ Simplify component communication
    ✅ Predictable data flow
    ✅ Easy testing/easy debugging
    ✅ Consistent practices across the teams
    Benefits of state management 👍
    

    View Slide

32. kuncevic.dev
    NGXS💥
    

    View Slide

33. kuncevic.dev
    NGXS Features 💡
    ✅ Simple
    ✅ Less Boilerplate
    ✅ Dependency Injection
    ✅ Decorators
    ✅ Action Life Cycles
    ✅ Promises
    ✅ Community
    

    View Slide

34. kuncevic.dev
    NGXS Basics 💪
    ACTION
    STORE
    VIEW
    STATE (s)
    selector
    

    View Slide

35. kuncevic.dev
    From Reactive Services to NGXS
    

    View Slide

36. kuncevic.dev
    Demo
    

    View Slide

37. kuncevic.dev
    NGXS Plugins 🧱
    

    View Slide

38. kuncevic.dev
    NGXS Plugins 🧱
    COMPONENT ACTION
    STORE
    PLUGINS
    BACKEND
    

    View Slide

39. kuncevic.dev
    NGXS Plugins 🧱
    ✅ Logger
    ✅ Storage
    ✅ Web Socket
    ✅ Devtools
    ✅ Forms
    ✅ Router
    

    View Slide

40. kuncevic.dev
    ngxs.io/plugins
    

    View Slide

41. kuncevic.dev
    Demo
    

    View Slide

42. kuncevic.dev
    NGXS Labs 🧰
    

    View Slide

43. kuncevic.dev
    NGXS Labs 🧰
    ✅ Data
    ✅ Emitter
    ✅ Immer adapter
    ✅ Dispatch decorator
    ✅ Select snapshot
    ✅ Async storage
    ✅ Entity state
    ✅ Actions executing
    ✅ Attach action
    ✅ Firestore
    

    View Slide

44. kuncevic.dev
    ngxs.io/ngxs-labs
    

    View Slide

45. kuncevic.dev
    NGXS Data 🛰
    

    View Slide

46. kuncevic.dev
    Features 󰩃
    ✅ Even less boilerplate
    ✅ Entity adapter
    ✅ Persistence
    ✅ and more
    

    View Slide

47. kuncevic.dev
    Demo
    

    View Slide

48. kuncevic.dev
    github.com/ngxs-labs/data
    

    View Slide

49. kuncevic.dev
    Reactive Services
    State Management
    Progressive State Management
    🏃
    Extra Features
    

    View Slide

50. kuncevic.dev
    

    View Slide

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

    View Slide

52. kuncevic.dev
    kuncevic.dev
    

    View Slide

53. kuncevic.dev
    Links
    Code and video
    github.com/kuncevic/progressive-state-manag
    ement-with-ngxs
    youtu.be/mY9rlno7_uc
    github.com/kuncevic/rx-service
    NGXS
    ngxs.io
    tinyurl.com/ngxs-slack
    ngxs.io/plugins
    ngxs.io/ngxs-labs
    Other
    youtu.be/y3F99IsnNvI (The Power of NGXS
    Selectors, by Mateus Carniatto)
    youtu.be/BtVHm0FJIRA?t=114 (NGXS and
    NGXS Data, Max Ivanov)
    

    View Slide