Pro Yearly is on sale from $80 to $50! »

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.5 (10/11/2020)

    with NGXS talk #36
  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 Extra Features

  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 Demo

  41. kuncevic.dev NGXS Labs

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

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

  44. kuncevic.dev NGXS Data

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

    ✅ Persistence ✅ and more
  46. kuncevic.dev Demo

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

  48. kuncevic.dev Reactive Services State Management Progressive State Management Extra Features

  49. kuncevic.dev

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

  51. kuncevic.dev kuncevic.dev/daily

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