Micro Frontends

The term Micro Frontends first came up at the end of 2016. It extends the concepts of microservices to the frontend world - micro-frontends.org

YOUTUBE o1Sr39DVdOQ Michael Geers - Micro Frontends: Break Up You Web App!

- Michael Geers on twitter

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.

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.

However, this idea is not new, in the past it went by the name of Frontend Integration for Verticalised Systems or Self contained Systems. But Micro Frontends is clearly a more friendly and less bulky term.

But Custom Elements alone are not the solution to all our needs. To address progressive enhancement, universal rendering or routing we need additional pieces of software.

This page is divided into two main areas. First we will discuss Page Composition - how to assemble a page out of components owned by different teams. After that we’ll show examples for implementing clientside Page Transition.

# Code

# Discussion