Angular Architecture - Abstraction layers

Now that we have explored how modular design can be achieved in a standalone Angular application, let's take a closer look at how our application operates and functions by examining it through the lens of abstraction layers.

Abstraction Layers

The concept behind this pattern is to divide the application into discrete layers and establish communication protocols between them.

The pattern aims to split the application into three distinct layers, namely:

• Core Layer
• Abstraction Layer
• Presentation Layer

---

Core Layer

The Core Layer is the central implementation hub for the core application logic, including all data manipulation and external communication. This layer also includes essential business logic, such as API calls for data retrieval.

It's main parts are services for making API calls and/or state management which in case of Angular could be NgRx, NgXs, custom implementation using Subjects or other.

• API Services have sole purpose to facilitate communication with API endpoints and nothing more.

• State Management Solution serves as a centralized, immutable data store for the application. By incorporating an Abstraction Layer, we can render our components independent of both the State Management Solution and API/Data Services. This approach makes it much easier to migrate to other data management solutions in the future, as we won't need to modify the Presentational Layer (i.e., the Components).

Abstraction layer

The abstraction layer sits between the presentation and the core layer and handles communication between them.
Since, the goal is not to inject API and state providers directly in the presentation layer, rather, we can inject the facade service and use it to interact with the core layer.

So abstraction layer:

• is implemented as Angular providers/services named facades (example: movies.facade.ts)
• exposes streams of state and interface
• is used to store and dispatch actions, observable emissions and expose observables and signals for components to use.

Presentation layer

The presentation layer (UI) layer is where all Angular components reside. Its primary responsibility is to present the application's UI and delegate user actions to the core layer through the abstraction layer.

Inside of presentation layer we have:

Smart/container components:

• can pass data down to dumb components
• have facade/s and other services injected
• communicate with core layer through facades
• react to events from dumb components
• are usually page components (meaning they are routable but it is not case)

Dumb/presentational components:

• recieve their data through @Input() and pass events and data through @Output()
• do not contain any application logic
• mostly kept in SharedModule or at specific module components folder

References:

• dev-academy.com/angular-architecture

• medium.com/@getrohith.sathya

• blog.brecht.io/scalable-angular2