Cómo utilizar js-polyfills
Los Polyfills son una excelente manera de garantizar que puedas utilizar código moderno sin dejar de ser compatible con navegadores más antiguos. Sin embargo, actualmente los polyfills son difíciles de usar, por lo que desarrollamos un nuevo servicio para simplificar su uso. Los lectores pueden utilizarlo y mejorarlo.
Desafíos
Estos son algunos de los problemas que intentamos resolver:
Los desarrolladores no saben qué funciones requieren polyfills. Por ejemplo, si carga un sitio web en una versión anterior de Internet Explorer (porque tiene una gran cantidad de usuarios que todavía usan esa versión) y descubre que el sitio web no funciona, tendrá que dedicar tiempo a depurar para descubrirlo. qué característica está causando el problema. A veces el problema es obvio, pero la mayoría de las veces no lo es, especialmente porque los navegadores más antiguos a menudo carecen de buenas herramientas de desarrollo.
Hay muchas opciones de polirelleno para cada característica. Es difícil determinar qué opción emula más fielmente la funcionalidad que falta.
Algunos polyfills grandes incluyen muchos polyfills que no necesitas, como ES6, que tiene una cobertura completa de un conjunto de funciones. Para resolver un problema simple, en realidad no es necesario colocar todo este código en el navegador.
Las versiones más nuevas de navegadores no requieren polyfills, pero en general, los polyfills están disponibles para todo tipo de navegadores. Si bien esto se hace para mejorar la compatibilidad con navegadores más antiguos, también reduce el rendimiento en los navegadores más nuevos. No estamos dispuestos a llegar a este compromiso. Preferimos utilizar polyfills en navegadores que no tienen una funcionalidad específica.
Nuestra solución: polyfill como servicio
Para solucionar estos problemas desarrollamos el servicio polyfill. Es un poco como un optometrista que le examina los ojos y luego le adapta las gafas a su problema de visión. Haremos lo mismo con el navegador. Aquí hay una explicación de cómo funciona:
Los desarrolladores insertan una etiqueta de secuencia de comandos en su página que sirve como punto final para importar el servicio de relleno múltiple.
El servicio analizará el encabezado del agente de usuario del navegador y la lista de capacidades requeridas (o usará la lista predeterminada de servicios de relleno múltiple disponibles) y luego creará la lista de relleno múltiple requerida por el navegador.
Personaliza el polyfill con la lista de dependencias correcta.
Comprimir el paquete de servicios y servirlo a través de una CDN (agradecemos mucho el apoyo de Fastly para esto).
¿Realmente necesitamos esta solución? Piénselo de esta manera: Modernizris es un gran paquete de detección de funciones y todos los usos razonables se beneficiarían de una configuración de instalación personalizada, pero una gran cantidad de usuarios de Modernizris simplemente usan su instalación predeterminada, que generalmente proviene de alguien como cdnjs.com o html5boilerplate Components. . Pero si no utiliza las capacidades de detección de funciones de Modernizris, ¿por qué instalaría esta herramienta? ¿Quizás no entendiste lo que hace la biblioteca y simplemente pensaste que Modernizris "resolvería el problema"? Debo admitir que eso es lo que pensé cuando escuché por primera vez el nombre Modernizris, y me decepcioné un poco cuando descubrí que Modernizris no sólo no hizo su trabajo, sino que en realidad estaba frenando a los navegadores modernos.
Sin embargo, el servicio Polyfill realmente ayudó mucho. No hay nada de malo en que no quieras dedicar tiempo a investigar las deficiencias de los navegadores más antiguos. Deje que otra persona resuelva el problema primero y luego podremos beneficiarnos directamente sin tener que comprender los detalles.
Cómo funciona
El caso de uso más simple es:
Esto contiene nuestra configuración predeterminada de polyfill.
Este valor predeterminado es una lista cuidadosamente seleccionada de características que creemos que son esenciales para el desarrollo web moderno, y los polyfills correspondientes son mínimos y precisos. Si desea agregar específicamente la funcionalidad polyfill, simplemente haga lo siguiente: