Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.


What is microservices

Microservices is an architectural style that structures an application as a collection of loosely coupled services 

Microservice principles

  • Lightweight protocol between services
  • Small services, one job per service
  • Service independence
  • Easier to understand, develop and test
  • Speeds up development 
  • Running multiple applications on a single browser 


A micro frontend is a microservice that exists within a browser.

Micro Frontends are sections of your UI, often consisting of dozens of components, that use frameworks like React, Vue, and Angular to render their components. Each micro frontend can be managed by a different team and may be implemented using its own framework. It is practical and suggested to use just one framework for all your micro frontends, although you may add additional frameworks when migrating or when experimenting.

Each micro frontend has its own git repository, its own package.json file, and its own build tool configuration. As a result, each micro frontend has an independent build process and an independent deploy / CI. This generally means that each repo has fast build times.

History of MicroFrontend

  • 2011: “Microservices” themselves premiered at an event for software architects in 2011, where the term was used to describe a style of architecture that many attendees were experimenting with at the time. Netflix and Amazon were among the early pioneers of microservices.
  • Nov 2016: After the great success of the Microservices architecture, Thought Works added to the technology radar the term “Micro Frontends” for the first time in Nov 2016, as a frontend architecture similar to microservices for frontend development. This architectural design came because of the monolith microcontent with Single Page Applications that created similar challenges to the backend monolith architecture. after that, companies started to implement frameworks that could help build frontends using this new architecture. As an example, it depends on Build-Time composition.
  • 2019: Martin Fowler wrote his article about Micro Frontends and promoted Micro Frontends architecture in his article “Micro Frontends.”
  • 2020: By the end of 2020, Jack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5. The Module Federation Plugin changed the world of Micro Frontends to a totally new level. Now, you can include a remote component to your project as you have developed it locally without depending on the build or deployment or even having a webserver to run it. This is the future of Microphones. Companies started to adopt the Module federation approach to migrate from a monolithic application to Micro Frontends.
No alt text provided for this image

Architecture of MicroFrontend

Why use micro frontends

The Micro-Frontends architecture was introduced to solve multiple issues with the current SPA frontend development. I experienced the growth of a website to the limit that it becomes tough to scale, modify, or even train new engineers to be part of it. With such a monolithic system, developers will be blocked on each other just to apply a small change. Here are some of the benefits of Micro-Frontends:

  • Team Scalability
  • Single responsibility
  • Reusability
  • Technology agnosticism
  • Learning Curve

Advantages of Micro Frontend:-

Some of the key benefits you can get from micro frontends are:

  • Better scalability;
  • Faster development, as teams can work independently. This benefit, however, is applicable only if your project is big and has more than one front-end team;
  • You can use multiple frameworks in your application. However, it should be done mindfully and transparently to avoid confusion. Nevertheless, you have a choice of what to use for a particular task. What’s more, a development team can choose their own technology;
  • Deployment independence. The delivery of your micro frontend will not affect the entire application. The changes will affect precisely that part of the business process that it has covered;
  • With micro frontends, you can upgrade, update, or even rewrite parts of the frontend more smoothly than was previously possible;
  • It’s easier to ensure that the rest of the app remains stable, as it’s independent. With micro frontends, you no longer need to keep track of the whole app. A team reviews a specific micro frontend, which has been changed or expanded;
  • Codebases are smaller and more manageable;
  • Easier hiring of experts. With micro frontends, you look for professionals to work on a specific part of an app where a particular tech stack is used, so you do not need them to know technologies that other teams use;
  • Easier testing, as you test just separate features;

Disadvantages of Micro Frontend:

  • Complex testing of the application as a whole. Now that your application dynamically loads content, it can be harder to have a complete picture of the application. Each front end can be tested in isolation, but getting a real-world user test is critical to ensure the application works for the end-user. You can utilize usual black-box end-to-end testing with tools like Selenium or Cypress, as it’s agnostic to the implementation details;
  • The wide variety of standards you have to keep up with. The application is broken into smaller parts; thus, it can be challenging to keep all developers working off the same standards. Keeping everyone on the same page is essential to delivering a high-quality user experience;
  • Adopting micro frontends is a good idea for your business if your project is big and has more than one front-end team. With a small team, it is not worth the struggle;
  • The deployment, assembly, and configuration process for each micro frontend will be different, which requires additional effort.

Challenges to Micro-frontend Architecture 

Nothing comes without a cost, not even the micro-frontend architecture. There are a few tradeoffs that you need to consider before getting started with this framework:

  • Operational complexity

As the number of micro frontends increases, you need to come up with sound strategies to manage them efficiently. There will be more teams, more codebases, and more tools that’ll increase the complexity. Yes, this has started to sound like a frontend monolith, but a good roadmap and efficient strategies can easily mitigate this challenge. 

  • Inconsistent user experience

Since different teams will be working on the different micro frontends and might even use varying technologies, there is often the danger of serving an inconsistent user experience. And so it’s crucial that you have a centralized document or strategy for frontend development with well-established guidelines.

  • Poor communication between components

Even though you put together different frontend elements, the end product always needs to look like a single seamless entity. In such a case, communication between various components becomes of paramount importance. Moreover, since the micro-frontend architecture supports a decoupled system, enabling efficient communication channels might not always come naturally.

  • Larger payload

With autonomous teams working to build the different micro frontends, code duplication is highly likely. This can increase the payload, which, in turn, significantly impacts a web application’s performance. When implementing the micro-frontend architecture, you need to make careful attempts at keeping such inefficiencies at bay.

The solution: “micro frontends”

But as it turns out, a lot of other people are thinking about the same ideas. The common term is “micro frontends”.

Companies like Spotify, Klarna, Zalando, Upwork, and Allegro, and HelloFresh are using the micro frontends approach to build their web apps.

Implementing micro frontends

Here’s a few different approaches to implementing micro frontends:


Read more

What is SPA?

A framework for bringing together multiple javascript micro frontends in a frontend application.