Hoy en día escribimos código moderno sin pensar en que muchas personas y empresas no tienen su software actualizado, solo basta con ver cómo es que aún se siguen usando versiones viejas de sistemas operativos que ya fueron retirados pero ahí siguen.
Por ejemplo:
Podemos ver que Win XP aún tiene un 0.38% de adopción y los navegadores ya no dan soporte a este, así que “la última versión que se tiene es lo que hay”, pero nuestras apps deben siempre buscar dar el soporte lo más “completo posible”, así que muchas de las cosas modernas no van integrados en navegadores viejos.
¿Pero qué significa todo esto?, usemos por ejemplo la función .map() esta no está disponible en muchos navegadores viejos, pero podemos emularla, podríamos hacer un prototipo y después a este, agregarle el método, que reciba los mismos parámetros y usando JavaScript viejo adaptarlo, entonces .map() tendría esa disponibilidad.
Así que, ¿entonces qué diablos es un Polyfill?, es un pedazo de código que permite ejecutar funciones modernas con código clásico, para que de esta manera, si no se tiene ese soporte, se utilice el de respaldo.
¿Es bueno usar Polyfills?, sí y no, primero hay que entender quién es nuestro objetivo, por ejemplo si nuestro objetivo es personas desarrolladoras, es muy poco probable que tengan navegadores viejos debido a que conocen la importancia de tener uno moderno, actualizado, seguro, entre otros.
Si son personas mayores que no les interesa tener lo último de tecnología pues es más probable que tengan navegadores viejos y obsoletos. ¿Entonces qué con esto?. Es simple, cuando nuestro objetivo son personas mayores, entonces el polyfill es buena opción, en caso contrario podemos evitar muchos de estos.
¿Por qué los debemos evitar? Porque es código extra que se debe ejecutar, y peso en los archivos. Además nuestra aplicación se hace más compleja. Así que debemos considerar mucho nuestro objetivo para incluir solo aquellos que sean realmente necesarios.
En internet podemos encontrar muchos polyfills ya listos, y sobre todo, si usamos TypeScript ya se integran estos dependiendo de nuestra configuración pero, si queremos trabajar nuestros propios polyfills lo podemos hacer de la siguiente manera:
Lo primero es saber a qué tipo de dato le vamos a crear el prototipo, en este ejemplo usaremos String como el tipo de dato. Después, la función, usaremos .trim() como la función que vamos a emular. Y por último pues la fuente. Recordemos que los polyfills siempre deben ser lo más óptimos posibles, veamos entonces el ejemplo:
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,'')
}
}
// Y se utiliza de la siguiente forma:
console.log(" palabra ".trim()); // Y en consola veríamos "palabra" sin los espacios
En este ejemplo si la función trim no es una función, quiere decir dos cosas, por alguna razón sobre-escribimos esta, o… no existe y retorna “undefined”. Entonces vamos a crearla, como prototipo al tipo de dato String y se la asignamos como una función anónima, reemplazando el contenido de la string (en este caso tomada desde this) y le reemplazamos los espacios con la regex hacia los laterales únicamente.
¡Y eso es todo!, ahora ya sabes qué son los polyfills y cómo crearlos.
