Shims et Polyfills : de quoi s'agit-il ?

Qu’est-ce qu’un shim ?

Un shim (littéralement « cale ») est un morceau de code destiné à reproduire ou étendre des fonctionnalités dans des environnements où elles ne sont pas nativement disponibles.

Ces shims jouent en quelques sortes le rôle de « prothèse logicielle », permettant à des fonctionnalités plus récentes ou spécifiques de fonctionner dans des systèmes plus anciens ou différents de ceux pour lesquels elles ont été initialement conçues.

La plupart des shims implémentent la rétrocompatibilité d’une fonctionnalité du langage JavaScript (méthode, API web, etc.), d’une balise HTML ou d’une propriété CSS au sein d’un navigateur.

Par exemple, un shim pourrait implémenter dans des navigateurs qui ne la supportent pas nativement une méthode JavaScript moderne comme Array.prototype.includes.

Différences entre shim et polyfill ?

Bien que les termes « shim » et « polyfill » soient souvent utilisés de manière interchangeable, il existe une différence subtile entre les deux :

• Shim : Un shim peut reproduire des fonctionnalités existantes ou étendre des fonctionnalités supplémentaires.
• Polyfill : Un polyfill se concentre sur la reproduction exacte de la fonctionnalité manquante. Il vise à fournir une implémentation conforme à la spécification d’origine. Un polyfill est donc par extension un shim.

Pourquoi utiliser des shims et polyfills ?

1. Compatibilité

Les shims et polyfills permettent aux développeurs d’utiliser des fonctionnalités modernes tout en maintenant la compatibilité avec des navigateurs ou des environnements plus anciens.

2. Interopérabilité

Ils permettent aux développeurs de travailler avec des bibliothèques et des frameworks modernes, reposant sur des fonctionnalités récentes sans se soucier des limitations des navigateurs ou des environnements d’exécution.

3. Adoption Progressive

Ils facilitent l’adoption progressive de nouvelles fonctionnalités en permettant aux utilisateurs de bénéficier de nouvelles capacités, tout en assurant un support pour les versions plus anciennes.

Exemples de shims/polyfills

Certaines fonctionnalités dont la compatibilité n’est pas encore maximale peuvent nécessiter des polyfills. C’est entre autres le cas de :

• L’API fetch en JS, pour effectuer des requêtes HTTP.
• Les promesses avec Promise, pour traiter le résultat d’opérations asynchrones.
• Flexbox, le module de placement CSS.
• Les variables CSS
• Les conteneurs sémantiques HTML
• Importmaps, facilitant l’import de code JS sans système de build
• Etc.

Pour illustrer cela, prenons l’exemple de la méthode JS Array.prototype.includes, qui permet de vérifier si un tableau contient un certain élément. Cette méthode n’est pas disponible dans les navigateurs plus anciens.

Voici un exemple de polyfill possible, implémentant cette méthode en JS :

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    // Convertir this en objet
    var O = Object(this);

    // Obtenir la longueur du tableau
    var len = parseInt(O.length) || 0;

    // Si la longueur est 0, retourner false
    if (len === 0) {
      return false;
    }

    // Convertir fromIndex en entier
    var n = parseInt(fromIndex) || 0;

    // Déterminer l'index de départ
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }

    // Parcourir le tableau à partir de l'index de départ
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
          (searchElement !== searchElement && currentElement !== currentElement)) {
        return true;
      }
      k++;
    }

    // Si l'élément n'est pas trouvé, retourner false
    return false;
  };
}