Anton Shuvalov

Micro Frontends

Content

Introduction

Micro Frontends is a frontend architecture approach to separate the monolith app into several smaller apps to be supported by independent (vertical, product, ...) teams. Micro frontends usually run inside of an app shell is a host system orchestrates micro-frontends.

Requirements

Each micro-frontend represents a business domain and should meet the requirements below:

  • Be autonomous, means it should be possible to run in isolation
  • Have independent deployment
  • Be technology agnostic, means one micro-frontend may use react, another one may choose plain HTML, and the third one may pick Vue.

Microservices Principles

  • Culture of Automation
  • Hide implementation details
  • Decentralise all the things
  • Deploy independently
  • Isolate failure
  • Highly observable
  • Modelled around business domains

Decision Framework

  1. Defining what is a micro-frontend in your architecture
  2. Composing micro-frontends
  3. Routing micro-frontends
  4. Communicating between micro-frontends

Downsides

Microservices and Micro Frontends aren't fitting all projects.

They are highly depending on the organization structure due to Conway law, therefore you should be able to split your code into domains with clear boundaries.

Architecture Types

Horizontal Architecture

With the horizontal micro-frontends, teams are dedicated to widgets that may be rendered on the same page.

Vertical Architecture

With this approach, teams are dedicated to domains, such as product detail page, checkout, home page, etc.

Identification of Domains and Boundaries

Avoid premature optimization, which leads to redundant subdomains decomposition. Postpone the decision to the last possible moment, until you get enough information to make an educated decision.

Always begin with data and metrics, analyze and measure user journey: how many users reach a landing page, how many sign-ins and sign-ups you have, what are next steps in the journey, etc.

Subdomains Types

There are 3 subdomain types:

  • Core subdomains are subdomains create most value for an organization. Such as a catalog, product details page, checkout, etc
  • Supporting subdomains are subdomains related to the core ones, but not so crucial and not delivering the key value for users. Reviews, voting, etc
  • Generic subdomains are used to completing the platform.

Composition

There are 3 ways to compose micro-frontends:

  1. Client-side composition when micro-frontend bundles are loaded directly from CDN and composed on the browser
  2. Edge-side composition when micro-frontends are composed on CDN by ESI and delivered to the client inside of one chunk.
  3. Server-side composition when micro-frontend bundles are composed on the backend then the final bundle is served to CDN to be cached. Pages can be assembled either at runtime or compile time. But in the case of runtime composition, you have to have a scaling plan for a service.

Communication

  • Event Bus injection. May be done either within a page runtime, or even through web-workers (last option takes 20-70ms transport).
  • Custom events against the global object
  • Web Storage DB
  • Cookies
  • Query Strings

HelloFresh Implementation

In HelloFresh micro-frontends are combined from 3 entities:

Fragment is an isomorphic application served by express server

Particle is an application shared across a platform, such as a header. Particle can be embedded into any host application and all it needs is an element to render to. Particle server returns JSON contains SSR HTML, critical CSS, app state and a link to the script file to mount the application:

{ 
    "html": "<div id=\"react-root\">Test</div>", 
    "css": "#react-root{color:green}", 
    "initialState": { 
        "country": "DE" 
    }, 
    "script": "https://assets.hellofresh.com/dist/my-particle.hash.js" 
}

Tag is a small application triggered asynchronously, like modals.

window.signUpTag({  
    bindToElement: document.body,  
});

Overview

assets-hallotech-micro-frontends-architecture

assets-hallotech-micro-frontends-interaction-diagram

Microfrontend Frameworks

  • Luigi. The Enterprise-Ready Micro Frontend Framework. Luigi helps you to build modularizable, extensible, scalable and consistent UIs and Web Apps.
  • Mosaic is a set of services, libraries together with a specification that defines how its components interact with each other, to support a microservice style architecture for large scale websites.
  • OpenComponents. Serverless in the front-end world for painless micro-frontends delivery.

Resources

Created with obsidian-blog