In this approach, each microservice has its own UI limited to the functionality it performs. So, along with the backend, the frontend is also decomposed as per the scope of the individual microservices, as follows:

This approach eliminates all the limitations of the monolithic frontend but then introduces certain new challenges. Though microservices are split as self-contained and independent executable units, and the final frontend should be presented with a single interface. In the micro front approach, the challenge is to combine the UIs of individual microservices in a single format. There are a number of ways of doing this. Though they overcome the limitations of the first approach, they introduce certain other issues:

• Synchronize the UI across the microservices: In this way, just copy and paste the UI of all services to each other and use the API gateway. Though this seems simple, it produces huge maintenance issues.
• IFrame: Use a separate layout where the output of individual microservices can be clubbed with IFrame. However, this approach is also not brilliant because IFrame has its own limitations.
• HTML fragments: You can write your own JavaScript code and glue the content of the microservices through HTML fragments. However, there are some limitations, and also lots of custom script you have to write on your own. Also, there may be a chance of services' scripts and styles clashing.