web-dev-qa-db-fra.com

Quelle est la différence entre un shim et un polyfill?

Les deux semblent être utilisés dans les cercles de développement Web, voir par exemple. HTML5 Cross Browser Polyfills , qui dit:

Donc, ici, nous recueillons toutes les casses, les replis et les remplissages ...

Ou, il y a le projet es5-shim .

Dans mon projet actuel, nous en utilisons plusieurs, et je veux les coller tous dans le même répertoire. Alors, comment devrais-je appeler ce répertoire ---shims ou polyfills?

terminologynamingvocabularypolyfillsshim
372
Domenic

  • Un shim est un morceau de code qui intercepte un appel API et fournit une couche d'abstraction. Il n'est pas nécessairement limité à une application Web ou à HTML5/CSS3.

  • Un polyfill est un type de shim qui intègre les anciens navigateurs avec des fonctionnalités modernes de HTML5/CSS3 utilisant généralement Javascript ou Flash.

Répondant à votre question spécifique, appelez-le votre répertoire shims si vous souhaitez conserver le répertoire générique.

338
Arsalan Ahmed

Shim

Si vous connaissez le modèle d'adaptateur, vous saurez ce qu'est une cale. Shims intercepte les appels d'API et crée une couche abstraite entre l'appelant et la cible. Les cales sont généralement utilisées pour la compatibilité arrière. Par exemple, le package es5-shim = npm vous permettra d'écrire la syntaxe ECMAScript 5 (ES5) sans vous soucier de savoir si le navigateur exécute ES5 ou non. Prenons Date.now à titre d'exemple. Il s'agit d'une nouvelle fonction dans ES5 dont la syntaxe dans ES3 serait new Date (). GetTime () . Si vous utilisez le es5-shim vous pouvez écrire Date.now et si le navigateur que vous utilisez supporte ES5, il le fera. viens courir. Toutefois, si le navigateur exécute le moteur ES3 es5-shim , l'appel à Date.now sera simplement renvoyé new Date (). getTime () à la place. Cette interception s'appelle le calage. Le code source correspondant de es5-shim ressemble à ceci:

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

Polyfill

Le polyfilling n'est en réalité qu'une version spécialisée du calage. Polyfill concerne l’implémentation des fonctionnalités manquantes dans une API, alors qu’un shim ne serait pas nécessairement autant axé sur la mise en œuvre des fonctionnalités manquantes que sur la correction des fonctionnalités. Je sais que cela semble trop vague, mais lorsque les cales sont utilisées comme un terme plus général, polyfill est utilisé pour décrire les cales qui offrent une compatibilité ascendante pour les anciens navigateurs. Alors que les cales sont utilisées pour couvrir de vieux péchés, les polyfill sont utilisées pour ramener de futures améliorations dans le temps. Par exemple, il n'y a pas de support pour sessionStorage dans IE7, mais le polyfill dans le sessionstorage Le package npm ajoutera cette fonctionnalité à IE7 (et aux versions antérieures) en utilisant des techniques telles que le stockage des données dans la propriété name de la fenêtre ou en utilisant des cookies.

205
Kjetil Klaussen

D'après ce que j'ai compris:

Un polyfill est un code qui détecte si une certaine API "attendue" est manquante et le met en œuvre manuellement. Par exemple.

if (!Function.prototype.bind) { Function.prototype.bind = ...; }

Un shim est un code qui intercepte les appels d'API existants et implémente un comportement différent. L'idée ici est de normaliser certaines API dans différents environnements. Ainsi, si deux navigateurs implémentent la même API différemment, vous pouvez intercepter les appels d'API dans l'un de ces navigateurs et aligner son comportement sur celui de l'autre navigateur. Ou, si un navigateur a un bogue dans l'une de ses API, vous pouvez à nouveau intercepter les appels de cette API, puis contourner le bogue.

95
Šime Vidas

Citant Axel Rauschmayer de son livre JavaScript parlant :

  • Un shim est une bibliothèque qui apporte une nouvelle API à un environnement plus ancien, en utilisant uniquement les moyens de cet environnement.
  • Un polyfill est un shim pour une API de navigateur. Il vérifie généralement si un navigateur prend en charge une API. Si ce n’est pas le cas, le polyfill installe sa propre implémentation. Cela vous permet d'utiliser l'API dans les deux cas. Le terme polyfill vient d'un produit de rénovation domiciliaire; selon Remy Sharp :

    Polyfilla est un produit britannique appelé Spackling Paste aux États-Unis. Dans cet esprit, considérez les navigateurs comme un mur avec des fissures. Ces [polyfill] aident à lisser les fissures et nous donnent un joli mur de navigateurs lisse et agréable à utiliser.

63
Bergi

Shim. Un shim est une bibliothèque qui apporte une nouvelle API à un environnement plus ancien, en utilisant uniquement les moyens de cet environnement.

Polyfill. En octobre 2010, Rémy Sharp a écrit sur le terme "polyfill" [via Rick Waldron]:

Un polyfill est un morceau de code (ou plugin) qui fournit la technologie que vous, le développeur, attendez de la part du navigateur. Aplatissement du paysage des API si vous voulez.

9
Sagittarius

Un article fantastique écrit à ce sujet il y a quelques années et qui explique bien cela:

Qu'est-ce qu'un Polyfill?

Dans l'article, les (2) sont simplement contrastés en tant que tels:

Shim: un morceau de code que vous pourriez ajouter (c.-à-d. JavaScript) qui corrigerait certaines fonctionnalités, mais aurait le plus souvent c'est sa propre API .

Polyfill: quelque chose que vous pourriez laisser tomber (c.-à-d. JavaScript) et qui fonctionnerait silencieusement pour imiter API de navigateur existantes qui, par ailleurs, ne sont pas prises en charge.

6
atconway