Een polyfill is een stukje code dat een oudere browser leert iets te doen wat hij van zichzelf niet ondersteunt. Er komen voortdurend nieuwe webfuncties bij, maar niet iedereen werkt zijn browser bij. Een polyfill overbrugt dat gat stilletjes en laat de moderne functie werken waar dat anders niet zou lukken. De naam komt van een merk vulmiddel, het spul waarmee je gaten in een muur dichtsmeert.
Een goede vergelijking is een verloopstekker op reis. Het stopcontact in het buitenland heeft een andere vorm, maar de adapter laat je oplader werken alsof je thuis bent. De polyfill is die adapter. Jouw code vraagt om een moderne functie en de polyfill laat de oude browser correct reageren. Het is een van de belangrijkste middelen voor goede browsercompatibiliteit, en polyfills zijn meestal kleine stukjes JavaScript die het gat opsporen en opvullen.
Het addertje is dat elke polyfill gewicht aan de pagina toevoegt, dus ze blind laden vertraagt de boel voor iedereen. De verstandige aanpak is om te detecteren wat de browser van een bezoeker echt mist en de patch alleen te leveren als het nodig is. Moderne bezoekers slepen dan geen extra ballast mee, terwijl de zeldzame oude browser toch krijgt wat hij nodig heeft om de pagina netjes te tonen zonder lege vlakken of haperende knoppen.
Een polyfill is niet hetzelfde als een transpiler, en dat verschil telt. Een tool als Babel herschrijft nieuwe syntax naar oude syntax tijdens de build, zodat de browser de moderne code nooit ziet. Een polyfill draait pas tijdens het laden en voegt een ontbrekende functie of object toe, zoals Promise of fetch, dat de syntax alleen niet kan leveren. Vaak heb je allebei nodig. Er is ook een grens: sommige functies zitten zo diep in de browser dat geen enkel script ze kan nabootsen.
Bij TopDevs houden we polyfills licht en voorwaardelijk, zodat moderne bezoekers een snelle site krijgen en de zeldzame oude browser toch iets werkends ziet in plaats van een kapotte pagina vol foutmeldingen.
