Thoughts about Micro Frontends in 2020
Tags: frontend, micro, microservices
Published: 2020-01-02 15:56:55

---
title: Thoughts about Micro Frontends in 2020
published: true
description: In this post, I want to share my thoughts on why I think it could be good to go from a monolithic front-end application to a micro frontends approach.
tags: Frontend, Micro, Microservices
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1my646n576pfopyvbtcc.png)

Last years I see the term "Micro Frontends" become more common than before.

In the world of backend developers, it's already more common to split everything into microservices. Thanks to the techniques of Docker it's easier than ever to scale the backend into multiple services and instances of those services.

But in the world of front-end developers, it is not that common yet.

In this post, I want to share my thoughts on why I think it could be good to go from a monolithic front-end application to a micro frontends approach.

## Why?

For all those frontend developers that build websites or web apps for years in a monolithic architecture, the micro frontends approach feels a bit off. (*Well that is my first opinion when I discovered it*).

### Problems with monolithic frontend

When you think about the challenges we have with a monolithic frontend application:

- Harder to work on with multiple people/teams
- Long build times
- Overrides of styling without knowing it
- When API's have breaking changes, the whole application needs to be deployed

When you first start to build a single website this is not a big problem. But when the organization grows, the number of people that work on it will become a challenge.

### Problems to be solved with micro frontends

Switching to a micro frontends approach could solve some of those problems. 

- Easy to deploy in small parts
- Shorter build times 
- Easier to work on with multiple people/teams
- Breaking API change will only require 1 small deployment

But it will take a different mindset for the development team. Next to that, it needs some additional work to change the frontend architecture.

## How

Lucky enough we are not the first developers who have experienced these challenges with the monolithic frontend architecture.

### Big companies lead the way

Big companies like Spotify, Klarna, Zalando, Upwork, Allegro, HelloFresh, AirBnB, and Facebook have experienced these challenges too.

So they pioneered a lot with this and find some cool approaches to solve the problems.

- **Zalando** build [Mosaic9](https://www.mosaic9.org/). Check their talk about it: [Mosaic Microservices at Zalando Tech](https://www.microservices.com/talks/mosaic-microservices-zalando-tech/)
- **Klarna** explains on [HN how they approach it](https://news.ycombinator.com/item?id=13012916)
- **Upwork** has written a blogpost: [Modernizing Upwork with Micro Frontends](https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/)
- **Allegro** has written a blogpost: [Managing Frontend in the Microservices Architecture](https://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html)
- **HelloFresh** has written a blogpost: [Front-end Microservices at HelloFresh](https://engineering.hellofresh.com/front-end-microservices-at-hellofresh-23978a611b87)
- **AirBnB** created a tool called [HyperNova](https://github.com/airbnb/hypernova) to serve JavaScript views server-side


### Techniques

If you checked all the posts of the big companies you could see a few techniques on how to approach the micro frontend technically.

- **Meta framework**: Single-SPA, *this framework lets you combine multiple JavaScript Frameworks/libraries on runtime without refreshing the page*.
- Multiple SPA on different URLs: This is the simplest way of having multiple micro frontends
- IFrames
- Web Components: Using a JavaScript wrapper to turn your Angular and React components into Web Components and serve them next to each other. **Chris Kitson** created a cool and practical blog post about it: [Creating Micro-frontends using Web Components (with support for Angular and React)](https://medium.com/javascript-in-plain-english/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a)

## When

But the question, "when would it be a good idea to switch to micro frontends?". Well, I think it's relatively simple, when you build a small website, stick with the monolithic approach. When you build a big application, work with a big amount of people/teams and use "microservices" as your backend architecture, you could definitely benefit from the Micro Frontends approach.

## Thanks

Thanks for reading all the way down to here 😅. I hope it gave you some material for your investigation of Micro Frontends.