Workshop Micro Frontends

Voorbereiding

  • Lees uit het artikel Micro-Frontends op martinfowler.com (Jackson, 2019) de hoofdstukken:

    • Benefits
    • The Example
    • Integration Approaches

  • Verzin 2 toetsvragen over het onderwerp van Micro-Frontends

    • Zet je 2 vragen in de thread hierover op het MS Teams Team van je klas/de minor
    • (Als deze er nog niet is, vraag je docent dan, of start deze thread zelf)
    • Formuleer bij voorkeur een multiple choice vraag met 4 antwoord opties waarvan 1 goed is (en 2 anderen plausibel zin)
    • Verzin een unieke vraag (e.g. hoe sneller je er een post, hoe makkelijker)
    • De beste vragen kunnen daadwerkelijk in de toets komen
Microservices everywhere

Figuur 1: De microfront-end architectuur volgt vaak component structuur op het scherm/ontwerp (Jackson, 2019)

Lesprogramma

  • Bespreken toetsvragen
  • Mentimeter
  • In teams uit elkaar
  • Build your own MF met create-mf-app
  • Plenair samenkomen: benefits & integration approaches
Microservices everywhere

Figuur: Microservices everywhere (bron: Aditya, 2022))

In teams uit elkaar

  • 5 teams. Elk team krijgt één 'integration approach' om te gebruiken en een 'benefit' toegewezen om kort uit te leggen.

    1. Onderzoek hoe deze integration approach in zijn werk gaat.
    2. Onderzoek voor- en nadelen.
    3. Maak of vindt een kleine demo van approach
    4. Vat de toegewezen 'mf benefit' samen
    5. Presenteer je resultaten aan de rest van de klas
    6. Einddiscussie: Zou je MF's gebruiken in project, of niet. Wat is het alternatief? Als MF moet; welke integration approach zou jij het eerst kiezen voor front-end in het project?

Integratie methoden:

  • Server-side template composition
  • Build-time integration
  • iframes
  • JavaScript
  • Web Components

Tip: Bij de integratie‑methode met iframes: bekijk als voorbeeld ook de ingebedde CDMM‑tabel met tooltips in de cheat sheet op deze website.

Voordelen:

Microservices everywhere
  • Incremental upgrades
  • Simple, decoupled codebases
  • Independent deployment
  • Autonomous teams
  • De 5e: Bonus, niet echt voordeel, maar leg de 'Two Pizza rule of Amazon uit' + hoe dit pizza plaatje aansluit bij onderwerp microfront-ends?
Pizza rule: sharing is caring

Create-mf-app

Ga nu in tweetallen aan de hand van het artikel van logrocket (Patel, 2024) zelf aan de slag met het maken van een MF-app.

  • Maak een simpele applicatie waarin 2 micro-frontends met elkaar moeten communiceren of in ieder geval van de resultaten van een actie gebruik moeten maken. Bijvoorbeeld:
    • Zoekbalk, Artikellijst
    • Boodschappenmand, Productenoverzicht
  • Spreek met je teamgenoot af hoe je tussen de 2 micro-frontends gaat communiceren. Denk na over opties als:
    • pub-sub
    • externe service
    • browser internals
    • store/state-manager die beiden applicaties toegang tot hebben (e.g. redux, mobx, vuex, rxjs)

Quiz

Test je kennis over micro front-ends met deze multiple choice quiz:

Leerdoelen

Check met onderstaande leerdoelen of je de behandelde stof begrepen hebt en toetsvragen kunt beantwoorden.

  • Je kunt gegeven een opdracht aangeven of een microfrontend een goede keuze is.
  • Je kent het concept module federation, en kent twee andere manieren om micro-frontends met elkaar te integreren
  • Je weet wat een micro-frontend is wat enkele voordelen ('benefits') hiervan zijn en kent de relatie met microservices.

Bronnen

Last change: 2025-10-23