Polyfill: módulos de código para la web moderna
Al usar el navegador en las visitas diarias a la web, muchos usuarios prefieren la tradición: una interfaz familiar y una colección de favoritos acumulada a lo largo de los años son los factores decisivos para que muchos usuarios se mantengan fieles al cliente web que siempre han utilizado. Tampoco siempre se da la prioridad necesaria a las actualizaciones, por lo que es probable que muchos visitantes de tu proyecto web utilicen navegadores que ya no sean compatibles con componentes de la web moderna como los elementos HTML5 o los gráficos SVG
Para poder captar también a estos usuarios, recomendamos usar los llamados polyfills. Estos prácticos módulos de código permiten utilizar las nuevas características en navegadores que ya no tienen soporte nativo. Aquí te explicamos en detalle qué quiere decir polyfill y cómo se puede utilizar esta tecnología.
¿Qué quiere decir polyfill?
Un polyfill o polyfiller es un módulo de código más o menos extenso que hace que las funciones modernas de HTML, CSS o JavaScript estén disponibles en navegadores antiguos que ya no son compatibles con estas. En la mayoría de los casos, los polyfills están escritos en JavaScript, pero hay otros lenguajes de programación web que se pueden usar de base para estos scripts de llenado. Entre las funciones más importantes que pueden adaptarse a los navegadores con polyfills se incluyen componentes HTML5 como el canvas-element, basado en mapas de bits, para gráficos, diagramas y animaciones.
El término “polyfill” proviene de la marca polyfilla, que se utiliza ampliamente en Gran Bretaña y que, en realidad, es una pasta de relleno para trabajos de renovación y reacondicionamiento. Debido a su función como masa para rellenar agujeros en las paredes, el desarrollador web Remy Sharp encontró en ella la comparación adecuada para los códigos paliativos para resolver problemas, razón por la cual los bautizó así en su libro Introducing HTML5, escrito con Bruce Lawson en 2009. polyfill fue entonces adoptado como el nombre oficial.
¿Qué tipos de polyfills existen?
El hecho de que el término polyfill esté tan estrechamente ligado al HTML5 no es una coincidencia: con sus características avanzadas, que han dejado obsoletos a los vídeos en flash, entre otras cosas, la quinta versión del lenguaje de marcado de hipertexto se ha convertido rápidamente en un elemento permanente en la web. Respecto a la compatibilidad de HTML5 con los navegadores, sin embargo, el desarrollo fue relativamente lento e, incluso en las ediciones más recientes, el moderno estándar de marcado no se ha implementado correctamente. Además de los polyfills para HTML5, también se necesitan módulos de código polyfill para la integración de los siguientes elementos web:
- Gráficos SVG: aunque el formato SVG (Scalable Vector Graphics) ha sido recomendado por el W3C Konsortium como formato para la integración de gráficos vectoriales desde 2001, solo ha avanzado desde HTML5. Dado que muchos navegadores aún no ofrecen compatibilidad, existen polyfills de SGV, como svgweb.
- ECMAScript: ECMAScript es el núcleo del lenguaje declarado estándar de JavaScript, que pasa revisiones periódicas para ampliar gradualmente la funcionalidad del lenguaje de scripting. Las últimas funcionalidades, como los objetos-promesa o las funciones-símbolo, funcionan también en las versiones más antiguas de navegadores gracias a polyfills de la biblioteca estándar de Java Script core-js.
- Almacenamiento web: las alternativas a cookies Local Storage (almacenamiento permanente en las páginas del cliente) y Session Storage (almacenamiento solo de sesión actual), que pueden resumirse bajo el término genérico de almacenamiento web (Web Storage) o almacenamiento DOM (DOM Storage), tampoco son compatibles con todas las versiones de los navegadores. Un polyfill famoso, escrito para responder a estos problemas, es el polyfill de almacenamiento web, con licencia del MIT.
- Cross-Origin Resource Sharing (CORS): CORS permite a las aplicaciones web acceder a recursos web fuera de su propio servidor. Muchos navegadores antiguos no son ya compatibles con este intercambio de datos. Se soluciona con una combinación del paquete JavaScript XDomain y el polyfill CORS XHook.
- CSS (Cascading Style Sheets): CSS es una de las herramientas más importantes para el diseño gráfico de sitios web desde hace años. Con el paso de los años, las hojas de estilo se han vuelto cada vez más versátiles, por lo que se emplean cada vez más polyfills como interfaz para los modelos de navegadores más antiguos. Una de las soluciones más famosas es css-polyfills.js.
- Geolocalización: durante muchos años, la API de geolocalización, usada para enviar la propia ubicación, solo se podía utilizar con la ayuda de complementos adicionales del navegador y no era compatible con los navegadores por defecto. Si quieres que la función esté disponible para los usuarios de versiones anteriores de clientes web sin extensiones, puedes utilizar un polyfill.
¿Cómo se utilizan los polyfills (incl. ejemplo)?
Los polyfills de JavaScript, o los scripts de polyfill en general, se pueden incrustar directamente en el documento HTML de un proyecto web. Se integran a la perfección en el código fuente existente y, si se programan correctamente, solo se ejecutan si el navegador de acceso no es compatible con la función web correspondiente. Para esto, JavaScript utiliza por ejemplo la expresión if, que se puede emplear para definir la compatibilidad que falta como condición para activar el script. En estos dos ejemplos se ilustra cómo se debe registrar esto exactamente en el código y cómo se ve la estructura de un polyfill en general.
Ejemplo 1: polyfill para el método JavaScript startsWith()
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}Este pequeño fragmento de JavaScript permite al navegador al que llama utilizar el método JavaScript startsWith(), incluso si no es compatible con él. Este método, que forma parte de la especificación de ECMAScript 6, determina si una cadena o string determinado comienza con los caracteres o con la secuencia de otro string. Si este es el caso, devuelve el valor true, de lo contrario devuelve el valor false. La primera línea de código hace que se desactive el script si el navegador soporta el método de forma nativa.
El desarrollador Mathias Bynens ha proporcionado una variante más compleja y optimizada de polyfill para integrar el método startsWith() en GitHub.
El código indicado no funciona si el cliente web de acceso bloquea JavaScript o si este lenguaje de script está desactivado en los ajustes.
Ejemplo 2: polyfill de almacenamiento web
El segundo ejemplo de polyfill JavaScript presenta una solución de código simple que permite que el almacenamiento local o de sesión estén disponibles en los modelos de navegadores más antiguos.
if (typeof window.localStorage == 'undefined' || typeof window.sessionStorage == 'undefined') (function () {
// Define the storage type (local or session)
var Storage = function (type) {
// Define the storage type (local or session)
function setData(data) {
// Sets the data into storage
}
function clearData() {
// clears data from storage
}
return {
length: 0,
clear: function () {
clearData();
},
getItem: function (key) {
return data[key] === undefined ? null : data[key];
},
key: function (i) {
var ctr = 0;
for (var k in data) {
if (ctr == i) return k;
else ctr++;
}
return null;
},
removeItem: function (key) {
delete data[key];
this.length--;
setData(data);
},
setItem: function (key, value) {
data[key] = value + '';
this.length++;
setData(data);
}
};
};
// Set the local and session storage properties inside the window
// object
if (typeof window.localStorage == 'undefined') window.localStorage = new Storage('local');
if (typeof window.sessionStorage == 'undefined') window.sessionStorage = new Storage('session');
})();El código aquí indicado es una Immediately Invoked Function Expression (IIFE), o sea, una expresión de función ejecutada inmediatamente. Sin embargo, antes de que el navegador la cargue, se comprueba si el cliente es compatible de forma nativa con las tecnologías de almacenamiento web, como en el primer ejemplo, utilizando la expresión if en la primera línea de código. Si este es el caso, la expresión if devuelve false (no aplicable), ya que los tipos de almacenamiento locales y de sesión están definidos. En consecuencia, el polyfill se descarta.
Artículos similares
Las librerías y los frameworks JavaScript más populares
Quien haya trabajado con JavaScript conoce la complejidad del DOM (Document Object Model). Para facilitar su manejo entran en juego los frameworks y las librerías, con los que los desarrolladores pueden hacerse eco de funciones que les hagan el trabajo más sencillo. Sin embargo, es inevitable preguntarse por los mejores frameworks y librerías JavaScript y por las diferencias que existen entre…
Tutorial básico de HTML: crea tu propio proyecto web
En la época de los sistemas de gestión de contenidos y plantillas para el diseño web, aprender HTML parece hoy una tarea superflua e innecesaria, y en realidad es todo lo contrario. En cuanto se presentan problemas de funcionamiento en una página o esta requiere la inclusión de elementos dinámicos, se revelará la necesidad de contar con conocimientos en HTML. En este completo tutorial de HTML para…
¿Cuáles son las novedades que ofrece HTML 5.1?
Ha pasado mucho tiempo hasta que el anhelado HTML5 viera la luz en otoño de 2014 y ahora, con HTML 5.1, se ha puesto a disposición la primera actualización del estándar web. A este respecto se han dado numerosos cambios, entre los que destaca la adaptación sencilla al diseño web responsivo. Sin embargo, a estos se suman diversas novedades en HTML, como el hecho de que algunos elementos y atributos…
FlashMovieShutterstock ¿Qué es un wrapper en programación?
Los envuelven distintos componentes de los programas como un sobre. El programa principal solo se comunica con el y este accede a las interfaces de las partes del programa que envuelve. Este proceso aporta a los desarrolladores de software un nivel de compatibilidad nunca visto a la hora de manejar diferentes bibliotecas, bases de datos o lenguajes de programación.
