Microfrontend Architecture in plain english

With the help of microservice architecture, we achieved code modulation, easy deployment, increment on performance, and also devs can contribute to only one system or server. it also removed common problems like conflicts in global variables, code modularity, function overriding, function overloading, etc which are quite common issues in monolithic apps. but now, we are facing those same problems on the frontend side to overcome this problem microfrontend came to the rescue.

ThoughtWorks was the first organization that coined the word micro frontend. they applied the concept of the microservice architecture on the front end. microfrontend is frontend architecture in which you break down your whole website or web app into micro web apps which are created by independent teams.

microservice architecturemicrofrontend architecture

as you can see from the above picture microfrontend is not horizontal architecture it is vertical architecture and it is not just frontend architecture it is also organization architecture. as you can see from the above picture that teams will work independently to achieve their goal without a caring goal of the other team. for example –

Team A is only responsible for the homepage.

Team B is responsible to create an algorithm which finds products which user type in the text box.

Team C for showing specific product details

Team D for checkout.

Let‘s see a practical example of microfrontend. Here is the homepage of bit.dev

Homepage of bit.dev

if you access this webpage and hover any elements it will show you a border line with a component name and team name. The whole web app is created using microfrontend architecture.

The whole web app is created by two teams. A “base-ui” set of components, owned by our front-end infrastructure team. The second one is “evangelist’”, owned by our marketing team.

Both teams work independently with different codebases and release their changes without interfering codebase of other teams. Both teams also do independent testing and deployment

Due to vertical architecture, both teams also can contact their team stakeholders, project managers.

Who is using Microfrontend?

Bit.dev
Microsoft
thoughtswork
spotify
IKEA
DAZN
upwork
soundcloud

Now, in your mind may be a question will arise but how are you going to integrate all apps? Let’s get into this.

Integrating micro apps

There are two ways you can integrate micro apps – build time and runtime integration and last custom elements with server-side includes

Build Time Integration

Build Time integration is nothing but client-side integration

Now one of the easiest ways to integrate with other micro apps is using custom elements Because teams will be going to use different client side frameworks. If you don’t know about custom elements please first read that. The majority client side frameworks support custom elements.

In simple terms Teams will put their code between elements or they wrap it under tags (eg:<first-page> <!— code –!> </first-page/>). you have seen this type of thing if you ever worked in angular.

Here is a simple client-side example. You can see the code and live demo

Picture from micro-frontends.org

Here you can see the integration of components. All components are created by independent teams. Custom elements will make it easy to connect with other custom elements. But custom elements are not alone a solution let’s explore some other options also.

Another strategy is installing all components as dependencies. In typical SPA you will find dependencies in package.json. Each and every team can create their own components and publish them. That’s what Bit.dev did it.

Javascript

<app-homepage>
<app-about></app-about>
<app-contact></app-contact>
</app-homepage>

Runtime Integration

Now there are three strategies here –

1)custom elements with server side include

2)webpack 5 module federation

3)IFrame solution

Custom elements with server side include

As the name says everything custom elements with server side includes. In this strategy, custom elements will be going to use with the server side includes. #include is the part of the server side includes.

In brief, when you put #include between custom tag It will render the response of the request between components. Most servers support the server side includes. An example is given below

Javascript

<custom-page>
<#include virtual=”/response”>
</custom-page>

Here is the code of the example

Picture from micro-frontends.org

As you can see from the above example whenever clicked on tractors it is making requesting for content and response of request is getting rendered.

But the server side includes come with a cost. The server side includes taking time to render because the content comes from request. Client-server architecture is costly and it will become more costly if the database came into the picture. To overcome this problem caching comes to the rescue. You can do hard caching to remove rendering time.

Webpack 5 module federation

So, recently webpack 5 collaborated with Zack Jackson to create webpack plugin. That plugin is module federation and it is still in beta. So, what this plugin does is import the javascript code dynamically from other web apps in runtime.

This plugin not just import js code dynamically. It also resolves the problem of code dependencies and bundles size and it also supports lazy loading in react and also suspense fallback.

IFrame solution

Spotify used this solution, but after they ditched this solution. In, Iframe strategy. IFrame tag is going to use just like you embed YouTube videos or social media posts but here you will embed your microapps. But the problem is how to make interactive all those microapps with each other.

Advantages of microfrontend

Freedom of technologies

Teams can use their favorite framework without caring about any other team. For example – Team A can use React for the frontend, Team B can use angular, Team C can use Vue and Team D can use simple HTML. You can use any framework without caring about another team. This removes common problems like dependency management

Small Codebase

Another advantage that microfrontend gives a smaller codebase. In monolithic frontend apps problems like global variables conflict, function overriding, function overloading is quite common. Using microfrontend architecture our codebase becomes smaller and due to this it will less hard to find errors or bugs and also maintaining is also become easy.

Dependencies management

Because all teams are working independently and to achieve their own goal dependencies will reduce. Team A will not be going to install dependencies of Team B this reduces dependencies and also the size of the web app.

Independent deployments

microfrontend architecture reduces the pain of deploying the whole frontend app and creating a whole pipeline for the build, test, deploy.  Because all independent teams own a small part of web apps they can create their own pipeline to build, test and deploy which is also known as CI/CD.

Goal focused team

In microfrontend architecture, the team will become more focused because the team is working for achieving their specific goal without caring about any goal.

Problems with microfrontend

Local Development Setup

Every development of revolutionary web app started with local development. If all teams are using hot reloading then it will be easy to start local development. But there are still problems like running concurrently with local servers. Let’s say if there are 5 microapps then you have to run 5 servers with 1 server of container app. So, here all microapps are dependent.

Integration testing

Just like the local development problem. Same problem we will face in testing because in integration testing we have to test the whole app. So, here apps will be dependent on each other. most integration testing is done in local development. To resolve problems of testing we can write test cases and we can test in production.

CSS Conflicts

In all web apps, class names will be going to use. But what if all microapps are using the same names. It will be going to override all CSS properties. The whole web page will become a mess.

Duplicated dependencies and bundle size

Because microfrontend cut out monolithic frontend web app into the small codebase. There will be also some dependencies in microapps. It is possible there will be duplicate dependencies in other apps. Due to these dependencies, it also increases bundle size.

Conclusion

In simple language, Microfrontend is all about cutting out big monolithic apps into a smaller codebase and integrating them. Other than architecture it is also organizational architecture where independent teams create their own apps to achieve their specific goals. In the coming years, microfrontend will become more complex and it will remove current problems in architecture. Although, we have seen the benefits of microfrontend also.

follow me on insta @yashraj.dev