Nowadays, a multiservice application is a common approach from the Backend point of view. How about the Frontend?
There is something similar also for the Frontend. It is called Composite UI or Micro Frontend architecture.
Read the article to the end where I will tell you how to use Composite UI in Angular!
First of all, let me explain the differences between a Monolith and a Composite architecture:
Monolith Architecture:
From the Monolith architecture point of view, the UI is one application developed using one programming language (Angular, React, etc...).
This is a good approach for a small team. The application will be easy to understand, develop and maintain.
Composite Architecture:
A composite architecture is based on UI microservices.
By comparing Composite with Monolith architecture, the first one is a more complex approach.
This architecture is used in bigger teams working with different UI technologies. Every team is developing one UI MicroService and all of these will be integrated into the Base/Main page.
Advantages of using Composite architecture:
-
Working with different technologies - for example, one team may develop the “UI MicroService 1” using Angular and another team may develop the “UI MicroService 2” using React JS
-
Scaling up to multiple teams
-
Fast development
Disadvantages of using Composite architecture:
- Integration in Base page
- Communication between UI MicroServices
- Missing core functionalities (for example the routing is not working properly in Angular)
- CSS - the style is kept in the “Base page” which means it is hard to test the modifications for each UI MicroServices.
Is Composite UI the future of development? Maybe yes, but I will recommend using it only if it is necesary since I encountered a lot of issues and the development became really hard from my point of view.
How to use Composite UI in Angular? Angular elements are the answer.