¿Cuál es la diferencia entre una cuña y un polyfill?

406

Ambos parecen ser utilizados en círculos de desarrollo web, ver, por ejemplo, HTML5 Cross Browser Polyfills , que dice:

Así que aquí estamos recolectando todas las cuñas, retrocesos y polyfills ...

O, está el proyecto es5-shim .

En mi proyecto actual estamos usando varios de estos, y quiero pegarlos todos en el mismo directorio. Entonces, ¿cómo debo llamar a este directorio --- shimso polyfills?

Domenic
fuente
66
reabrir: Supongo que "cómo debería llamar a este directorio" podría estar basado en opiniones, pero realmente no se le da el contexto más amplio de la pregunta, ni ese es el aspecto más importante de esta pregunta. Todas las respuestas aquí parecen estar de acuerdo, y hay un uso significativo de hechos, referencias y experiencia específica.
nobar

Respuestas:

386
  • Una cuña es cualquier pieza de código que realiza la intercepción de una llamada API y proporciona una capa de abstracción. No está necesariamente restringido a una aplicación web o HTML5 / CSS3.

  • Un polyfill es un tipo de shim que adapta navegadores heredados con características modernas de HTML5 / CSS3 que usualmente usan Javascript o Flash.

Responda su pregunta específica, llame a su directorio shimssi desea mantener el directorio genérico.

Arsalan Ahmed
fuente
234

Calce

Si está familiarizado con el patrón del adaptador, entonces sabe lo que es una cuña. Shims intercepta las llamadas a la API y crea una capa abstracta entre la persona que llama y el objetivo. Típicamente, las cuñas se usan para la compatibilidad con versiones anteriores. Por ejemplo, el paquete es5-shim npm le permitirá escribir la sintaxis de ECMAScript 5 (ES5) y no le importará si el navegador ejecuta ES5 o no. Tome Date.now como ejemplo. Esta es una nueva función en ES5 donde la sintaxis en ES3 sería nueva Date (). GetTime () . Si usa el es5-shim , puede escribir Date.now y si el navegador en el que está ejecutando admite ES5, simplemente se ejecutará. Sin embargo, si el navegador está ejecutando el motor ES3, es5-shim interceptará la llamada a Date.nowy simplemente devolver new Date (). getTime () en su lugar. Esta intercepción se llama shimming. El código fuente relevante de es5-shim se ve así:

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

Polyfill

Polyfilling es realmente solo una versión especializada de shimming. Polyfill se trata de implementar características faltantes en una API, mientras que una cuña no necesariamente se trata tanto de implementar características faltantes como de corregirlas. Sé que esto parece demasiado vago, pero cuando las cuñas se usan como un término más amplio, polyfill se usa para describir las cuñas que proporcionan compatibilidad hacia atrás para los navegadores más antiguos. Entonces, mientras que las cuñas se usan para encubrir viejos pecados, los polyfills se usan para traer mejoras futuras en el tiempo. Como ejemplo, no hay soporte para sessionStorage en IE7, pero el polyfill en el paquete sessionstorage npm agregará esta característica en IE7 (y versiones anteriores) mediante el uso de técnicas como almacenar datos en la propiedad de nombre de la ventana o mediante cookies.

Kjetil Klaussen
fuente
107
Entonces, mientras que las cuñas se usan para encubrir viejos pecados, los polyfills se usan para traer mejoras futuras en el tiempo. Esto lo resume todo para mí. Gracias por una explicación clara.
JohnnyQ
Esta respuesta es útil, gracias. Pero me parece que los dos términos a menudo no se usan con precisión en la web, incluido es5-shim. Creo que es5-shim es una mezcla de cuñas y polyfills según su definición.
Matt Browne
WOW -> Entonces, mientras que las cuñas se usan para encubrir viejos pecados, los polyfills se usan para traer mejoras futuras en el tiempo. <- Muchas gracias!
zepelín
3
El Ejemplo de fecha me parece un Polyfill. ¿Por qué creo que es un Polyfill? Porque Date.now es una llamada nativa. Un Polyfill agregará esa función con la misma API sin inconvenientes al navegador. Una cuña viene con una nueva API como: MyShim.Date.now(); Por favor, corrígeme si estoy equivocado.
TatzyXY
99

Por lo que entiendo:

Un polyfill es un código que detecta si falta una determinada API "esperada" y la implementa manualmente. P.ej

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

Una cuña es un código que intercepta las llamadas API existentes e implementa un comportamiento diferente. La idea aquí es normalizar ciertas API en diferentes entornos. Entonces, si dos navegadores implementan la misma API de manera diferente, puede interceptar las llamadas a la API en uno de esos navegadores y hacer que su comportamiento se alinee con el otro navegador. O, si un navegador tiene un error en una de sus API, podría interceptar nuevamente las llamadas a esa API y luego evitar el error.

Šime Vidas
fuente
66

Citando a Axel Rauschmayer de su libro Speaking JavaScript :

  • Una cuña es una biblioteca que trae una nueva API a un entorno anterior, utilizando solo los medios de ese entorno.
  • Un polyfill es una cuña para una API de navegador. Por lo general, comprueba si un navegador admite una API. Si no es así, el polyfill instala su propia implementación. Eso le permite usar la API en cualquier caso. El término polyfill proviene de un producto de mejoras para el hogar; según Remy Sharp :

    Polyfilla es un producto del Reino Unido conocido como Spackling Paste en los EE. UU. Con eso en mente: piense en los navegadores como una pared con grietas. Estos [polyfills] ayudan a suavizar las grietas y nos dan una buena pared de navegadores para trabajar.

Bergi
fuente
9

Calce. Una cuña es una biblioteca que trae una nueva API a un entorno anterior, utilizando solo los medios de ese entorno.

Polyfill En octubre de 2010, Remy Sharp escribió en su blog sobre el término "polyfill" [a través de Rick Waldron]:

Un polyfill es un código (o complemento) que proporciona la tecnología que usted, el desarrollador, espera que el navegador proporcione de forma nativa. Acoplar el paisaje API si lo desea.

Sagitario
fuente
8

Un fantástico artículo escrito sobre esto desde hace unos años que lo explica bien:

¿Qué es un Polyfill?

En el artículo, los (2) simplemente se contrastan como tales:

Shim: un fragmento de código que podría agregar (es decir, JavaScript) que arreglaría algunas funcionalidades, pero que con frecuencia tendría su propia API .

Polyfill: algo que podría colocar (es decir JavaScript) y funcionaría silenciosamente para imitar las API de navegador existentes que de otro modo no serían compatibles.

atconway
fuente
1
Creo que esta es una representación engañosa tanto del uso común como de lo que Remy Sharp realmente dice en la publicación de blog a la que se ha vinculado. Shim se usa con mayor frecuencia como sinónimo de polyfill hoy en día (ver particularmente es5-shim y es6-shim ) y Remy es particular al decir que para él la palabra 'shim' aludía a una API personalizada (en comparación con shim.gif). No está dictando que las palabras se usen de esta manera, y al decir "para mí" está reconociendo tácitamente que su uso no es universal.
Mark Amery