Debido a los rápidos cambios en la versión de JavaScript, las formas sintaxiales y el vocabulario también se actualizan en JavaScript, por lo tanto, se ve que muchas de las características de JavaScript son adiciones más recientes y pueden no estar necesariamente disponibles en navegadores más antiguos, es decir, navegadores que se ejecutan en versiones anteriores de JavaScript. Otro problema es que algunos de los navegadores no consideran seguras las funciones más nuevas de JavaScript debido a la potencia extrema que es capaz de mostrar, por lo que no se incluyen o se incluyen como un modo experimental con limitaciones para restringir el uso. Pero, ¿por qué deberíamos discutir esto? JavaScript se usa principalmente para desarrollar aplicaciones del lado del cliente y la ejecución exitosa de los programas depende parcialmente de la máquina del cliente, es decir, la versión de JavaScript disponible en el navegador del cliente.
Ahora, el enfoque ingenuo sería ejecutar solo aquellas funcionalidades que se pueden ejecutar en el navegador de los clientes, aunque en realidad no es un enfoque saludable. Hay dos técnicas principales que un desarrollador puede usar para «llevar» las características más nuevas de JavaScript a los navegadores más antiguos, a saber, Polyfilling y Transpiling .
polirelleno
Polyfilling es un término inventado por Remy Sharp. Es una de las metodologías que se pueden utilizar como una especie de medida de compatibilidad con versiones anteriores. La definición la da mejor el mismo Remy.
“Un polyfill, o polyfiller, es una pieza de código (o complemento) que proporciona la tecnología que usted, el desarrollador, espera que el navegador proporcione de forma nativa. Aplanando el panorama de las API, por así decirlo”.
—Remy Sharp
Si ilustramos lo que quiso decir, obtendremos que un polyfill o polyfiller es un segmento de código que se supone que se comporta de manera idéntica a una característica más nueva de JavaScript y aún puede ejecutarse en versiones anteriores. Por ejemplo, ES2015 proporciona una nueva utilidad Number.isNaN(…) para proporcionar un método seguro y preciso para verificar los valores de NaN o Not a Number. Podemos usar polyfilling para replicar este comportamiento y usarlo en esos navegadores anteriores a ES2015. El siguiente fragmento será útil en nuestro caso.
// Check if Number.isNaN already exists.
// If False then proceed.
if (!Number.isNaN) {
// Define explicitly for older browsers.
Number.isNaN = function isNaN(x) {
// This is a property of NaN.
// No two NaN can be equal to the other.
// Because NaN is a concept not a comparable value.
return x !== x;
};
}
Primero verificamos si el método ya está disponible y evitamos definir la versión explícita si es así. Si no está presente, definitivamente estamos en una versión anterior de JavaScript, por lo que definimos explícitamente uno usando la propiedad de NaN de que no hay dos NaN iguales entre sí porque NaN es un concepto, no un valor comparable para ser igual al otro. Así, devolvemos True si no son iguales y de lo contrario devolvemos False. Esto puede considerarse como uno de los polyfills más fáciles.
Nota: todas las funciones nuevas no son polirellenables o no siempre es posible crear polirellenos sin ninguna desviación, por lo tanto, al implementar polirellenos explícitamente, se recomienda tener un conocimiento del funcionamiento en su conjunto. Pero, muchos desarrolladores prefieren usar los polyfills que ya están disponibles. Algunos de estos se mencionan a continuación.
Transpilar
Las nuevas versiones de JavaScript también traen actualizaciones sintaxiales que no se pueden policompletar, ya que simplemente no se ejecutarían y, en cambio, generarían errores de sintaxis en los motores de JavaScript antiguos, aquí es donde entra en juego un transpiler. Obtiene su nombre de la unión de dos operaciones que realiza Transformación + Compilación . A continuación, ahora podemos definir un «Transpiler» para que sea una herramienta que transforma el código con una sintaxis más nueva en equivalentes de código más antiguos y este proceso se llama «Transpiling».
Según la práctica de desarrollo, al usar Transpiling es esencial escribir el código manteniendo la sintaxis más nueva, pero al implementar el proyecto, use un transpiler similar a un minificador o un linter para implementar el programa amigable de sintaxis anterior transpilado. Eso plantea la pregunta de por qué deberíamos siquiera molestarnos en escribir en la forma sintaxial más nueva mientras seguimos implementando la anterior. Esta es una pregunta muy lógica y tiene muchos buenos puntos para dar como respuesta, de los cuales algunos se dan a continuación.
- No hace falta decir que la sintaxis más nueva se agregó al lenguaje para hacer que el código sea más legible y fácil de mantener, es decir, las versiones más nuevas son simplemente mejores que los equivalentes más antiguos. Por lo tanto, se recomienda
escribir una sintaxis más nueva y limpia para lograr un mejor resultado. - Transpilando solo para navegadores más antiguos, mientras brindamos la sintaxis más nueva a los navegadores actualizados, podemos obtener la ventaja de las optimizaciones de rendimiento del navegador.
- El uso anterior de la sintaxis más nueva permite que se pruebe de manera más sólida en el mundo real, lo que proporciona comentarios más tempranos y, si se encuentran lo suficientemente temprano, se pueden cambiar/arreglar antes de que esos errores de diseño del lenguaje se vuelvan permanentes. Por lo tanto, usar la sintaxis más nueva hace que la sintaxis sea mucho más confiable a largo plazo.
Tomemos algunos ejemplos de Transpiling. ES2015 agregó una nueva función sintaxial de valor de parámetro predeterminado, se puede implementar usando lo siguiente.
// Default Parameter Value Example.
// If no parameter is passed a will be 5.
function myFunc(a = 5)
{
console.log(a);
}
myFunc(96); // Logs 96.
myFunc(); // Logs 5 as default.
Como puede ver, si no se proporciona el parámetro, tomamos en cuenta el valor del parámetro predeterminado, pero esta sintaxis no se reconocerá en los motores anteriores a ES2015. Por lo tanto, después de transpilar, obtendremos el equivalente más antiguo como el siguiente.
// Default Parameter Value Example.
// If no parameter is passed a will be 5.
function myFunc()
{
// Using Ternary Operator to assign default
// 5 if undefined.
var a = (arguments[0] !== undefined) ? arguments[0] : 5;
console.log(a);
}
myFunc(96); // Logs 96.
myFunc(); // Logs 5 as default.
Como se ve en el ejemplo anterior, podemos usar un operador ternario para asignar el valor predeterminado si se encuentra que el argumento no está definido, esto producirá resultados similares al equivalente de ES6. Para el siguiente ejemplo, veamos los métodos de flecha gruesa de ES6.
// Function Defining is now this easy.
var myFunc = () => {
console.log("This is a function.");
}
myFunc(); // This is a function.
Como puede ver en el ejemplo anterior, podemos definir una función sin siquiera usar la función de palabra clave y eso también sin obstaculizar la legibilidad, pero esto no se reconocerá en los motores anteriores a ES6, por lo que el código equivalente será el siguiente.
// Function Defining is now this easy.
var myFunc = function() {
console.log("This is a function.");
}
myFunc(); // This is a function.
Después de aprender sobre Transpilers, será muy extraño terminar este artículo sin conocer algunos de los mejores Transpilers disponibles. La siguiente es una pequeña lista de dichas herramientas.
Con suerte, hemos cubierto lo suficiente para conocer qué son estas metodologías y por qué el uso de ambas no solo es importante para el desarrollador, sino también para el desarrollo de JavaScript.
Referencia :
https://remysharp.com/2010/10/08/what-is-a-polyfill