#1 Microfrontends - Introduction & its Integration types

Hello Everyone,

It has been a long time since I have written a blog but better late than never.
Welcome back to my blog 🙏 & I hope you are all safe and that this blog finds you in good health ️🫶.
In this blog, let's learn about Microfrontends and its integration types.

Introduction

Microfrontends is inspired by the microservices architecture, which breaks down monolithic applications into smaller, loosely coupled services. Similarly, microfrontends aim to address the challenges associated with large, monolithic frontend codebases by breaking them into smaller, more maintainable pieces.

Why to use them?

In simple words,

• As stated in the introduction, it divides huge and monolithic applications into smaller, easily maintained apps.
• Flexibility to use different frameworks for smaller apps depending on the requirement & usage.
• Each microfrontend can be developed, tested and deployed in isolation without dependency.

Integration Types

There are three major types of Integrations in Microfrontends.
Let's understand each type with an example,

Runtime/ Dynamic Integration

Let's take a banking application and we have different segments such as Personal loans, Credit cards, etc.

Each Segment acts as a microfrontend and these are developed, tested and deployed in isolation.
The banking application loads the individual segments on a demand basis.

In Runtime Integration, we follow the below steps

• Suppose we have our banking application at https://banking.com
  (container app)
• Each team develop and test their segments in isolation
• During deployment, each segment is deployed at https://banking.com/[segment]
• When there is a request for a particular segment, it loads it dynamically.

Benefits

• Each Microfrontend is deployed independently at any time

Drawbacks

• The setup is far more complicated.

Build-time Integration

Let's go with the same example,

The most common feature of any banking application is a calculator.

So, It acts as a microfrontend which is individually developed and used by any segment of banking application. For each segment, they follow different calculations for example:
In personal loans, we have processing fees, interest calculations, insurance deductions, etc
and similarly for credit cards, Home loans, etc.

Here individual apps get the calculator code access even before the Personal loan/Credit card app loads.

So, In build-time integration, we follow the below steps

• The respective team develops the Calculator App with all flavours of segments.
• then they will test and publish it to a registry (NPM) with a certain version.
• Now, if the Personal Loan(PL) team wants to use it, add it as a dependency.
• PL team built their app which includes a calculator in it.
• Now, they will deploy the code.

Benefits

• Easy to setup and understand

Drawbacks

• Each segment has to be redeployed whenever they update the Calculator app

Conclusion

Now that we started our Journey towards Microfrontends. stay tuned for more content on it. In my next blog, we will learn one of the most important topics i.e. Module Federation and Shared modules.

---

Here we go, That’s it folks for this short blog.
I hope everyone liked this blog.
If yes, please share it with your friend.

For more exciting frontend content please follow me.
Let’s Learn, Explore and Excel together :)

via GIPHY

Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning 📖✍️.

Abhishek Kovuri, UI developer