NL
Nederland
NL
Weleens HTML geschreven om op maat gesneden UI-besturingselementen op verschillende plekken weer te geven? Dan weet je hoe complex dat is. Maar weet je ook dat het simpeler kan? Web components zijn custom elementen die je eenvoudig hergebruikt – waar en hoe vaak je maar wilt. In deze blog vertellen Maarten Dekker en Ton Hordijk in welke gevallen dat handig is. En wanneer je prima zonder kan.
Web components zijn er al even. De eerste versie werd in 2012 ontwikkeld, met Google als drijvende kracht. Doel: een standaard voor elementen die je in elke browser kon gebruiken zonder dat je een externe library nodig had. Anno nu zijn web components veelzijdige custom elementen met vooraf bepaalde functionaliteit die je keer op keer opnieuw inzet.
Handig dus, die web components. Omdat het HTML-tags zijn, kan je ze overal toepassen: in een standaard HTML-pagina, WordPress, Angular, React – you name it. Doordat ze draaien op JavaScript, worden ze door alle browsers ondersteund en werken ze op elk device. Verder zitten de functionaliteit en styling bij web components ingekapseld, zodat de componenten overal hetzelfde werken en er overal hetzelfde uitzien. Ook gaan ze probleemloos samen met de rest van je applicatie. En de leesbaarheid van je templatecode gaat er met web components flink op vooruit.
Wanneer web components een slimme keuze zijn
Doen dus, die web components? In veel gevallen wel.
Wil je bijvoorbeeld een library met herbruikbare elementen bouwen, dan zit je met web components altijd goed. Ook in de toekomst: besluit jouw organisatie om over te stappen op een ander frontend-framework, dan kan je je web components gewoon blijven gebruiken. Terwijl je zonder web components alle applicaties volledig nieuw zou moeten bouwen.
Werk je in een grotere organisatie, dan draaien er al snel meerdere frameworks naast elkaar. Van Angular tot Svelte en van React tot Vue. Met web components is dat geen probleem. Die kan je op elk framework inzetten en toch door de hele organisatie heen hetzelfde laten doen. De frameworks hebben geen impact op de functionaliteit.
En wil je organisatie helemaal geen framework? Ook prima. In dat geval bouw je gewoon je hele frontend-applicatielandschap op uit web components. Dat kost wat meer tijd en moeite, maar is zeker realistisch. Wij kennen zowel kleinere als grotere organisaties die hiervoor hebben gekozen, bijvoorbeeld om complexe migraties te voorkomen.
Wanneer web components minder logisch zijn
Je merkt: we zijn nogal enthousiast over web components. Maar er zijn ook situaties waarin het volgens ons minder voor de hand ligt om ze te gebruiken.
Weet je bijvoorbeeld zeker dat je organisatie maar één frontend-framework gaat gebruiken? Dan is het efficiënter om alle elementen in dat specifieke framework te bouwen. Web components bouwen kost je extra tijd, die je in dat geval niet meer terugverdient. Al is de kans natuurlijk vrij groot dat de organisatie toch een keer zal switchen van framework. En heb je maar één applicatie, waarin elementen weinig worden hergebruikt, dan is een groter framework of service-side rendering een betere optie.
Nog zoiets: SEO, oftewel zoekmachineoptimalisatie. Bouw je een e-commercewebsite, dan wil je goed gevonden worden via Google. Web components gaan je daarbij niet helpen. Sterker nog: omdat alle functionaliteit wordt ingekapseld – dus ook je content – kunnen zoekmachines er niet bij. Is de vindbaarheid van je content belangrijk, dan kun je web components dus beter laten voor wat ze zijn.
En wie weet wil jouw organisatie wel een ‘super quick first paint’. App-gebruikers moeten informatie dan in een milliseconde op hun scherm krijgen. Met puur HTML is dat geen moeite. En ook frameworks houden de vaart erin. Maar bij web components heb je zo 500 milliseconden vertraging. Die worden namelijk eerst ‘gedefined’ door JavaScript, om pas daarna op te bouwen en te renderen. Met enige delay als gevolg.
En zo bouw je een web component
Het is dus belangrijk om de voors en tegens van web components tegen elkaar af te zetten. Bedenk goed of ze bieden wat jouw organisatie nodig heeft. Is het antwoord positief? Dan wil je natuurlijk weten hoe je zo’n web component eigenlijk bouwt. Precies dat laten we je zien in onze Tech Talk.
Tech Talk: de ins en outs van web components
In hun Tech Talk zetten Ton en Maarten live een web component in elkaar – eerst ‘met de hand’ in HTML en JavaScript, daarna ‘easy-breezy’ in LitElement en Stencil. Vervolgens implementeren ze deze elementen in een Angular- én een React-app. Kijk mee en zie zelf hoe eenvoudig (en leuk) het is om web components op te bouwen.
Kijk hier de Tech Talk terug!
Om de video af te spelen, zul je de marketing cookies moeten accepteren. Wil je de marketing cookies accepteren?
Over Maarten Dekker
Maarten werkt bij Capgemini als frontend developer met een focus op JavaScript-applicaties. Als web developer heeft hij niet alleen een indrukwekkende reeks bedrijfssites uit de grond gestampt, hij ontwikkelde ook webapps in Vanilla, React, Vue en andere frameworks.
Over Ton Hordijk
Ton is als managing software engineer bij Capgemini gespecialiseerd in frontend development. Hij werkt al meer dan tien jaar voor grote financiële instellingen, waar hij ervaring opdeed met de nieuwste frontend-technieken op enterprise-level. De laatste jaren verdiept hij zich in web components, een passie die hij graag deelt met jou!
