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

Progressive State Management with NGXS

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

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

September 15, 2020
Tweet

Transcript

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

    with NGXS talk #37
  2. kuncevic.dev ALIAKSEI KUNCEVIČ Independent Consultant https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic

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

    💻
  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 Progressive State Management COMPONENT A COMPONENT B observable observable

    Store (NGXS) Rx Service Rx Service
  10. kuncevic.dev Reactive Services State Management Progressive State Management 🏃 Extra

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

  23. kuncevic.dev RxJS BehaviorSubject 🚀

  24. kuncevic.dev RxJS BehaviorSubject 🤔 ✅ Set default value ✅ Set

    new value ✅ Get current value
  25. kuncevic.dev Demo

  26. kuncevic.dev rx-service

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

  28. kuncevic.dev State Management 🤖

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

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

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

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

  33. kuncevic.dev NGXS Features 💡 ✅ Simple ✅ Less Boilerplate ✅

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

  35. kuncevic.dev From Reactive Services to NGXS

  36. kuncevic.dev Demo

  37. kuncevic.dev NGXS Plugins 🧱

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

  39. kuncevic.dev NGXS Plugins 🧱 ✅ Logger ✅ Storage ✅ Web

    Socket ✅ Devtools ✅ Forms ✅ Router
  40. kuncevic.dev ngxs.io/plugins

  41. kuncevic.dev Demo

  42. kuncevic.dev NGXS Labs 🧰

  43. kuncevic.dev NGXS Labs 🧰 ✅ Data ✅ Emitter ✅ Immer

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

  45. kuncevic.dev NGXS Data 🛰

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

    ✅ Persistence ✅ and more
  47. kuncevic.dev Demo

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

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

    Features
  50. kuncevic.dev

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

  52. kuncevic.dev kuncevic.dev

  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)