Papa, c'est quoi un Polyfill ?

Papa, c'est quoi un Polyfill ?


Avec l'avènement du js natif, et la multiplication des navigateurs et des environnements (mobile, desktop, tablette), on entend de plus en plus dans nos open-spaces :

«-Dis, tu connaîtrais pas un polyfill ?»

Mais c'est qui ce polyfill ?

Définition :

Un polyfill, c'est simple. C'est un ensemble de fonctions permettant de simuler, sur un navigateur web ancien, des fonctionnalités qui ne sont pas nativement disponible. (cf : Wikipédia)

En clair, c'est comme à l'époque avec le double CSS, un spécialement pour IE et un pour le reste. Aujourd'hui les navigateurs n'implémentent pas à la même vitesse les nouvelles fonctionnalités disponibles par javascript natif. Nous devons alors utiliser un polyfill pour que celle-ci soient disponibles partout. Et là je vous entend me dire :

«-Mais c'est pas ce que Jquery fait déjà ?»

Alors non, ce n'est pas exactement ce que fait Jquery. En effet, ce dernier est une surcouche qui permet d'utiliser les mêmes fonctions js sur l'ensemble des navigateurs, mais ce n'est pas un polyfill, car il renomme les fonctions et n'utilise pas directement la fonction native. Encore une fois, vous allez me dire :

«-Mais alors, c'est quoi le polyfill ?»

C'est simple. Prenons la fonction native javascript "fetch", qui permet d'appeler des urls en XHR. Si vous allez sur le site Can I Use ?, vous verrez que vous ne pouvez pas utiliser cette fonction sur IOS 10. Alors vous pouvez utiliser la fonction "ajax" de Jquery mais en échange vous avez chargé l'ensemble de Jquery et n'utilisez pas la puissance de votre navigateur. C'est là qu'il vous faut le polyfill "fetch" disponible ici https://github.com/github/fetch. Il vous suffit de l'importer et alors la fonction "fetch" sera disponible pour l'ensemble des navigateurs, même IOS 10. Et maintenant, je vous entend encore:

«-Je trouve pas mon polyfill, alors comment je le développe ?»

Comment implémenter un polyfill ?

Nous allons faire simple, aujourd'hui nous voulons utiliser la fonction "Object.assign()" permettant de créer un nouvel object js.

Si vous allez sur Can I Use vous trouvez la page suivante :

Donc comme vous pouvez le voir, la fonction n'est pas implémentée sur IE11. Nous allons donc faire le polyfill nous même.

Il suffit d'abord de vérifier l'existence de la fonction :

if (typeof Object.assign != 'function') { // La fonction n'existe pas }

Si elle n'existe pas alors on la surcharge avec notre polyfill, et en js il suffit de définir la fonction :

if (typeof Object.assign != 'function') { Object.assign = function (target, varArgs) { 'use strict'; // on developpe }; }

Et maintenant on fait le développement :

if (typeof Object.assign != 'function') { Object.assign = function (target, varArgs) { 'use strict'; if (target == null) { // TypeError if undefined or null throw new TypeError('Cannot convert undefined or null to object'); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { // Skip over if undefined or null for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }; }

Et voilà ! Vous avez un polyfill ! Normalement il y a un polyfill pour tout alors avant de l'implémenter, go to Google.

Auteur(s)

Jonathan Jalouzot

Jonathan Jalouzot

Lead développeur au @lemondefr, mes technologies sont le symfony depuis 2009, le nodejs, l'angularjs, rabbitMq etc ... J'adore les médias et aimerai continuer dans ce secteur plein de surprise. Vous pouvez me retrouver sur les réseaux sociaux: Twitter: @captainjojo42 Instagram: @captainjojo42 Linkedin: https://fr.linkedin.com/in/jonathanjalouzot Github: https://github.com/captainjojo

Voir le profil

Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !

Notre équipe d'experts répond à toutes vos questions.

Nous contacter

Découvrez nos autres contenus dans le même thème

À la découverte de l'Anchor positioning API

La nouvelle Anchor positioning API en CSS

L'Anchor positioning API est arrivée en CSS depuis quelques mois. Expérimentale et uniquement disponible à ce jour pour les navigateurs basés sur Chromium, elle est tout de même très intéressante pour lier des éléments entre eux et répondre en CSS à des problématiques qui ne pouvaient se résoudre qu'en JavaScript.