Quelle est la différence entre une cale et un polyfill?

406

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

Alors ici, nous collectons toutes les cales, les remplacements et les polyfills ...

Ou, il y a le projet es5-shim .

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

Domenic
la source
6
rouvrir: Je suppose que "que dois-je appeler ce répertoire" pourrait être basé sur l'opinion, mais il n'est vraiment pas donné le contexte plus large de la question - ni est l'aspect le plus important de cette question. Toutes les réponses ici semblent être en accord, et il y a une utilisation importante de faits, de références et d'expertise spécifique.
nobar

Réponses:

386
  • Un shim est un morceau de code qui effectue l'interception d'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 cale qui modernise les navigateurs hérités avec des fonctionnalités HTML5 / CSS3 modernes utilisant généralement Javascript ou Flash.

Pour répondre à votre question spécifique, appelez votre répertoire shimssi vous souhaitez conserver le répertoire générique.

Arsalan Ahmed
la source
234

Shim

Si vous connaissez le modèle d'adaptateur, vous savez ce qu'est une cale. Shims intercepte les appels d'API et crée une couche abstraite entre l'appelant et la cible. En règle générale, des cales sont utilisées pour une compatibilité descendante. Par exemple, le package npm es5-shim vous permettra d'écrire la syntaxe ECMAScript 5 (ES5) sans vous soucier si le navigateur exécute ES5 ou non. Prenez l' exemple de Date.now . Il s'agit d'une nouvelle fonction dans ES5 où la syntaxe dans ES3 serait new Date (). GetTime () . Si vous utilisez le shim es5, vous pouvez écrire Date.now et si le navigateur que vous utilisez prend en charge ES5, il s'exécutera simplement. Cependant, si le navigateur exécute le moteur ES3, es5-shim interceptera l'appel à Date.nowet renvoyez simplement new Date (). getTime () à la place. Cette interception est appelée calage. Le code source pertinent de es5-shim ressemble à ceci:

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

Polyfill

Le polyfilling n'est vraiment qu'une version spécialisée du calage. Polyfill consiste à implémenter des fonctionnalités manquantes dans une API, alors qu'un shim ne serait pas nécessairement autant à implémenter des fonctionnalités manquantes qu'à corriger des fonctionnalités. Je sais que cela semble trop vague, mais lorsque les shims sont utilisés comme un terme plus large, polyfill est utilisé pour décrire les shims qui offrent une compatibilité descendante pour les navigateurs plus anciens. Ainsi, alors que les cales sont utilisées pour couvrir les anciens péchés, les polyfills sont utilisés pour apporter des améliorations futures dans le temps. Par exemple, il n'y a pas de prise en charge de sessionStorage dans IE7, mais le polyfill dans le package sessionstorage npm ajoutera cette fonctionnalité dans IE7 (et versions antérieures) en utilisant des techniques telles que le stockage de données dans la propriété name de la fenêtre ou en utilisant des cookies.

Kjetil Klaussen
la source
107
Ainsi, alors que les cales sont utilisées pour couvrir les anciens péchés, les polyfills sont utilisés pour apporter des améliorations futures dans le temps. Cela me résume tout. Merci pour une explication claire.
JohnnyQ
Cette réponse est utile, merci. Mais il me semble que les deux termes ne sont souvent pas utilisés précisément sur le Web, y compris es5-shim. Je pense que es5-shim est un mélange de cales et de polyfills selon votre définition.
Matt Browne
WOW -> Alors que les cales sont utilisées pour couvrir les anciens péchés, les polyfills sont utilisés pour ramener les améliorations futures dans le temps. <- Merci beaucoup!
zeppelin
3
L'exemple de date ressemble à un Polyfill pour moi. Pourquoi je pense que c'est un Polyfill? Parce que Date.now est un appel natif. Un Polyfill ajoutera cette fonctionnalité avec la même API transparente au navigateur. Une cale est livrée avec une nouvelle API comme: MyShim.Date.now(); Veuillez me corriger si je me trompe.
TatzyXY
99

D'après ce que je comprends:

Un polyfill est un code qui détecte si une certaine API «attendue» est manquante et l'implémente 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 l'autre navigateur. Ou, si un navigateur a un bogue dans l'une de ses API, vous pouvez à nouveau intercepter les appels vers cette API, puis contourner le bogue.

Šime Vidas
la source
66

Citant Axel Rauschmayer de son livre Speaking JavaScript :

  • 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 une cale 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 [polyfills] aident à lisser les fissures et nous donnent un joli mur lisse de navigateurs avec lesquels travailler.

Bergi
la source
9

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, Remy Sharp a blogué 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 du navigateur qu'il fournisse nativement. Aplatir le paysage API si vous le souhaitez.

Sagittaire
la source
8

Un article fantastique écrit à ce sujet il y a quelques années 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'est-à-dire JavaScript) qui corrigerait certaines fonctionnalités, mais il aurait le plus souvent sa propre API .

Polyfill: quelque chose que vous pourriez ajouter (c'est-à-dire JavaScript) et cela fonctionnerait silencieusement pour imiter les API de navigateur existantes qui ne sont pas prises en charge autrement.

atconway
la source
1
Je pense que c'est une représentation trompeuse à la fois de l'utilisation courante et de ce que Remy Sharp dit réellement dans un article de blog que vous avez lié. Shim est le plus souvent utilisé comme synonyme de polyfill de nos jours (voir en particulier les ES5-shim et ES6-shim ) et Remy est notamment de dire que pour lui le mot « shim » fait allusion à une API personnalisée (par comparaison avec shim.gif). Il ne dicte pas du tout que les mots soient utilisés de cette façon et, en me disant "à moi", il reconnaît tacitement que son usage n'est pas universel.
Mark Amery