What are Microfrontends?

I first heard about the term Microfrontends during a JS Poland conference in Warsaw few years ago. There was a really good presentation by Luca Mezzalira about this topic and after seeing it, I thought about building such application myself. I created some simple proof of concept with React and Vue and I really liked that idea.

However, in my work projects I never had an opportunity to build such systems. I really hope that in the next months or years I will be able to build such application as this architecture pattern looks really promising.

The general idea

The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith. Let's take a look at the following diagram about different architecture patterns.

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface. Let's take a look at the following diagram about Microfrontends architecture:

So the example application might look like this:

Source: https://martinfowler.com/articles/micro-frontends.html

As we know already what is Microfrontends architecture, let's take a look at pros and cons of using it.

Benefits of using Microfrontends

Implementing Microfrontends architecture comes with several useful benefits that I listed below like:

• Being Technology Agnostic - Teams can choose technology stack that works for them best.
• Team Code is isolated - Build independent applications in isolated environments and repositories
• Independent deployment - Applications in Microfrontend architecture can be deployed independently which is great for Continuous Deployment / Delivery
• Incremental upgrades - Changes can be applied incrementally without affecting the whole application which is easier to test and less risky.

Cons of using Microfrontends

Using Microfrontends architecture comes with benefits but it can also lead to issues. Take a look at some of them below:

• Bigger complexity - Maintaining and aligning several product teams can be much more difficult.
• Terminology - Teams should have unique namespaces that will not colide with each other.
• Sharing context - In some cases like Auth, frontend apps might need to share context of authenticated user which may be complicated to implement.

Resources

Check out the following resources to learn more about Microfrontends Architecture:

• https://micro-frontends.org/
• https://martinfowler.com/articles/micro-frontends.html
• https://www.aplyca.com/en/blog/micro-frontends-what-are-they-and-when-to-use-them

Comments

[Caroline]

Great post!

[Jakub Andrzejewski]

Thank you so much!

[raddevus]

That's a very well written and informative article that gave me enough to understand the concept without overwhelming me.

Thanks for writing this up.

[Fabio Ávila]

Thanks for the tip!😎✌