Micro Frontends: de toekomst van frontends

Bij Micro Frontend development werken verschillende teams van developers met agile methodes autonoom aan kleine delen van de code voor een website of applicatie.

Duidelijke communicatie tussen teams is belangrijk wanneer je grootschalige nieuwe projecten ontwikkelt. Bij Micro Frontend development werken teams aan hun eigen onderdeel, los van de applicatie als geheel en onafhankelijk van de code van het andere team. Een vlotte integratie van nieuwe code wanneer die klaar voor de productie-omgeving en deel uit te maken van de huidige applicatie is essentieel. Na de integratie moet de nieuwe module in staat zijn om te communiceren met andere onderdelen van de applicatie. De nieuwe module moet ook toegankelijk zijn zonder de applicatie, via de browser. Onderdelen routeren is een uitdaging die op verschillende manieren kan worden aangepakt:

1. Compositie

2. Application Shell en routering

3. Communicatie

1. Compositie

Compositie is het samenbrengen van verschillende frontend applicaties met de hoofdapplicatie. Met andere woorden: de juiste integratie van de verschillende individuele componenten. Bij frontend development verloopt de compositie op de server of in de browser. Bij server-based compositie is de gehele applicatie vervat in een html-pagina. De Micro Frontend is een tag in die applicatie. Zo'n tag, samen met JavaScript- en CSS-code, is nodig om de applicatie vanaf de server te draaien. Tools hiervoor zijn NGINX, Tailor, en oplossingen op maat met NodeJS. Client-side (browser) compositie gebruikt vaak iframes, HTML-links, of frontend code geschreven in JavaScript of in populaire frameworks React, Angular en Vue binnen het web component. Web Components worden hier bij voorkeur gebruikt omdat ze standaard deel uitmaken van de browser API.

2. Application Shell en routering

Routering is ook een belangrijke uitdaging bij het werken met Micro Frontends. De belangrijkste vraag hierbij is hoe de micro-applicatie gepositioneerd is ten opzichte van de hoofdapplicatie en hoe die benaderd kan worden. De application shell is de hoofdapplicatie waarin alle Micro Frontends draaien en zorgt voor alle verbindingen tussen de micro-applicaties, maar ook voor de algemene instellingen en het overzicht.

Framework
Een andere manier om routing en verbindingen goed te beheren is door zelf een Application Shell te ontwikkelen. Dat kan met een framework zoals Angular of Vue. Het Single-SPA framework is ook een prima oplossing voor de Application Shell. Dit framework kan Micro Frontend apps integreren die geschreven zijn in Angular, Vue, of React.

Micro Frontends gebruiken verschillende communicatiemethodes, maar over het algemeen communiceren ze eigenlijk zo weinig mogelijk met elkaar. In Micro Frontends moet elk onderdeel autonoom zijn. Het is belangrijk om de communicatie tussen applicaties goed te regelen. Daardoor voorkom je namelijk frictie tussen teams, waardoor iedereen zich kan richten op hun eigen klant.

Data
Communicatie verloopt het beste wanneer zo weinig mogelijk verandert aan wie de gegevens toebehoort. Elke frontend behoudt zijn eigen gegevens en hoeft die niet te delen met andere Micro Frontend apps. Relevante data worden vaak gedeeld via een url, maar dat is niet in elke situatie wenselijk. Parent-child verkeer (verticaal) kan hiervoor gebruikt worden. Frameworks als Angular en Vue maken hier vaak gebruik van. Horizontaal verkeer (“children communication”) is ook mogelijk, zoals bij custom events.

Eens een organisatie gekozen heeft om een architectuur op te zetten volgens het principe van Micro Frontends, begint het schrijven, bijwerken, en testen van de code. Werk je met veel developers, dan loop je altijd het risico fouten te maken omdat JavaScript geen type-veiligheid heeft. Om dat te vermijden, is TypeScript erg handig. TypeScript is een taal die veel wordt gebruikt voor nieuwe projecten en die fungeert als een soort spellingscontrole voor functies en klassen in TypeScript en JavaScript. Er zijn ook andere tools om code in JavaScript (of TypeScript) te analyseren, zoals ESLint en Prettier.

5 echte voordelen van ontwikkelen met Micro Frontends

Door te ontwikkelen met Micro Frontends kan je incrementeel delen van de frontend updaten, upgraden of zelfs herschrijven zonder de hele applicatie in één keer te deployen. Dankzij deze agile methoden en de onafhankelijke uitrol van features is er minder vertraging en een kortere time-to-market. Micro Frontends zijn eenvoudig te schalen en te migreren, en losstaande teams van developers kunnen tegelijkertijd aan features werken. De gebruikerservaring (UX) die Micro Frontends bieden is niet gestandaardiseerd, maar is consistent over alle apparaten.