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

Aliaksei Kuncevič

September 15, 2020
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. kuncevic.dev
    @kuncevic
    COMMUNITY
    📢
    TEACHING 󰞹

    PODCAST
    🎙
    OSS 🤓
    💻

    View full-size slide

  4. kuncevic.dev
    @kuncevic CREATOR
    💡
    Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
    frontendwatch.com

    View full-size slide

  5. kuncevic.dev
    @kuncevic
    NGXS Core Team

    View full-size slide

  6. kuncevic.dev
    @kuncevic
    @markwhitfeld
    @overthesanity
    @splincodewd
    @c4rniatto
    @amcdnl
    @apolo_codes
    @joaqcid NGXS Team Map

    View full-size 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 full-size slide

  8. kuncevic.dev
    Progressive State Management
    🏃

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. kuncevic.dev
    Component communication 📢

    View full-size slide

  13. kuncevic.dev
    Component communication

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. kuncevic.dev
    Parent
    Child 1
    Component communication
    Child 2
    Child N
    Sibling

    View full-size slide

  17. kuncevic.dev
    Basic example

    View full-size slide

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

    View full-size slide

  19. kuncevic.dev
    👎 Nested components
    @Input() and @Output()

    View full-size slide

  20. kuncevic.dev
    Reactive Services 🔥

    View full-size slide

  21. kuncevic.dev
    Reactive Services 😎

    View full-size slide

  22. kuncevic.dev
    What is Reactive Service ?

    View full-size slide

  23. kuncevic.dev
    RxJS BehaviorSubject 🚀

    View full-size slide

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

    View full-size slide

  25. kuncevic.dev
    Demo

    View full-size slide

  26. kuncevic.dev
    rx-service

    View full-size slide

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

    View full-size slide

  28. kuncevic.dev
    State Management 🤖

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. kuncevic.dev
    NGXS💥

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. kuncevic.dev
    From Reactive Services to NGXS

    View full-size slide

  36. kuncevic.dev
    Demo

    View full-size slide

  37. kuncevic.dev
    NGXS Plugins 🧱

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. kuncevic.dev
    ngxs.io/plugins

    View full-size slide

  41. kuncevic.dev
    Demo

    View full-size slide

  42. kuncevic.dev
    NGXS Labs 🧰

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. kuncevic.dev
    NGXS Data 🛰

    View full-size slide

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

    View full-size slide

  47. kuncevic.dev
    Demo

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. kuncevic.dev

    View full-size slide

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

    View full-size slide

  52. kuncevic.dev
    kuncevic.dev

    View full-size 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 full-size slide