Polyfill Y Carga De Scripts Bajo Demanda En Javascript

En el mundo de javascript hay términos que son en principio muy confusos, tales como “polyfill” o “On-Demand Script Loading”. Estos términos en ingles son comúnmente utilizados y son ampliamente usados en la actualidad por los frameworks de javascript. En este post pretendo explicarles que es cada uno y como ambos están relacionados.

Qué Es Polyfill?

Comencemos diciendo que los navegadores y sus desarrolladores hoy en día están en una constante carrera por mantenerse al día con los estándares que dicta la W3C. Esta organización es la que se encarga de diseñar las especificaciones de las características de los lenguajes que utilizamos para programar la web.

Por ejemplo: En la especificación javascript 1.6 se introdujo una nueva función a los Arrays, esta fue: forEach. Era una función muy practica que todos queríamos usar de inmediato para nuestro desarrollo frontend, sin embargo, los navegadores aun no la habían implementado. Esto representa un problema, principalmente porque no todos los usuarios finales tienen la costumbre de actualizar sus navegadores, pero los desarrolladores si que tienen la costumbre de usar lo ultimo que ha salido!

Entonces para solventar este problema creamos un polyfill que es básicamente decirle a nuestro navegador, “Si esta función no existe, implementarla así…”, y es mas simple de lo que parece, veamos el código:

if(Array.prototype.forEach === undefined) {
   //El usuario no actualizo su navegador
   //Usar nuestra implementacion
}

Vemos que los polyfill son condicionales por diseño, es decir, siempre preferimos utilizar la implementación nativa que la nuestra, porque corre mas rápido 🙂

El polyfill final del ejemplo se vería así:

if(Array.prototype.forEach === undefined) {
    Array.prototype.forEach = function(callback, elemento) {
        if(typeof(callback) !== "function") {
            throw new TypeError(callback + " no es una funcion!");
        }
        var len = this.length;
        for(var i = 0; i < len; i++) {
            callback.call(elemento, this[i], i, this)
        }
    }
}

De este modo nos aseguramos, que la funciones mas nuevas que no están disponibles para los usuarios que no han actualizado su navegador, estén disponibles al menos para nuestra aplicación.

Recuerden que con javascript, siempre existe el riesgo de que el lado obscuro de la fuerza quiera inyectar un set de polyfills malignos a través de un ataque XSS, así que no se olviden de proteger sus aplicaciones contra ataques de esta naturaleza.

Carga de scripts bajo demanda

Imaginemos ahora que no solo tenemos un polyfill si no que varias decenas, polyfills que no solo mitigan la obsolescencia de los navegadores si no que ademas incrementan la funcionalidad del lenguaje añadiendo características que no están la especificación (como el famoso require). Como logramos esto sin hacer un desastre?

Creamos la siguiente clase que carga un script a nuestra pagina:

class ScriptLoader {
    constructor(script) {
        this.script = script;
        this.elementoScript = document.createElement('script');
        this.head = document.querySelector('head');
    }

    load() {
        return new Promise((resolve, reject) => {
            this.elementoScript.src = this.script;
            this.elementoScript.onload = e => resolve(e);
            this.elementoScript.onerror = e => reject(e);
            this.head.appendChild(this.elementoScript);
        });
    }
}

Y si logramos determinar que nuestros polyfills son necesarios ya sea por una condición o un evento, simplemente los cargamos de manera dinámica, es decir: “On-Demand” haciendo uso de la clase anteriormente creada:

const loader = new ScriptLoader('polyfills.js');
loader.load()
    .then(e => console.log(e))
    .catch(e => console.error(e));

Conclusión

Javascript es un lenguaje dinámico que permite solucionar problemas de compatibilidad y retro-compatibilidad a través de pollyfills y la carga dinámica de scripts que habilitan a los desarrolladores de este lenguaje a entregar a los usuarios una experiencia unificada independientemente del navegador que estén usando.