¿Qué es un polyfill?

La definición más básica de un polyfill (o polyfiller), es la de un fragmento de código que proporciona la tecnología que el desarrollador espera que el navegador proporcione de forma nativa. Lo que hace que un polyfill sea diferente […] es que si eliminas el script de polyfill el código continuaría funcionando.

El término fue acuñado por Remy Sharp en Introducing HTML5. Los polyfills se ajustan a la definición de “un shim que trae una nueva API a un entorno más antiguo, utilizando sólo los medios de dicho entorno”. Por otra parte, un shim es un fragmento de código que se utiliza para corregir el comportamiento del código que ya existe, generalmente al agregar una nueva API que soluciona el problema.

Los Polyfills han existido durante varios años y permiten a los desarrolladores aprovechar las API en todos los navegadores, antiguos y nuevos. Los polyfills de JavaScript se pueden dividir aproximadamente en dos categorías:

• Extensiones del Modelo de Objetos del Documento (DOM) o Modelo de objetos del navegador.
• Extensiones de los objetos de ECMAScript principales.

Por ejemplo, los polyfills puede permitir crear aplicaciones avanzadas usando características de HTML5. Características como la etiqueta de video o características de ECMAScript 5, como JSON.parse. Evitan tener que desarrollar implementaciones múltiples para múltiples navegadores.

Uso de los polyfills

¿Por qué usar los polyfills?

En otras palabras, los polyfills son una forma de habilitar el uso de código moderno. Se trata de hacer que aquellos navegadores que no son compatibles con una característica. Esto a través fallbacks, código javascript que se encarga de realizar dicha funcionalidad.

Ventajas de los polyfills

El uso de los polyfills en nuestras aplicaciones nos provee de diversas ventajas. Entre ellas se encuentra la de olvidarnos de los conflictos con navegadores antiguos. De esta manera, podemos desarrollar páginas web concentrándonos exclusivamente en los nuevos estándares.

Algunos ejemplos de polyfills

Polyfill para String de ES6

Un ejemplo de un polyfill es el siguiente código. Es un polyfill para el nuevo método String de ES6, startsWith():

(ejemplo tomado del artículo Introduction To Polyfills & Their Usage de Medium. Autor: Anurag Majumdar)

Las líneas de código anteriores son para que el navegador entienda si se tiene soporte nativo para la característica startsWith().

Además, if(!String.prototype.startsWith) evita la sobre-escritura del método nativo startsWith() del navegador. Si la función no está presente, el polyfill rellena el agujero en el conjunto de funciones del navegador.

Polyfill para sessionStorage

Otro ejemplo sería el uso de sessionStorage. Su uso está disponible en los navegadores más recientes, pero no en más antiguos. Para este caso, se puede utilizar un polyfill para conectar el soporte para los navegadores que no lo proporcionen. Con esto, uno puede confiar en utilizar la Web Storage API y no tener que realizar pruebas en el código.

Babel

Cuando usamos las características modernas del lenguaje, algunos motores pueden no admitir dicho código. Así pues, no todas las características se implementan en todas partes. Entre varios ejemplos y herramientas, existe una llamada Babel.

Babel es un transpiler, el cual reescribe el código JavaScript moderno en un estándar anterior y para esto emplea dos partes.

En primer lugar, el transpiler, que reescribe el código. Después de eso se ejecuta en la computadora. Luego se vuelve a escribir el código en el estándar más antiguo. Finalmente el código se entrega al sitio web para los usuarios.

En segundo lugar, el polyfill. El transpiler reescribe el código, por lo que las características de sintaxis están cubiertas. Pero para las nuevas funciones necesitamos escribir un script especial que las implemente. Los scripts no sólo pueden agregar nuevas funciones, sino también modificar las incorporadas. Esto último con la finalidad de que se comporten de acuerdo con el estándar moderno.

Polyfills en Babel

Dos polyfills interesantes para el uso de Babel son:

• Babel Polyfill que soporta mucho, pero es grande.
• Servicio polyfill.io que permite cargar/construir polyfills dependiendo de las características que necesitemos.

En conclusión…

Cuando se trata de usar polyfills en JavaScript es posible obtener los beneficios de escribir código fuente compatible en todos los navegadores. Mediante los polyfills podemos tener las expectativas de no se “romperá” nada en la página.

Una lista con más ejemplos de polyfills se encuentra en este enlace.