Download as PDF, PPTX
![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"
]
}](https://image.slidesharecdn.com/statemanagementforenterpriseangularapplications-180412134100/75/State-management-for-enterprise-angular-applications-2-2048.jpg)
Uploaded byIlia Idakiev
State management for enterprise angular applications
This document discusses state management for enterprise Angular applications. It covers different state management approaches like Flux, Redux, and NgRx/Platform. It describes the types of data that need to be managed in applications. It also discusses layering concepts and different patterns for structuring application logic and state, including transaction scripts, domain models, and separating concerns with services. Reactive extensions and RxJS are presented as ways to manage asynchronous and reactive state changes.
More Related Content
![[@NaukriEngineering] Flux Architecture](https://cdn.slidesharecdn.com/ss_thumbnails/flux-161117094040-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to State management for enterprise angular applications
State management for enterprise angular applications
- 1. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS
- 2. A B OU 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.
- 4. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS TYPES OF DATA THAT WE HAVE TO MANAGE ▸ Data that comes from the server and whether it's pending or resulted in an error ▸ UI state like toggles, alerts and errors messages ▸ User input, filters and search queries ▸ Other
- 5. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS SIMPLE APPLICATION (COMPONENT - SERVICE)
- 6.
- 7. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS SIMPLE APPLICATION (COMPONENTS - SERVICE)
- 8.
- 9. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS FLUX ▸ Flux is an architecture for creating data layers in JavaScript applications. ▸ It places a focus on creating explicit and understandable update paths for your application's data (data flows in one direction) ▸ Helps tracing changes during development and makes bugs easier to track down and fix
- 10. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS FLUX PARTS ▸ Dispatcher - The dispatcher receives actions and dispatches them to stores that have registered with the dispatcher. Every store will receive every action. There should be only one singleton dispatcher in each application. ▸ Store - A store is what holds the data of an application. Stores will register with the application's dispatcher so that they can receive actions. The data in a store must only be mutated by responding to an action. ▸ Action - Actions define the internal API of your application. They capture the ways in which anything might interact with your application. They are simple objects that have a "type" field and some data. ▸ View - Data from stores is displayed in views.
- 11. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS FLUX
- 12. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS REDUX ▸ Predictable state management ▸ Architecture that keeps the core principles of Flux by having unidirectional data flow ▸ Redux applications have only one global, read-only (immutable) application state ▸ This state is calculated by "reducing" over a collection or stream of actions that update it in controlled ways
- 13. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS WHY PREDICTABLE? ▸ Referential Transparency / Pure (Deterministic) Functions = Predictability ▸ Referential Transparency - An expression is said to be referentially transparent if it can be replaced with its corresponding value without changing the program's behaviour. ▸ Pure Functions - The function always evaluates the same result value given the same argument value(s). Evaluation of the result does not cause any semantically observable side effect or output, such as mutation of mutable objects or output to I/O devices.
- 14. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS REDUX IDEAS ▸ Single State Tree ▸ Actions describe updates ▸ Reducer apply updates
- 16. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS LAYERING ▸ One of the most common techniques for breaking down complex problems. ▸ Coherent structures that are easy to substitute and work with, without the need of understanding the other layers. ▸ Help us minimize dependences and are a good place for standardization.
- 17. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS LAYERING DOWNSIDES ▸ We can’t encapsulate all things so this sometimes results to cascading changes. ▸ Extra layers can harm performance.
- 18. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS THREE PRINCIPAL LAYERS ▸ Presentation - Displaying information. ▸ Business Logic (Domain) - The system logic. ▸ Data Source - Communication with database, messaging systems.
- 19. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS TRANSACTION SCRIPTS ▸ The simplest way to store domain logic. ▸ A transaction script is a procedure that receives an input from the presentation layer and processes it and replies back to the presentation. ▸ We have a simple procedure for each action that the user might want to do.
- 20. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS TRANSACTION SCRIPTS DISADVANTAGES ▸ Increasing domain logic. ▸ Duplication of code. ▸ We have a simple procedure for each action that the user might want to do.
- 21. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS REDUX
- 22. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS DOMAIN MODEL ▸ A conceptual model of the domain that incorporates both behaviour and data. ▸ System of abstractions that describes selected aspects of a sphere of knowledge. ▸ It is generally implemented as an object model within a layer that uses low- level layer for persistence and publishes an API to a higher layer to gain access to the data and behaviour of the model.
- 23. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS SERVICE LAYER ▸ A common approach in handling domain logic is splitting the domain in two. A Service Layer is placed over the Domain Model. ▸ The Service Layer acts as an API for the application. ▸ The minimal case for the Service Layer is to be a facade.
- 24. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS REDUX + MODEL
- 25. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS REDUX + MODEL + MIDDLEWARE
- 26. REACTIVE EXTENSIONS FORJAVASCRIPT
- 27. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS RXJS ▸ Library for composing asynchronous and event-based programs by using observable sequences. ▸ Extends the observer pattern to support sequences of data and/or events ▸ Adds operators that allow you to compose sequences together declaratively
- 28. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS RXJS INSIDE ANGULAR ▸ Routing ▸ Forms Validation ▸ State Management ▸ HttpClient Service
- 29.
- 30. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS 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.
- 31. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS ANGULAR WITH NGRX
- 32.
- 33. STATE MANAGEMENT FORENTERPRISE ANGULAR APPLICATIONS FOLLOW ME GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events) Twitter > @ilia_idakiev
- 34.