Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

kuncevic.dev @kuncevic COMMUNITY πŸ“’ TEACHING 󰞹 PODCAST πŸŽ™ OSS πŸ€“ πŸ’»

Slide 4

Slide 4 text

kuncevic.dev @kuncevic CREATOR πŸ’‘ Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com

Slide 5

Slide 5 text

kuncevic.dev @kuncevic NGXS Core Team

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

kuncevic.dev TOC βœ… Progressive state management βœ… Common problem with SPA's βœ… Reactive services βœ… Benefits of state management βœ… From reactive services to NGXS

Slide 8

Slide 8 text

kuncevic.dev Progressive State Management πŸƒ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

kuncevic.dev Reactive Services State Management Progressive State Management πŸƒ Extra Features

Slide 11

Slide 11 text

kuncevic.dev What is the most common problem in SPA's ? πŸ€”

Slide 12

Slide 12 text

kuncevic.dev Component communication πŸ“’

Slide 13

Slide 13 text

kuncevic.dev Component communication

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

kuncevic.dev Basic example

Slide 18

Slide 18 text

kuncevic.dev Basic solution βœ… Parent to Child @Input() βœ… Child to Parent @Output()

Slide 19

Slide 19 text

kuncevic.dev πŸ‘Ž Nested components @Input() and @Output()

Slide 20

Slide 20 text

kuncevic.dev Reactive Services πŸ”₯

Slide 21

Slide 21 text

kuncevic.dev Reactive Services 😎

Slide 22

Slide 22 text

kuncevic.dev What is Reactive Service ?

Slide 23

Slide 23 text

kuncevic.dev RxJS BehaviorSubject πŸš€

Slide 24

Slide 24 text

kuncevic.dev RxJS BehaviorSubject πŸ€” βœ… Set default value βœ… Set new value βœ… Get current value

Slide 25

Slide 25 text

kuncevic.dev Demo

Slide 26

Slide 26 text

kuncevic.dev rx-service

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

kuncevic.dev State Management πŸ€–

Slide 29

Slide 29 text

kuncevic.dev What is your favourite state management solution ?

Slide 30

Slide 30 text

kuncevic.dev Top state management solutions for Angular πŸ€–

Slide 31

Slide 31 text

kuncevic.dev βœ… Simplify component communication βœ… Predictable data flow βœ… Easy testing/easy debugging βœ… Consistent practices across the teams Benefits of state management πŸ‘

Slide 32

Slide 32 text

kuncevic.dev NGXSπŸ’₯

Slide 33

Slide 33 text

kuncevic.dev NGXS Features πŸ’‘ βœ… Simple βœ… Less Boilerplate βœ… Dependency Injection βœ… Decorators βœ… Action Life Cycles βœ… Promises βœ… Community

Slide 34

Slide 34 text

kuncevic.dev NGXS Basics πŸ’ͺ ACTION STORE VIEW STATE (s) selector

Slide 35

Slide 35 text

kuncevic.dev From Reactive Services to NGXS

Slide 36

Slide 36 text

kuncevic.dev Demo

Slide 37

Slide 37 text

kuncevic.dev NGXS Plugins 🧱

Slide 38

Slide 38 text

kuncevic.dev NGXS Plugins 🧱 COMPONENT ACTION STORE PLUGINS BACKEND

Slide 39

Slide 39 text

kuncevic.dev NGXS Plugins 🧱 βœ… Logger βœ… Storage βœ… Web Socket βœ… Devtools βœ… Forms βœ… Router

Slide 40

Slide 40 text

kuncevic.dev ngxs.io/plugins

Slide 41

Slide 41 text

kuncevic.dev Demo

Slide 42

Slide 42 text

kuncevic.dev NGXS Labs 🧰

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

kuncevic.dev ngxs.io/ngxs-labs

Slide 45

Slide 45 text

kuncevic.dev NGXS Data πŸ›°

Slide 46

Slide 46 text

kuncevic.dev Features 󰩃 βœ… Even less boilerplate βœ… Entity adapter βœ… Persistence βœ… and more

Slide 47

Slide 47 text

kuncevic.dev Demo

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

kuncevic.dev Reactive Services State Management Progressive State Management πŸƒ Extra Features

Slide 50

Slide 50 text

kuncevic.dev

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

kuncevic.dev kuncevic.dev

Slide 53

Slide 53 text

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)