This presentation by Denys Lymarenko (Software Engineer, Consultant, GlobalLogic, Kharkiv) was delivered at GlobalLogic Kharkiv Embedded TechTalk #5 on December 12, 2019. During this talk, we were reviewed Angular state management libraries and the difference between them. Also participants had a small demo on how to build apps with no dependencies on specific library and an easy way to migrate to any other library in the future. Event materials: https://www.globallogic.com/ua/events/kharkiv-embedded-techtalk-5/

1. 1
One more State management in Angular
(NGRX vs. NGXS vs. Akita vs RXJS)
Presenter Denys Lymarenko
Software Engineer, Angular trainer
December 2019

2. 2

3. 3

4. 4
App Component
Component 1
Component 2 Component 3
Component 4
Component 5 Component 6

5. 5
App Component
Component 1
Component 2 Component 3
Component 4
Component 5 Component 6
Service

6. 6
Actions
Current State
New State
Reducer
Store
Component

7. 7
JavaScript framework lifecycle

8. 8

9. 9

10. 10
ActionsActions
Store
Reducer
ActionAction Effects
Component Service
Selector

11. 11
Components Actions
Store
Plugins
Backend
Select
Dispatch
Mutate

12. 12
Backend API
Service
Store
Query Query
Query
Query
Updates Streaming Data
Component
Actions (methods) Rendering
Interacting with other queries

13. 13
Tooling Redux Devtools Schematics
+ +
+ +
+ +
Services - -

14. 14
Tooling Logo
7
5
10
Services 0

15. 15
Boilerplate code Complexity
Heavy Low
Low Low
Low Low
Services Medium Medium

16. 16
Features NGRX NGXS AKITA Services
Forms sync 3rd party lib Core Core -
Transactions - - + -
Router sync Core Core - -
Entity adapter + labs + -
Memorized
Selectors
+ + + -

17. 17

18. 18

19. 19
Component
Facade
Effects
Store State Sectors Actions Reducers

20. 20
Demo

21. 21
Thank you!
Denys Lymarenko
Github: LimarenkoDenis
Instagram: instalimar
denys.lymarenko@globallogic.com