Benefits of Using Micro Frontend Architecture

Micro Frontend architecture is an approach like microservices that is implemented on the frontend. Microservices are a combination of different services running on a server for distributing the load on each service equally. Same as microservices architecture, how this approach can be used on the frontend also.

Using micro frontend architecture, we can combine different frontend technologies like React, Angular, Vue, etc. in a single application.
Benefits of using micro frontend services:-
1. Different development teams can work easily on the frontend app.

2. Does not affect the whole project if there is some issue with one frontend service.

3. Individual teams can work on multiple applications using different technologies.

Micro frontend helps us to build different services in different technologies and combine them into a single application. Suppose we simple E-Commerce application, in that application we have:-

• home screen,
• products screen,
• cart screen and
• a checkout screen. 

There are four common approaches that are available for achieving micro frontend architecture:-
1) Runtime Integration:-
    In this approach, we have to include each service in index.html file using <script> tag. And define the logic to render the application according to our requirements.
   There is a library available for implementing this architecture know as Single SPA, you can read more about this by visiting the link, there is complete documentation for using a single spa.

2) Build time Integration Using Components:-
  The micro frontend can be achieved at build-time integration by using web components. We can also react to components or any component-based framework for achieving this.
  There are some issues with build-time integration like different teams not be able to deploy the build independently. However, we can resolve this issue using modern tools.
  For using built time integration you can visit Bit.

3) Using IFrames:-
   Iframes also help us to achieve micro frontend architecture. These are the part of HTML Document and can be very useful for implementing different micro frontend apps into a single one. Using Iframes, the global variables and styling do not affect other services. The best example of using Iframes for the micro frontend is the Spotify music app. 

4) CDN Approach:-

     This approach basically runs on a server. The server combines the different application view into a single application and returns as CDN to the frontend. For this, we have to be aware of page-specific content from HTML fragmented files. Basically on the server we have to pass the variables and on the basis of variable server return the desired app or component in response. For the CDN approach, we have to take extra precautions for the response cache from the server.