Micro Frontends: de toekomst van frontends

Frontend development is niet makkelijk. Frontend development schaalbaar maken, zodat meerdere teams tegelijk aan complexe projecten kunnen werken, is nog moeilijker. In deze blog leggen we uit wat Micro Frontend development is, hoe het werkt, en welke voordelen het heeft wanneer je er websites en applicaties mee ontwikkelt.

micro frontends | iO

Tegenwoordig begint frontend development met de ontwikkelomgeving en -architectuur die de basis vormen voor het maken van nieuwe applicaties. Micro Frontends zijn niet alleen verantwoordelijk voor een bepaalde taak. Ze voeren elke stap uit die nodig is om ontwikkelingsfuncties te voltooien, van frontend tot backend en databases, zoals je ziet in de illustratie hieronder.

micro frontends | iO

Wat is een Micro Frontend?

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

“Micro Frontend development is een manier van werken waarbij verschillende teams van developers autonoom werken aan een klein deel 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.

micro frontend | iO
Image source: https://developer.chrome.com/blog/app-shell/

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.

Ben jij online overal?

De tijd dat een website voldeed voor een goede digitale aanwezigheid ligt achter ons. Onze experts helpen je liever aan een volwaardig digitaal ecosysteem - geoptimaliseerd en on-brand – om écht je doelen mee na te jagen.

Laptop shopping data overview

3. Communicatie

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.

Tools voor Web Developers

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.

Laura Merlo | iO
Over de auteur
Laura Merlo
Frontend Developer - iO

The future: female & frontend. Dat omschrijft Lauro Merlo goed. Zelf beschouwt ze development als een vorm van LEGO - elk stukje is een deel van de digitale puzzel. Haar doel: complex dingen bouwen, maar wel van elk moment genieten.

Gerelateerde artikelen

Blijf op de hoogte. Schrijf je in op onze nieuwsbrief

  • Laat je inspireren: onze strategen, technologen en creatievelingen delen hun kennis en inzichten.

  • Blijf up-to-date: ontvang relevante content over merkstrategie, bedrijfstransformatie, digitale ecosystemen of data-intelligentie.

  • Mis niks: ontdek onze nieuwe cases en blijf op de hoogte van onze laatste ontwikkelingen.