Progressive State Management with NGXS

Progressive State Management with NGXS

This is v1.4 of Progressive State Management with NGXS that was delivered at:

✅ 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 development technique when you progressively enhancing the functionality of the application state in a way it won't affect the existing data flow and current structure of your application.

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

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

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

September 15, 2020
Tweet

Transcript

  1. kuncevic.dev Progressive State Management with ALIAKSEI KUNCEVIČ v 1.4 (15/09/2020)

    with NGXS talk #35
  2. kuncevic.dev ALIAKSEI KUNCEVIČ Independent Consultant https://twitter.com/kuncevic https://github.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 ✅ Progressive state management ✅ Common problem with

    SPA's ✅ Reactive services ✅ Benefits of state management ✅ From reactive services to NGXS
  8. kuncevic.dev Progressive State Management

  9. kuncevic.dev Reactive Services State Management Progressive State Management Plugins

  10. kuncevic.dev What is the most common problem in SPA's ?

  11. kuncevic.dev Component communication

  12. kuncevic.dev Component communication

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

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

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

    Sibling
  16. kuncevic.dev Basic example

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

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

  19. kuncevic.dev Reactive Services

  20. kuncevic.dev Reactive Services

  21. kuncevic.dev What is Reactive Service ?

  22. kuncevic.dev RxJS BehaviorSubject

  23. kuncevic.dev RxJS BehaviorSubject ✅ Set default value ✅ Set new

    value ✅ Get current value
  24. kuncevic.dev Demo

  25. kuncevic.dev rx-service

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

  27. kuncevic.dev State Management

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

  29. kuncevic.dev Top state management solutions for Angular

  30. kuncevic.dev ✅ Simplify component communication ✅ Predictable data flow ✅

    Easy testing/easy debugging ✅ Consistent practices across the teams Benefits of state management
  31. kuncevic.dev NGXS

  32. kuncevic.dev NGXS Features ✅ Simple ✅ Less Boilerplate ✅ Dependency

    Injection ✅ Decorators ✅ Action Life Cycles ✅ Promises ✅ Community
  33. kuncevic.dev NGXS Basics ACTION STORE VIEW STATE (s) selector

  34. kuncevic.dev From Reactive Services to NGXS

  35. kuncevic.dev Demo

  36. kuncevic.dev NGXS Plugins

  37. kuncevic.dev NGXS Plugins COMPONENT ACTION STORE PLUGINS BACKEND

  38. kuncevic.dev NGXS Plugins ✅ Logger ✅ Storage ✅ Web Socket

    ✅ Devtools ✅ Forms ✅ Router
  39. kuncevic.dev ngxs.io/plugins

  40. kuncevic.dev NGXS Labs

  41. kuncevic.dev NGXS Labs ✅ Data ✅ Emitter ✅ Immer adapter

    ✅ Dispatch decorator ✅ Select snapshot ✅ Async storage plugin ✅ Entity state ✅ Actions executing ✅ Attach action
  42. kuncevic.dev ngxs.io/ngxs-labs

  43. kuncevic.dev NGXS Data

  44. kuncevic.dev Features ‍♂ ✅ Even less boilerplate ✅ Entity adapter

    ✅ Persistence ✅ and more
  45. kuncevic.dev Demo

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

  47. kuncevic.dev Reactive Services State Management Progressive State Management Plugins

  48. kuncevic.dev

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

  50. kuncevic.dev kuncevic.dev/daily

  51. 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)