Scale it the easy way

Introduction to

micro frontends

...how to use all frameworks at once

Hi, I'm Kuba Holak

R&D Developer @

Front-end perspective

time

complexity

Monolith

View

Logic

Data

a large single upright block of stone, especially one shaped into or serving as a pillar or monument.

Microservices

single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API.

View

Feature logic + data

Microservice

API

Frontend SPA

Microservice

Feature

Front end

Backend

Data

Micro Frontends

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.

micro-frontends.org

Let's split our UI into separate, self contained and independent feature apps.

User

Job Offers

Brands

Benefits?

Increase productivity - ship features faster

Minimise tech debt

Increase autonomy of development teams

Avoid tech stack lock-in

Progressive rewrites of big codebases

There is no single tech approach.

Let's see how others do it.

Project Mosaic

Stich Framework

OpBox

SINGLE SPA

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Custom elements

class UserView extends HTMLElement {...}
window.customElements.define('user-view', UserView);

<user-widget />

<search-widget />

<job-offers-app />

<brands-widget />

UI Shell

router and basic layout

Invoicing

Support

Backup

Scheduler

small shell app responsible for providing user context and Amplify methods to each sub app

every route is a sub app

every sub app can provide sub routes

each sub app is a js file exposing a factory of web component

Nordcloud Insight UI Shell

<Router history={history}>
    <Home path="/" />
    <UserPage path="/mysettings" />
    <PageNotFound path="/404" />
    <SubApp path="/:subappname" setup={{ ...amplifySetup }} />
</Router>

function initializeSubApp(routeDesc, setup) {
  loadScriptFromUrl(routeDesc).then(({ routeDesc, setup }) =>
    window.subAppFactory.init(
      { title: routeDesc.title, ...setup },
      routeDesc.component
    );
    //...return store action with sub app creation success
  )
}

Sub app setup

returns a factory with init() method, which should register a web-component under provided DOMString tags

function init(setup = {}, tag = "my-component"){
    ReactCustomElement(<App setup={setup} />, tag);
}

ReactCustomElement is a custom tailored function that mounts a react app into shadow dom based web component.

Micro frontends - is it whorth it?

It depends.

Scale

Micro Frontends architecure

comes with initial costs.

https://martinfowler.com

Final thoughts

avoid shared state - use a "store" per micro app
create shared UI elements library
measure performance
you may not need a framework :(