.svg)
.jpg)
.jpg)
.jpg)
Een monolithische applicatie, trage releases en teams die elkaar in de weg zitten. Voor Auke, front-end developer bij onderwijsapplicatie ParnasSys, was het aanleiding om een diepgravend onderzoek te starten naar een modern architectuurpatroon: micro front-ends. In zijn Codekraker lees je over de toepassing hiervan.
De front-end van ParnasSys was één logge brok code die steeds moeilijker aan te passen was. De codebase was zo groot dat kleine aanpassingen impact hadden op het geheel. Releases duurden lang, nieuwe features kwamen traag live. We moesten slimmer worden.
Micro front-ends als puzzelstukjes van een schaalbare front-end
Ik dook in het concept van micro front-ends — een architectuurprincipe waarbij je de front-end van een applicatie opknipt in losse, zelfstandig te ontwikkelen en deployen onderdelen. Die losse onderdelen plug je als stekkers in een stekkerdoos, de ‘shell’. Zo kunnen teams onafhankelijk van elkaar werken, releasen en experimenteren. Voor een nieuwe developer betekent dit ook: je hoeft maar één deel van de applicatie te leren kennen. Dat maakt onboarding veel eenvoudiger.
Van monoliet naar modulair
Het onderzoek dat ik deed, begon met een fundamentele vraag: is het mogelijk om micro front-ends te gebruiken in een systeem dat server-side rendered is, zoals ParnasSys? De meeste micro front-ends gebruiken client-side rendering. Wij moesten een vertaallaag bouwen tussen de bestaande monoliet (Wicket) en de nieuwe front-ends.
Die vertaallaag, ik noem deze ook wel de ‘stekkerdoos’, zorgt ervoor dat micro front-ends kunnen draaien in een omgeving die in ons geval helemaal geen Angular kent. De sleutel tot succes bleek ‘native federation’, waarmee losse onderdelen kunnen worden geladen zonder dat de hele applicatie hoeft te worden aangepast.
Coördinatie en tooling
Bij het bouwen van een gedistribueerde architectuur komen naast techniek ook organisatievraagstukken kijken. We zagen al snel: als je ieder team z’n eigen gang laat gaan, bouw je alsnog een gedistribueerde monoliet — veel complexer en moeilijker te onderhouden. Daarom richtten we een integratieteam op dat zorgt voor coördinatie en tooling. Dit team, waarin onder meer front-end, back-end, DevOps en architectuur samenkomen, bouwt onder andere de orchestrator, discovery feed en extra tooling die de micro front-ends integreren in ParnasSys.
De discovery feed is een soort bibliotheek waar alle micro front-ends staan. De host vraagt bij het laden van een pagina aan deze feed welke componenten er zijn en laadt die dan realtime in. Zo kunnen we nu onderdelen van de applicatie releasen zonder dat de hele applicatie opnieuw hoeft te worden uitgerold.
Snelheid, schaalbaarheid en vrijheid
De voordelen van de nieuwe opzet zijn groot:
Teams kunnen onafhankelijk releasen — updates gaan live terwijl gebruikers gewoon doorwerken.
Nieuwe collega’s starten sneller doordat ze in een beperkt domein kunnen inwerken.
Experimenteren met nieuwe technologieën is veiliger, omdat dit per micro front-end kan.
De totale applicatie blijft overzichtelijker en schaalbaarder.
De gouden tip: kijk naar je eigen use case, niet naar de hype
Micro front-ends zijn geen silver bullet. Gebruik ze alleen als je écht tegen de grenzen van je huidige architectuur aanloopt. Anders ben je een oplossing aan het bouwen voor een probleem dat er misschien helemaal niet is. Elke organisatie werkt anders, en de manier waarop teams communiceren bepaalt vaak meer over je architectuur dan de techniek zelf. Consistentie, eigenaarschap en maatwerk zijn belangrijker dan blind meegaan met de nieuwste hype. Wat voor de één werkt, is niet automatisch goed voor jou. Analyseer je eigen use case, kies een aanpak die je kunt verdedigen, en blijf vooral dicht bij wat jouw product nodig heeft. Er is geen perfecte oplossing, maar er is wél een oplossing die perfect past bij jouw situatie.
