ngxs

Transcript

1. State Management Made Simple

2. @JecelynYeen - Google Developer Expert (GDE) - Blogger - Software

   Architect - Women Who Code KL Director - ng-MY Conference Organizer

3. state management pattern + library for Angular

4. predictable state mutations

5. None

6. Why Yet Another State Management Solution?

7. Pick your flavor!

8. Reimagine State Management for Angular

9. Reduce Boilerplate

10. Rethink Developer Ergonomic & User API

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

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

    https://github.com/ngxs/schematics

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

14. Overview (State)

15. 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

16. Overview (Actions) GetCoffeeList AddToCart AddOne RemoveOne Remove EmptyCart

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

18. Overview (Selectors) • [List Page] Coffee List • [Cart Page]

    Cart List • [Pay Component] Total Cart Amount • [Header Component] Total Cart Quantity

19. Major NGXS Concepts Component Actions Store Plugins Backend dispatch m

    utate select

20. Rxjs is awesome, but is it a must?

21. Effects can be painful

22. Make use of Dependency Injection (DI)

23. Making Actions Asynchronous

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

25. NGXS is extendable

26. CLI Router Storage Form Logger Websocket

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

28. Innovation without Compromising Stability

29. Emitter - Get rid of Actions (until you really need

    them)

30. Dispatch Decorator Immer Adapter

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

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

33. Thanks for all contributors https://github.com/ngxs/store/graphs/contributors Austin Daniel | Mark Whitfeld

    | Danny Blue | Leon Radley | Max Ivanov

34. 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

35. 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