ngxs - Speaker Deck

Slide 1

Slide 1 text

State Management Made Simple

Slide 2

Slide 2 text

@JecelynYeen - Google Developer Expert (GDE) - Blogger - Software Architect - Women Who Code KL Director - ng-MY Conference Organizer

Slide 3

Slide 3 text

state management pattern + library for Angular

Slide 4

Slide 4 text

predictable state mutations

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Why Yet Another State Management Solution?

Slide 7

Slide 7 text

Pick your flavor!

Slide 8

Slide 8 text

Reimagine State Management for Angular

Slide 9

Slide 9 text

Reduce Boilerplate

Slide 10

Slide 10 text

Rethink Developer Ergonomic & User API

Slide 11

Slide 11 text

Getting Started ng add @ngxs/schematics https://github.com/ngxs/schematics

Slide 12

Slide 12 text

Generate 2 files: .actions.ts, .state.ts ng generate @ngxs/schematics:store --name app https://github.com/ngxs/schematics

Slide 13

Slide 13 text

Demo: Coffee https://ngxs-coffee.firebaseapp.com

Slide 14

Slide 14 text

Overview (State)

Slide 15

Slide 15 text

Overview (Actions) ● [Coffee API] Get Coffee List ● [List Page] Add ToCart (coffeeName) ● [Cart Page] Add One Cart Item (coffeeName) ● [Cart Page] Remove One Cart Item (coffeeName) ● [Cart Page] Remove Cart Item (coffeeName) ● [Pay Component] Empty Cart

Slide 16

Slide 16 text

Overview (Actions) GetCoffeeList AddToCart AddOne RemoveOne Remove EmptyCart

Slide 17

Slide 17 text

Overview (Selectors) Coffee List Cart List Total Amount Total Quantity

Slide 18

Slide 18 text

Overview (Selectors) ● [List Page] Coffee List ● [Cart Page] Cart List ● [Pay Component] Total Cart Amount ● [Header Component] Total Cart Quantity

Slide 19

Slide 19 text

Major NGXS Concepts Component Actions Store Plugins Backend dispatch m utate select

Slide 20

Slide 20 text

Rxjs is awesome, but is it a must?

Slide 21

Slide 21 text

Effects can be painful

Slide 22

Slide 22 text

Make use of Dependency Injection (DI)

Slide 23

Slide 23 text

Making Actions Asynchronous

Slide 24

Slide 24 text

Plugins https://ngxs.gitbook.io/ngxs/plugins/intro

Slide 25

Slide 25 text

NGXS is extendable

Slide 26

Slide 26 text

CLI Router Storage Form Logger Websocket

Slide 27

Slide 27 text

Labs https://ngxs.gitbook.io/ngxs/ngxs-labs/intro

Slide 28

Slide 28 text

Innovation without Compromising Stability

Slide 29

Slide 29 text

Emitter - Get rid of Actions (until you really need them)

Slide 30

Slide 30 text

Dispatch Decorator Immer Adapter

Slide 31

Slide 31 text

Extensive Documentation https://ngxs.gitbook.io/ngxs/

Slide 32

Slide 32 text

Do you know why it’s called NGXS? https://youtu.be/rkn73khwfWU?t=1582

Slide 33

Slide 33 text

Thanks for all contributors https://github.com/ngxs/store/graphs/contributors Austin Daniel | Mark Whitfeld | Danny Blue | Leon Radley | Max Ivanov

Slide 34

Slide 34 text

Try me! > Twitter: @JecelynYeen Slides: https://speakerdeck.com/chybie/ngxs Demo: https://github.com/chybie/ngxs-coffee Demo (Emitter): https://github.com/chybie/ngxs-coffee/tree/emitter-demo

Slide 35

Slide 35 text

Resources - Why another state management framework for Angular? - NGXS official site - ngAir Live Video Podcast about NGXS - Announcing NGXS 3.1 - Announcing NGXS 3.3