When MicroFrontends Architecture Goes Wrong

Tomasz Ducin  •  ducin.dev  •  Bottega IT Minds

When MicroFrontends Architecture Goes Wrong

Tomasz Ducin  •  ducin.dev  •  Bottega IT Minds

Architektura MikroFrontendowa
- Lekcje z Produkcji

Tomasz Ducin  •  ducin.dev  •  Bottega IT Minds

Hi, I'm Tomasz

Independent Consultant & Software Architect

Trainer, Speaker, Frontend & Backend

Bottega IT Minds, ArchitekturaNaFroncie.pl (ANF)

soon: Developer Jutra (.pl)

Warsaw, PL

tomasz (at) ducin.dev

🦋 @ducin.dev

𝕏  @tomasz_ducin

Agenda

  • cele architektury

  • technikalia

    • client-side composition

    • server-side composition

    • niuanse architektoniczne

  • jak zepsuć: nieudane wdrożenia

  • jak NIE zepsuć: udane wdrożenia

  • jak, co i po co mierzyć

Disclaimer

NIE JESTEM SPRZEDAWCĄ TECHNOLOGII 😉

Architektura - czyli CO?

Architektura - czyli PO CO?

👉 PO CO > CO & JAK 👈

MikroSerwisy

  • niezależność wdrożeń / awarii

  • skalowalność / wydajność

MikroFrontendy

  • niezależność wdrożeń / awarii

  • i tyle... :)

Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure.

- Melvin Conway

MicroServices and MicroFrontends are technical solutions to people problems.

- someone

🤨

Sociotechnical Systems:

Socio: people, work culture, roles, relations

Tech: infrastructure, software, processes

MFE case study

BRANŻA: ITIL

  • akwizycje firm z podobnym portfolio
  • potrzeba połączenia produktów w 1
  • różne kultury pracy, masa zespołów
  • różne frameworki

Stream-aligned Team

Platform Team

Enabling Team

Complicated SubSystem Team

Stream-aligned:

  • cele BIZNESOWE

  • ownership

  • autonomia

MFE case study: jak zepsuć?

BRANŻA: KSIĘGOWOŚĆ

  • 1 zespół ogarnia pewną całość
  • dzielenie jest nieuzasadnione

MFE case study: jak NIE zepsuć?

BRANŻA: E-COMMERCE

  • zrównoleglanie prac
  • zależności między zespołami
  • osobne priorytety biznesowe zespołów
    - to wszystko bardzo realne problemy

Mierzyć: co i po co?

DF: Deployment Frequency

CLT: Change Lead Time

MFE: Kiedy?

PRZED MFE

  • zmierz liczbę wdrożeń (DF)
  • analiza procesu wdrożeniowego:
    • ile ma kroków?
    • ile stron zaangażowanych?
    • jak się ww. zmieni po przejściu na MFE?
  • cel MFE:
    • skrócić proces wdrożeniowy (1 modułu/apki) i/lub
    • mniej kroków
    • przyspieszenie TTM
    • (autonomia zespołów)

Czy moja organizacja jest gotowa na powierzenie zespołom ownershipu? 🤔

MFE: Architektura

MFE: Client-Side Composition

Lazy Loading + Separate Builds

Tradeoffy i ryzyka

  • 1 framework, czy wiele?
  • 1 framework: 1 wersja, czy wiele?
  • Rozmiary bundli  vs  współdzielenie kodu
  • LCP: Largest Contentful Paint (metryka)
  • Złożoność

MFE: jak zepsuć

CZĘSTO ZMIENIAĆ/WDRAŻAĆ HOSTA

SSR: Server-Side Rendering

Implementations:

  • Strangler Pattern

  • Web Components

  • Webpack Module Federation

  • iFrames

  • Custom Frameworks

Approach: Strangler Pattern

Implementation: Web Components

Implementation: iFrame

// (HOST)
new ModuleFederationPlugin({
  name: "shell", 
  remotes: {
    mfe1: "mfe1@http://host1/remoteEntry.js",
    mfe2: "mfe2@http://host2/remoteEntry.js",
  },
}),
// (REMOTE)
new ModuleFederationPlugin({
  name: "mfe1",
  filename: "remoteEntry.js",
  exposes: {
    "./MyComp": "./src/components/MyComp",
  },
}),
// (HOST)
new ModuleFederationPlugin({
  name: "shell", 
  remotes: {
    mfe1: "mfe1@http://host1/remoteEntry.js",
    mfe2: "mfe2@http://host2/remoteEntry.js",
  },
}),
// (REMOTE)
new ModuleFederationPlugin({
  name: "mfe1",
  filename: "remoteEntry.js",
  exposes: {
    "./MyComp": "./src/components/MyComp",
  },
}),
// (HOST)
new ModuleFederationPlugin({
  name: "shell", 
  remotes: {
    mfe1: "mfe1@http://host1/remoteEntry.js",
    mfe2: "mfe2@http://host2/remoteEntry.js",
  },
}),
// (REMOTE)
new ModuleFederationPlugin({
  name: "mfe1",
  filename: "remoteEntry.js",
  exposes: {
    "./MyComp": "./src/components/MyComp",
  },
}),
// (HOST)
new ModuleFederationPlugin({
  name: "shell", 
  remotes: {
    mfe1: "mfe1@http://host1/remoteEntry.js",
    mfe2: "mfe2@http://host2/remoteEntry.js",
  },
}),
// (REMOTE)
new ModuleFederationPlugin({
  name: "mfe1",
  filename: "remoteEntry.js",
  exposes: {
    "./MyComp": "./src/components/MyComp",
  },
}),

SSR: Server-Side Composition

MFE: Island Architecture

MFE case study

BRANŻA: E-COMMERCE

jaki problem rozwiązujemy? 🤔

MFE: jak zepsuć?

Monolith-First

MFE: jak zepsuć?

  • współdziel stan między mikrofrontendami

  • globalny store, np. redux
  • współdzielony przez referencję
  • BRAK autonomii zmian
  • BRAK autonomii technologii
  • autonomia zmian
  • autonomia technologii
  • autonomia zmian
  • BRAK autonomii technologii

Decoupling?

Decoupling? Eventy!

interface MessageBroker {
  publish(topic, event): void;
  subscribe(topic, subscribeFn): void;
  unsubscribe(topic, subscribeFn): void;
}

MFE: jak zepsuć?

  • stwórz ogromną bibliotekę komponentów

ui.devland.is

  • a czym jest w ogóle "biblioteka komponentów"?

🤔 Jak często WDRAŻASZ: bibliotekę komp. vs brokera?

MFE: jak zepsuć?

  • współdziel ile się da, jak najwięcej!

MFE: jak zepsuć?

  • często wdrażaj HOST APP

MFE: jak zepsuć?

  • wydłuż pipeline, np. dużo granularnych pakietów

📦

📦

📦

📦

📦

📦

📦

📦

📦

📦

📦

📦

Jak zepsuć?

  • niepewne zyski
  • dużo współdzielenia
  • rozrośnięta biblioteka komponentów UI
  • granularne paczki (wydłużenie buildów)
  • brak pomiarów liczby/częstotliwości wdrożeń
  • brak pomiartów CWV (szczególnie: LCP)

👉 PO CO > CO + JAK 👈

Thank you

Tomasz Ducin  •  ducin.dev

Thank you

Tomasz Ducin  •  ducin.dev