MicroFrontends

Hearing the term Microfrontend may make you feel frustrated or even agitated. You might think, “what is this new stuff now?” or “Why should I move to it when I am happy and comfortable with my current approach towards building applications?”.

Before dismissing Microfrontend, let’s give Microfrontend a chance to present its case because it might just be the next BIG THING.

Let’s first see what Micro-Frontends are actually. Let’s dive in.

What is Micro-Frontend ?

MicroFrontend is an approach to build applications, and this architecture method heavily takes inspiration from microservices architecture.

In microFrontend, we distribute our application’s components as sub-applications and build each component as a separate application. In the end, whip all sub-applications together to create our application; well, at least this is its gist.

Following the path of micro-frontend can have many different approaches, and we will discuss some of those later in this blog.

But first, let’s ponder over the question. Why? Why do we need to use this micro frontend architecture?

Why Micro-Frontend ?

Some of the key benefits that I have personally experienced from using micro frontend are:-

• Codebase becomes way smaller and easy to maintain.
• The interdependence between two components or two services becomes non-existent.
• It gives you the ability to change any particular component independently without interfering with the functionality of other components.
• Multiple teams can be used to build multiple components, and those teams can choose to use different technologies to build these components.

To make teams that create different components separately,  we have to divide our teams around vertical slices of business functionality rather than their technical abilities.

Approaches to  Build Micro Frontends

There are many ways to implement micro frontends, they can be grouped into five categories.

• Server-side template composition
• Build-time integration
• Run-time integration via iframes
• Run-time integration via JavaScript
• Run-time integration via Web Components

We will go through a bit about Build-time Integration and mainly focusing on Run-time integration via Javascript.

Build-time Integration

One of the ways to implement micro frontend is build-time integration, which simply translates to is you write your sub-applications and publish them as NPM packages, which will be used  by the host application to integrate. This approach may feel very familiar to the javascript developers as most of the time javascript applications are built using npm packages.

You can also use react-router-dom for routing and bootstrap to handle CSS in your host application.

Run-time Integration

Run-time integration via Javascript is a whole different ball game from Build-time integration. The biggest advantage and difference between the two is that this approach allows separate teams to update their Javascript bundles anytime they want.

Almost all the Javascript applications use build-time integration, but that does not mostly serve our purposes to follow micro frontend. While on the other end , run-time integration does provide us with the option of using most of the benefits that micro frontend architecture provides us such as the ability to create different components by different teams and removing inter-dependency between two services or components and also being able to update or release them separately. That is one of the main advantages of using microfrontend.

So now, let’s see how we can achieve this with the help of Webpack Module Federation.

Webpack Module Federation

Webpack is a static module bundler that helps to compile JavaScript modules and create a bundle of all your javascript that your web app requires. Let’s see a small example of how to implement webpack module federation.

Micro frontend Architecture generally has two types of sub-applications 

1.- Host Container

2.- MicroService Container

Below is the webpack configuration example of a MicoService Container:-

Below is the example of webpack configuration of Host Container –

Conclusion-

In conclusion, we can say that microfrontend  heavily draws inspiration from the concept of microservices. It is an architecture used to slice up the applications into smaller sub-parts that helps in releasing and updating small components of an application independently.