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