Micro Frontends Architecture

The future of frontend development

Luca Spezzano
Dec 10, 2019 · 2 min read

In the last years, microservices have exploded in popularity, and many companies are using them to avoid the limitations of large, monolithic backends.

But today many companies continue to struggle with monolithic frontend codebases.

Micro Frontends come to help!

What are Micro Frontends?

The term Micro Frontends extends the concepts of microservices to the frontend world.

With Micro Frontends we can think about a website or web app as a composition of features which are owned and developed by independent teams.
Each team develop its features independently.
When I say Independently, I mean also using different technology stacks if the teams prefer.

An example of Micro Frontends

Image for post
Image for post

Let’s take an example of Micro Frontend using the browse page of Netflix.
We assume that there are four teams (team A, team B, team C, team D).

  • Team A works on featured movies (Using Angular)
  • Team B works on the movies list (using React)
  • Team C works on the profile page (using Vue.js)
  • Team D works on the movies search feature (using Javascript/jQuery)

As you can see, each team is responsible for a small function.

The benefits of using Micro Frontends

Let’s see some of the more obvious benefits of using this architecture.

Smaller and maintainable codebases

We will no longer have a monolith because we will split it into smaller parts.

Technology agnostic

Each team can work independently, even choosing different technologies.

Independent deployment

When the team is responsible only for specific functionality, they can deploy without worrying about something else.

Autonomous teams

The teams are autonomous and do not depend in any way on other teams.

Which companies use Micro Frontends?

Doing some research with amazement, I noticed that Micro Frontends are used by some big companies like Spotify, Dazn, OpenTable, Ikea, Skyscanner and Zalando.

Micro frontends can be implemented in different ways.
How does Spotify via iframe, how does Ikea through Edge Side Includes or how does OpenTable and Skyscanner through a framework like OpenComponents.

Another interesting method of using Micro Frontends is the one used by Dazn, you can read this interesting article if you are interested.

Final Thoughts

I believe that more frequently we will hear talking about Micro Frontends in the near future and could be one of the hottest topics for frontend development.
It could represent one of the best ways to manage large codebase and teams.

To learn more about this topic, I suggest you to visit micro-frontends.org

NotOnlyCSS

This publication includes original articles and tips about…

Sign up for NotOnlyCSS

By NotOnlyCSS

Articles and tips for frontend developers Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store