Micro-frontends – Interesting Topic

Introduction

First time I heard about micro-frontends was in Martin Fowler’s post below:

https://martinfowler.com/articles/micro-frontends.html

The idea is simple: You have *something* where you assemble micro-frontends servers. Each micro-frontend is similar to old school iframes. That *something* is usually a page container (Not a docker container!).

Many people argue that micro-frontends are not a thing, but just a new name for the good old component* model available in pretty much all UI frameworks long time ago (more on this discussion here).

But regardless of the conceptual definition, the question is: how do we implement this with modern frameworks?

Frameworks

There are multiple options, they all split a page into fragments which are then put together using routes or conditions (a.k.a. client site composition), just to mention some (grouped by level of abstraction):

• With native component* model (low-level of abstraction) already available in your favourite UI framework, e.g.: Vue, angular or React Components (https://www.robinwieruch.de/react-micro-frontend) which are later packaged as WebComponents: https://www.webcomponents.org/
• With propietary frameworks like yumcha (mid-level of abstraction) https://www.toptal.com/front-end/micro-frontends-strengths-benefits or https://piral.io/ (as per example here)
• With propietary (high-level) frameworks like the below:
  • FluentUI: https://medium.com/microsoft-design/how-fluent-ui-unlocks-the-next-generation-of-microsoft-365-experiences-8b24809faf06
  • Backstage

References:

*Similar to the Composite View design pattern which is based in Composition. Composition is represented with a filled diamond. Composition involves «ownership», so in the example below a «House» has «Rooms».

Thanks,

Javier Caceres