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?

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

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

Smaller and maintainable codebases

Technology agnostic

Independent deployment

Autonomous teams

Which companies use Micro Frontends?

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

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

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade