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.
Table of Contents
Who is using Microfrontend?
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.
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.
Now there are three strategies here –
1)custom elements with server side include
2)webpack 5 module federation
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
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
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.
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
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.
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.
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.
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.
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.
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
Learn programming on codedamn
Codedamn is an interactive coding platform with tons of sweet programming courses that can help you land your first coding job. Here's how:
- Step 1 - Create a free account
- Step 2 - Browse the structured roadmaps (learning paths), or see all courses.
- Step 3 - Practice coding for free on codedamn playgrounds.
- Step 4 - Upgrade to a Pro membership account to unlock all courses and platforms.
Programming is one of the most in-demand jobs today. Learning to program can change your future. All the best!
Sharing is caring
Did you like what Mehul Mohan wrote? Thank them for their work by sharing it on social media.