Microfrontendarchitectuur

De belangrijkste eigenschap is onafhankelijke implementeerbaarheid: het checkoutteam kan een nieuwe checkoutflow implementeren zonder de productcatalogus opnieuw te bouwen of te implementeren. Elke remote is een afzonderlijk artefact met een eigen pijplijn.

Architecturaal is er een host (schil) die een of meer remotes laadt. De schil verzorgt routering en indeling op het hoogste niveau; remotes leveren functiegebieden die op aanvraag worden geladen.

Remotes kunnen tijdens het bouwen, op de server (SSI/edge) of tijdens de runtime in de browser worden samengevoegd. Samenvoegen tijdens runtime met Module Federation komt voor Angular het vaakst voor, omdat onafhankelijke implementatie behouden blijft.

Met Module Federation kan één gebouwde applicatie modules beschikbaar stellen die een andere gebouwde applicatie tijdens runtime via HTTP laadt. Daarbij worden gemeenschappelijke bibliotheken gedeeld, zodat ze niet worden gedupliceerd. Dit is de motor achter de meeste Angular-micro-frontends.

Elke micro-frontend moet overeenkomen met een duidelijk bedrijfsdomein (catalogus, checkout, account). Scherpe domeingrenzen beperken de koppeling tussen teams, precies het doel hiervan. Gedeelde zaken (authenticatie, ontwerpsysteem) worden expliciete contracten.

Micro-frontends voegen echte complexiteit toe: uiteenlopende versies tussen remotes, gedupliceerde afhankelijkheden bij een onjuiste configuratie, moeilijkere foutopsporing over grenzen heen en fouten bij het laden tijdens runtime. Gebruik ze alleen wanneer de omvang van de teams de extra kosten rechtvaardigt.

Voor een klein team of één product is een goed gestructureerde monoliet met lazy-loaded routes eenvoudiger en sneller. Micro-frontends zijn nuttig wanneer meerdere teams onafhankelijk dezelfde applicatie moeten kunnen implementeren.

Om een Frankenstein-gebruikersinterface te voorkomen, delen teams een bibliotheek met een ontwerpsysteem en globale stijlen. Consistentie is een bewust contract, geen toeval, omdat elke remote afzonderlijk wordt gebouwd.

Angular-remotes moeten tijdens runtime één exemplaar van het Angular-framework delen; het laden van twee Angular-versies verbreekt dependency-injectie en maakt de bundel onnodig groot. Hulpmiddelen zoals Native Federation beheren dit delen voor u.

Micro-frontends splitsen een grote applicatie op in onafhankelijk implementeerbare remotes die door een hostschil worden geladen en aan bedrijfsdomeinen zijn gekoppeld. Samenvoegen tijdens runtime via Module Federation is standaard voor Angular, waarbij één exemplaar van het framework moet worden gedeeld. Ze lossen koppeling op teamniveau op, maar brengen aanzienlijke operationele kosten met zich mee.