Microfrontends: An approach to building Scalable Web Apps

What are Microfrontends?

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. — micro-frontends.org

  • The app is broken down into smaller micro apps bound by visual context.
  • Each app is independent, it can fetch its own data and has its own encapsulated styling.
  • These Micro App don’t share a global state.
  • Each team can work on their micro app independently and deploy them independently.

Choosing between a Microfrontend Architecture vs a SPA architecture

A microfrontend architecture might not be the right choice for every project, neither would SPAs be. Deciding when to build a SPA or use a Microfrontend architecture or build out a static server rendered site, would depend on the kind of project you are working on.

Breaking down your App into a Micro Apps

Once you’ve decided to follow the microfrontend approach, the next step is to identify how to go about breaking down the app.

Organizing your Code base

After you’ve decided on how you are going to breakdown your app, you’ll now need to decide on how are we going to organize our code base. There are two primary approaches.

  • Multiple Repos with each Micro App in its individual Repo.
  • A Mono Repo with each micro app organized as a project.

Multi- Repo:

This approach works best if you have teams that strictly work on their own micro app.

Mono Repos:

Mono Repos work best when you want your teams to have easy access to the entire code base and not just the micro app they are working on.

Microfrontend Architecture:

The Microfrontend Premium

Martin Fowler, talks about the Microservice Premium, where he mentioned that Microservices comes with a bit of overhead and complexity, which he refers to as the microservice premium. Martin goes on the say that benefits of a microservice architecture start showing results only when size complexity boosters kick in.

Microfrontends in the Wild

Although a relatively new term and concept, quite a few large and popular sites have already running microfrontends in production. Spotify, Zalando, UpWork and Open Table are a few.

--

--

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
Vinci Rufus

Vinci Rufus

488 Followers

Sr. Director eXperience Technologies SapientRazorfish. Google Developer Expert. Author of AngularJS Web Applications Development Blueprints