Facades in Angular

A Facade is a structural pattern that provides a simple interface to a complex object system, library, or framework. In DDD facades, also known as Application services, we use them to represent the domain logic. Let's see what advantages we are getting using facades in Angular.

It often happens when you're faced with the need to make your code interact with a wide range of objects, entities, classes that belong to different libraries or third-party frameworks. Making it work correctly can be very difficult. You need to initialize those objects, spend resources to track all dependencies, keep watching for the correctness of the order of the executing method, and so on. Encapsulation is the best way to avoid all these complications. Facade allows adding as much encapsulation as you need to decrease complexity. There is a direct inverse correlation between encapsulation and complexity; the more encapsulation, the less complexity.

Here is NgRx - a state management solution that represents a place where the state of our application gets stored. This place is an immutable centralized store with which we interact as follows:

• We select slices of state from the Store using Selectors, which we can then render in our Components;
• To choose slices of state, we are using Selectors, which are renderable in components;
• We are sending Actions to our Store;
• Our Store redirects our Action to our Reducers to recalculate our state and replaces the form within our Store;
• To recalculate the new state and replace the old one, Store dispatches Actions to Reducers.

It would be better to explain the conception on the diagram: As we go further, we use NgRx more and more, and interactions become more and more complicated. Here the Facade pattern rushes to the rescue. It makes it simple by wrapping NgRx in a dedicated place. It allows only the Component to interact with Facade. Thus, it protects Components and makes the NgRx artifacts refactoring more reliable.

Using the Facade pattern significantly simplifies the application. Since the user of the Facade is completely indifferent whether it manages the state by itself or delegates them to a state-management library, the Facade provides only those functions that the user needs at the moment. Here is an example of the Facade that will encapsulate a lot of interactions with the Store and coupled to NgRx: The external simplicity of the Facade allows us to hide all complex and unnecessary functions, thereby ensuring their reliability. Given the fact that Angular is a complete framework that offers everything you need from scratch to production-ready applications using the facade pattern, it becomes a powerful tool to create simple and reliable APIs.