Polyfill: módulos de código para la web moderna

Los llamados polyfills permiten usar nuevas funciones web en na­ve­ga­do­res que ya no tienen soporte nativo. En este artículo, de­s­cu­bri­rás qué son estos módulos de código y cómo puedes usar esta te­c­no­lo­gía.

¿Qué quiere decir polyfill?

Un polyfill o po­l­y­fi­ller es un módulo de código más o menos extenso que hace que las funciones modernas de HTML, CSS o Ja­va­S­cri­pt estén di­s­po­ni­bles en na­ve­ga­do­res antiguos que ya no son co­m­pa­ti­bles con estas. En la mayoría de los casos, los polyfills están escritos en Ja­va­S­cri­pt, pero hay otros lenguajes de pro­gra­ma­ción web que se pueden usar de base para estos scripts de llenado. Entre las funciones más im­po­r­ta­n­tes que pueden adaptarse a los na­ve­ga­do­res con polyfills se incluyen co­m­po­ne­n­tes HTML5 como el canvas-element, basado en mapas de bits, para gráficos, diagramas y ani­ma­cio­nes.

¿Qué tipos de polyfills existen?

El hecho de que el término polyfill esté tan es­tre­cha­me­n­te ligado al HTML5 no es una coin­ci­de­n­cia: con sus ca­ra­c­te­rí­s­ti­cas avanzadas, que han dejado obsoletos a los vídeos en flash, entre otras cosas, la quinta versión del lenguaje de marcado de hi­pe­r­te­x­to se ha co­n­ve­r­ti­do rá­pi­da­me­n­te en un elemento pe­r­ma­ne­n­te en la web. Respecto a la co­m­pa­ti­bi­li­dad de HTML5 con los na­ve­ga­do­res, sin embargo, el de­sa­rro­llo fue re­la­ti­va­me­n­te lento. Además de los polyfills para HTML5, también se necesitan módulos de código polyfill para la in­te­gra­ción de los si­guie­n­tes elementos web:

• Gráficos SVG: aunque el formato SVG (Scalable Vector Graphics) ha sido re­co­me­n­da­do por el W3C Ko­n­so­r­tium como formato estándar para gráficos ve­c­to­ria­les desde 2001, solo ha avanzado desde HTML5. Dado que muchos na­ve­ga­do­res aún no ofrecen co­m­pa­ti­bi­li­dad, existen polyfills de SGV, como svgweb.
• EC­MA­S­cri­pt: EC­MA­S­cri­pt es el núcleo del lenguaje declarado estándar de Ja­va­S­cri­pt, que pasa re­vi­sio­nes pe­rió­di­cas para ampliar gra­dua­l­me­n­te la fu­n­cio­na­li­dad del lenguaje de scripting. Las últimas fu­n­cio­na­li­da­des, como los objetos-promesa o las funciones-símbolo, funcionan también en las versiones más antiguas de na­ve­ga­do­res gracias a polyfills de la bi­blio­te­ca estándar de Java Script core-js.
• Al­ma­ce­na­mie­n­to web: las al­te­r­na­ti­vas a cookies Local Storage (al­ma­ce­na­mie­n­to pe­r­ma­ne­n­te en las páginas del cliente) y Session Storage (al­ma­ce­na­mie­n­to solo de sesión actual), que pueden resumirse bajo el término genérico de al­ma­ce­na­mie­n­to web (Web Storage) o al­ma­ce­na­mie­n­to DOM (DOM Storage), tampoco son co­m­pa­ti­bles con todas las versiones de los na­ve­ga­do­res. Un polyfill famoso, escrito para responder a estos problemas, es el polyfill de al­ma­ce­na­mie­n­to web, con licencia del MIT.
• Cross-Origin Resource Sharing (CORS): CORS permite a las apli­ca­cio­nes web acceder a recursos web fuera de su propio servidor. Muchos na­ve­ga­do­res antiguos no son ya co­m­pa­ti­bles con este in­te­r­ca­m­bio de datos. Se soluciona con una co­m­bi­na­ción del paquete Ja­va­S­cri­pt XDomain y el polyfill CORS XHook.
• CSS (Cascading Style Sheets): CSS es una de las he­rra­mie­n­tas más im­po­r­ta­n­tes para el diseño gráfico de páginas web desde hace años. Con el paso de los años, las hojas de estilo se han vuelto cada vez más ve­r­sá­ti­les, por lo que se emplean cada vez más polyfills como interfaz para los modelos de na­ve­ga­do­res más antiguos. Una de las so­lu­cio­nes más famosas es css-polyfills.js.
• Geo­lo­ca­li­za­ción: durante muchos años, la API de geo­lo­ca­li­za­ción, usada para enviar la propia ubicación, solo se podía utilizar con la ayuda de co­m­ple­me­n­tos adi­cio­na­les del navegador y no era co­m­pa­ti­ble con los na­ve­ga­do­res por defecto. Si quieres que la función esté di­s­po­ni­ble para los usuarios de versiones an­te­rio­res de clientes web sin ex­te­n­sio­nes, puedes utilizar un polyfill.

¿Cómo se utilizan los polyfills? Ejemplos incluidos

Los polyfills de Ja­va­S­cri­pt, o los scripts de polyfill en general, se pueden incrustar di­re­c­ta­me­n­te en el documento HTML de un proyecto web. Se integran a la pe­r­fe­c­ción en el código fuente existente y, si se programan co­rre­c­ta­me­n­te, solo se ejecutan si el navegador de acceso no es co­m­pa­ti­ble con la función web co­rre­s­po­n­die­n­te. Para esto, Ja­va­S­cri­pt utiliza por ejemplo la expresión if que se puede emplear para definir la co­m­pa­ti­bi­li­dad que falta como condición para activar el script. En estos dos ejemplos se ilustra cómo se debe registrar esto exac­ta­me­n­te en el código y cómo se ve la es­tru­c­tu­ra de un polyfill en general.

Ejemplo 1: polyfill para el método Ja­va­S­cri­pt sta­rts­Wi­th()

if (!String.prototype.startsWith) { 
    String.prototype.startsWith = function (searchString, position) { 
        position = position || 0; 
        return this.indexOf(searchString, position) === position; 
    };

Este pequeño fragmento de Ja­va­S­cri­pt permite al navegador al que llama utilizar el método Ja­va­S­cri­pt sta­rts­Wi­th(), incluso si no es co­m­pa­ti­ble con él. Este método, que forma parte de la es­pe­ci­fi­ca­ción de EC­MA­S­cri­pt 6, determina si una cadena o string de­te­r­mi­na­do comienza con los ca­ra­c­te­res 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 de­sa­rro­lla­dor Mathias Bynens ha pro­po­r­cio­na­do una variante más compleja y op­ti­mi­za­da de polyfill para integrar el método sta­rts­Wi­th() en GitHub.

Ejemplo 2: polyfill de al­ma­ce­na­mie­n­to web

El segundo ejemplo de polyfill Ja­va­S­cri­pt presenta una solución de código simple que permite que el al­ma­ce­na­mie­n­to local o de sesión estén di­s­po­ni­bles en los modelos de na­ve­ga­do­res más antiguos.

if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') { 
    (function () { 
        var data = {}; 
 
        var Storage = function (type) { 
            function setData() { 
                // Implement the logic to set data into storage 
                var storageData = JSON.stringify(data); 
                document.cookie = type + '=' + storageData + ';path=/'; 
            } 
 
            function clearData() { 
                data = {}; 
                setData(); 
            } 
 
            return { 
                length: 0, 
                clear: function () { 
                    clearData(); 
                    this.length = 0; 
                }, 
                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; 
                        ctr++; 
                    } 
                    return null; 
                }, 
                removeItem: function (key) { 
                    delete data[key]; 
                    this.length--; 
                    setData(); 
                }, 
                setItem: function (key, value) { 
                    data[key] = value + ''; 
                    this.length++; 
                    setData(); 
                } 
            }; 
        }; 
 
        // 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 Im­me­dia­te­ly Invoked Function Ex­pre­s­sion (IIFE), o sea, una expresión de función ejecutada in­me­dia­ta­me­n­te. Sin embargo, antes de que el navegador la cargue, se comprueba si el cliente es co­m­pa­ti­ble de forma nativa con las te­c­no­lo­gías de al­ma­ce­na­mie­n­to web, como en el primer ejemplo, uti­li­za­n­do 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 al­ma­ce­na­mie­n­to locales y de sesión están definidos. En co­n­se­cue­n­cia, el polyfill se descarta.