Sneller gaan door alles op te breken: micro frontends via web components

In de praktijk blijken er ook heel wat nadelen aan zo'n samenwerking. Vraag dat maar aan Nick Lauryssen, die op Haxx (Axxes Conferentie) een keynote over micro frontends bracht. Nick werkt al zeven jaar als Team Lead Frontend Development bij Axxes, waar hij sinds 2018 voor Katoen Natie aan de slag is.

‘We kennen allemaal de microservices aan de backend, die alles mooi opdelen per domein,’ zei Nick in zijn presentatie, ‘maar de frontend is vaak nog één monoliet die alle microservices aanspreekt.’ Dat kan bij grote projecten voor problemen zorgen. Hoe meer features men ontwikkelt, hoe moeilijker het is om alles op elkaar af te stemmen voor je kan releasen. Op dat moment merk je dat het niet per se productiever is om meer developers op hetzelfde project te laten werken.

Wanneer je in zo’n monoliet iets wil veranderen, heeft dat vaak impact op alle projecten die hieraan gekoppeld zijn. Stel dat je bijvoorbeeld voor één feature naar een nieuwe versie van Wonder.js wil overschakelen, moet je dat meteen overal doorvoeren.

Breek de monoliet

Dat is uiteraard niet schaalbaar. Als bedrijf wil je net de development speed opdrijven en teams de vrijheid geven om zo veel mogelijk beslissingen zelf te nemen. Je wil legacy code vermijden en vermijden dat je een groot migratieplan moet bedenken voor iedere verandering die je wil doorvoeren.

De oplossing van Nick? Micro frontends. Een architectuur waarbij frontend applicaties los van elkaar kunnen opereren en samenkomen in een groter geheel. In mensentaal: je gaat je monoliet verticaal opbreken per feature, om zo makkelijker te kunnen upgraden.

In het voorbeeld hierboven zie je hoe drie aparte teams samenwerken aan de ontwikkeling van een grote e-commerce website. Elk neemt een deel van de customer journey op zich: de fase waarin we klanten inspireren, de beslissingsfase en het afrekenen. Door die opsplitsing kan ieder team zich ook specialiseren en focussen op de ontwikkeling van bepaalde detailpagina’s.

In realiteit is het uiteraard minder afgebakend: een pagina (= page) bestaat vaak uit verschillende componenten. Op de detailpagina van een product staat bijvoorbeeld ook een betaalknop. Niet iedereen moet weten wat er gebeurt als je daarop klikt, maar het team dat zich bezighouden met het afrekenen wel. Hetzelfde geldt voor de suggesties die je krijgt wanneer je iets wil afrekenen. Stuk voor stuk zijn het deeltjes (= fragments) die los van elkaar als mini-applicaties opereren.

Micro frontends laten teams toe om los van elkaar features te ontwikkelen, die ze daarna als fragment of page beschikbaar stellen. Die losse onderdeeltjes komen nadien samen in één laag (= shell application) die voor de gebruiker een mooi visueel geheel vormt. Stel je een website of applicatie voor, waarbij bepaalde onderdelen van een pagina door een ander team ontwikkeld worden dan andere zaken op dezelfde pagina. Het gevolg? Teams kunnen onafhankelijk van elkaar bepaalde zaken releasen. Uiteraard is dit vooral belangrijk bij grote teams, die zo de nodige flexibiliteit krijgen.

Van theorie naar praktijk

Tot zover de theorie, maar hoe implementeer je die micro frontends? Daar zijn, zo legde Nick in zijn presentatie uit, verschillende manieren voor. Zo zou je kunnen werken via build-time integrations door van alle micro frontends NPM Packages te maken die je in je shell application installeert. Het is een wat achterhaalde manier van werken, voornamelijk omdat je zo opnieuw een bottleneck op je container applicatie creëert.

Daarom is het beter om te kijken naar runtime integrations, waarbij je micro frontends pas in je browser samenkomen voor single page applications. Hiervoor zijn een aantal mogelijke opties. Spotify werkte bijvoorbeeld lang met Iframes, wat doet wat het moet doen maar niet zo praktisch is.

Iets moderner is de integratie via JavaScript. Je host de static bundle files op een specifieke plaats, vervolgens laadt je op basis van je location pathname de juiste micro frontend in. Hiervoor spreek je bepaalde contracten af met je collega’s waarin staat neergeschreven hoe die micro frontend wordt ingeladen.

Micro frontends via web components

Nick focuste in zijn presentatie vooral op een vierde manier: werken via web components. Dat is een parapluterm van browserstandaarden die het mogelijk maakt om nieuwe, herbruikbare elementen aan te maken in de browser. Voor wie er voor het eerst over hoort kan het complex lijken, maar in realiteit valt het best mee. Die elementen kun je hergebruiken doorheen je applicatie. Bij het maken van web components komen verschillende zaken kijken. Custom Elements, bijvoorbeeld, een set JavaScript API’s die je toelaten om bepaalde elementen en wat je van hen verwacht te definiëren. Ze zijn fundamenteel voor web components, omdat je hiermee de nieuwe elementen aanmaakt. De Shadow DOM dient om een geïsoleerde DOM tree aan te maken, om zo een deel van de CSS af te schermen van de rest van je applicatie.

Voor wie vertrouwd is met ontwikkelen ziet dit er vrij logisch uit: het is een JavaScript Class die enkele lifecycles beschrijft. Daarin staat bijvoorbeeld wat wanneer moet gebeuren en hoe de dom geïntegreerd moet worden. Je zal altijd een dash moeten definiëren om te vermijden dat er conflicten met toekomstige browser elementen ontstaan, zodat er geen verwarring is met bijvoorbeeld een gewone knop op je online platform.

Onmisbare schakels

Web components zijn de ideale oplossing om te vermijden dat iedereen zijn eigen ding gaat doen. Een content library zou ook een oplossing kunnen zijn, maar wanneer je micro frontends uit verschillende frameworks bestaan wordt het al snel een complex verhaal. Ook bij de uitrol van je design system kunnen web components een rol spelen. Ze zijn onafhankelijk van andere technologieën, hun styling is geïsoleerd en op Internet Explorer na ondersteunt iedere browser ze.

Voor Nick en zijn collega’s zijn micro frontends en web components intussen onmisbaar. Goede software ontwikkelen is al moeilijk, dat op een schaalbare manier doen al helemaal. Micro frontends spelen hier een belangrijke rol in. Anderzijds kunnen web components, zeker bij grote applicaties, een belangrijke rol spelen om die micro frontends te integreren.