À retenir
- Sert à la compatibilité ascendante (faire tourner du neuf sur du vieux).
- C'est une solution temporaire en attendant que les navigateurs se mettent à jour.
- Il imite exactement le comportement d'une fonction officielle.
Un polyfill est un morceau de code (généralement en JavaScript) utilisé pour apporter des fonctionnalités modernes à des navigateurs web anciens qui ne les gèrent pas nativement. On peut le comparer à une prothèse ou à un adaptateur qui permet à un vieil appareil de lire un format de fichier récent.
Étymologie
Le terme a été inventé par le développeur Remy Sharp en 2009. C'est un jeu de mots avec Polyfilla, une marque britannique de mastic utilisée pour reboucher les fissures dans les murs. En informatique, le polyfill vient donc « boucher les trous » de compatibilité d'un navigateur.
Exemples d'usage
- Ajouter le support de la méthode
Array.prototype.includes()sur Internet Explorer 11. - Permettre l'utilisation de l'API
fetch(pour les requêtes réseau) sur des navigateurs qui ne connaissent que l'ancien systèmeXMLHttpRequest. - Simuler le fonctionnement des
Promisespour gérer des opérations asynchrones sur de vieux systèmes.
Cas d'usage
Ce concept est omniprésent dans le développement web front-end. Il permet aux développeurs d'utiliser les dernières nouveautés du langage JavaScript ou du HTML5 tout en garantissant que le site restera fonctionnel pour les utilisateurs qui n'ont pas mis à jour leur navigateur.
Bonnes pratiques
Il est conseillé de ne charger les polyfills que si le navigateur en a réellement besoin (via la détection de fonctionnalités). Charger systématiquement tous les polyfills alourdirait inutilement le site pour les utilisateurs disposant de navigateurs modernes.
Synonymes
Antonymes
Conseil
Si vous débutez, utilisez des outils comme Babel ou des services comme Polyfill.io. Ils automatisent l'ajout de ces correctifs en fonction des navigateurs que vous souhaitez supporter, ce qui vous évite de les gérer manuellement.
Questions fréquentes
Quelle est la différence entre un polyfill et un shim ?
Un polyfill imite une API standard de manière transparente (le code est identique au standard), tandis qu'un shim est une bibliothèque qui apporte une fonctionnalité mais avec sa propre syntaxe.
Est-ce que l'utilisation de polyfills est risquée ?
Le principal risque est la performance : trop de polyfills ralentissent le chargement de la page. Il faut les utiliser avec parcimonie.