Introduction to Micro Frontends

Amol Kedari
2 min readMar 10, 2020

--

Today, in this article, I am going to give you a small introduction to Micro frontends and its architecture. Mainly I am focusing on What is Micro-frontends? What is the idea behind that? Why do we need it? What can we achieve by using this approach? and give a basic idea behind that.

First of all, let see how our traditional websites work, we have a monolithic client app, an API gateway and different microservices on a backend.

Monolithic App example

Microservices are designed on the basis of their functionality. On the other side, in the frontend, we have a monolithic app as we do not differentiate on the basis of functionality and/or business use case.

Let's understand the following architecture,

Micro Frontends App example

Earlier, we have different backend microservices but here we have different client app and each app is associated with particular backend service. This is what we called as Micro frontends.
In short, in micro frontends architecture, we separate a monolithic app into a different functional app. So we are designing a single simple, decoupled and independent deployed app based on business requirements.

By using micro frontends, we have a simple scalable app which is focusing on their business use case. We are avoiding a single point of failure as if one service is failed but the app won't get affected it runs well. It doesn’t affect other services. It is also easy to maintain, deploy and scale.

Let see a real-life example for e-commerce business, we have different microservices and based on that we have different client app embedded in a single e-commerce website.

Ecommerce-microfrontend-example

In the next section, we will see how we can implement micro frontends approach and different ways of doing that. Follow https://medium.com/@kedarisamols/implementing-micro-frontends-and-beyond-e4dfe7c78f48

--

--