Monolith vs Composite UI - Future of UI Development? by@mariustilvan

Monolith vs Composite UI - Future of UI Development?

A composite architecture is based on UI microservices. 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. The development became really hard from my point of view. I will recommend using `Composite UI` only if it is necesary. Read the article to the end where I will tell you how to use `Compositionite UI in Angular`****!
image
Marius Tilvan HackerNoon profile picture

Marius Tilvan

I am a senior Angular Full-Stack consultant / Angular Contributor / contractor / freelancer with 9+ years of experience.

linkedin social icon

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:

image

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:

image

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.

react to story with heart
react to story with light
react to story with boat
react to story with money
Marius Tilvan HackerNoon profile picture
by Marius Tilvan @mariustilvan.I am a senior Angular Full-Stack consultant / Angular Contributor / contractor / freelancer with 9+ years of experience.
Read my stories
L O A D I N G
. . . comments & more!