The document discusses ngrx, a suite of libraries designed to enhance state management in Angular applications, leveraging concepts from Redux. It highlights various ngrx components such as @ngrx/store, @ngrx/effects, and @ngrx/router-store, which facilitate effective project development, testing, and debugging. Additionally, it briefly mentions Angular/Nx, an open-source toolkit aimed at building enterprise-grade applications by providing a structured approach to project organization.

1. NGRX / PLATFORM
Predictable Reactive State Management for Enterprise
Applications

2. A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
"Developer / Manager / Owner @ HNS",
"Lecturer in 'Advanced JS' @ FMI",
"Contractor / Consultant",
"2 Angular Courses @ HB (2016 - 2017)",
"JavaScript Courses"
],
"involvedIn": [
"SofiaJS", "BeerJS", "Angular Sofia"
]
}

3. TYPES OF DATA
➤ Application State
➤ UI State
➤ Domain-specific Data

4. SMALL ANGULAR APPLICATION EXAMPLE

5. One week later ....

6. MEDIUM ANGULAR APPLICATION EXAMPLE

7. This complexity is difficult to handle as we're mixing two
concepts that are very hard for the human mind to reason
about: mutation and asynchronicity.

8. REDUX

9. REDUX CONCEPTS
➤ Single source of truth
➤ State is read-only
➤ Changes are made with pure functions

10. ANGULAR REDUX EXAMPLE

11. Separation of concerns (SoC) is a design principle for
separating a computer program into distinct sections, such
that each section addresses a separate concern.

12. ANGULAR REDUX EXAMPLE

13. NGRX
NgRx is suite of libraries that empower Angular developers to be
more effective at building large projects.

14. NGRX / PLATFORM
➤ @ngrx/store - RxJS powered state management for Angular applications, inspired
by Redux
➤ @ngrx/effects - Side Effect model for @ngrx/store to model event sources as
actions.
➤ @ngrx/router-store - Bindings to connect the Angular Router to @ngrx/store
➤ @ngrx/store-devtools - Store instrumentation that enables a powerful time-
travelling debugger.
➤ @ngrx/entity - Entity State adapter for managing record collections.

15. NGRX 4
➤ Out of the box support for lazy loading new reducers.
➤ Improved testing using marbles.
(https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md)
➤ Redesigned router integration so resolvers and guards can access the new
state.

16. Let's separate the side-effects ...

17. ANGULAR REDUX EXAMPLE

18. https://github.com/ngrx/platform/tree/master/example-app

19. LIVE CODING TIME

20. ANGULAR / NX

21. ANGULAR / NX
➤ Open source toolkit.
➤ It is designed to help companies build enterprise grade Angular applications. Usually
this companies have several teams building multiple apps using multiple shared libs.
➤ It provides an opinionated approach to application project structure and patterns
using angular/schematics.

22. WHAT IS ANGULAR / NX
➤ nrwl/schematics - Code generators that can be used to create files and projects
➤ @nrwl/nx - An Angular library of classes and functions that can be imported

23. DEMO

24. FOLLOW ME
GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev

25. THANK YOU!