Micro Frontends: What, Why and how?

Muzi 2021/06/12 13:56:01

Micro Frontends

In this artcile we will cover the following;

1. What are micro frontends?

2. Why are they interesting?

3. Potential disadvantages


What is a micro-frontend?


It’s just code for a portion of a webpage. It’s not the the whole page. In this model, the whole page that is hosting portions (components) of the whole page is called the host page. Also, we have a micro frontend framework which sits between the host page and the micro frontends. This framework is responsible for loading and

unloading the micro-frontends. In essence, there are three key pieces in the micro-frontend architecture,

1. Micro Frontends

2. Micro Frontend Framework

3. Host Page


Basically, micro frontends extends the concepts of micro services to the frontend space.






Figure 1.1

In the amazon web page screenshot in figure 1.1, there are user interface elements that we can identify as micro front end potential targets. The product cards (marked by a red square), could be classified as a micro frontend. Also, the footer and header could also be classified as micro front ends. Basically, we look at the page as composition of features which could be developed differently, by different teams and deployed separately


Why are they interesting?


The pattern of micro frontends come with a lot of interesting benefits. Some of these advanatges become more and more obvious as applications get bigger and bigger. Some of the notable benefits of micro frontends include;

1. Ability of teams to work independently on different portions (companents/micro frontends) simultaneously.

2. Reusabilty: In this pattern code could be used in different places inside a single application and across multiple applications.

3. Micro front ends are not technology specific. These allow people from all different technological backgrounds to be able to adapt this patern.


Potential disadvantages

Micro frontends tend to increase the complexity of developing, testing and deploying an application. In development, since the application has now been broken down into small bits, there is an increased need in coordination between teams. For testing, it is important to test the whole user experience of the application. This becomes a challenge in a micro frontend architecture since different applications running in different environments are needed to test for a complete experience. In deployment, there are downside also. In this pattern each component will be deployed independently which may cause duplication of common dependencies. This will tend to increase the bundle size of the application.

A meticulous web developer with over a year of front end experience and passion for responsive web design.