7º junio 2020

Polyfills

El lenguaje JavaScript evoluciona constantemente. Nuevas propuestas al lenguaje aparecen regularmente, son analizadas y, si se consideran valiosas, se agregan a la lista en https://tc39.github.io/ecma262/ y luego avanzan hasta specification.

Equipos detrás de intérpretes (engines) de JavaScript tienen sus propias ideas sobre qué implementar primero. Pueden decidir implementar propuestas que están en borrador y posponer cosas que ya están en la especificación, porque son menos interesantes o simplemente más difíciles de hacer.

Por lo tanto, es bastante común para un intérprete implementar solo la parte del estándar.

Una buena página para ver el estado actual de soporte para características del lenguaje es https://kangax.github.io/compat-table/es6/ (es grande, todavía tenemos mucho que aprender).

Babel

Cuando usamos características modernas del lenguaje, puede que algunos intérpretes no soporten dicho código. Como hemos dicho, no todas las características están implementadas en todas partes.

Aquí Babel viene al rescate.

Babel es un transpiler. Reescribe código JavaScript moderno en el estándar anterior.

En realidad, hay dos partes en Babel:

  1. Primero, el programa transpiler, que reescribe código. El desarrollador lo ejecuta en su propio ordenador. Reescribe el código al viejo estándar. Y entonces el código es entregado al navegador para los usuarios. Proyectos modernos para construcción de sistemas como webpack o brunch, proporcionan medios para ejecutar el transpiler automáticamente en cada cambio al código, de modo que no implique ninguna perdida de tiempo de nuestra parte.

  2. Segundo, el polyfill.

    El transpiler reescribe el código, por lo que se cubren las características de la sintaxis. Pero para funciones nuevas tenemos que escribir un script especial que las implemente. JavaScript es un lenguaje muy dinámico, puede que los scripts no solo agreguen nuevas funciones, sino también modifiquen las funciones incorporadas, para que actúen de forma correspondiente al estándar moderno.

    Existe el término “polyfill” para scripts que “llenan”(fill in) el vacío y agregan las implementaciones que faltan.

    Dos polyfills interesantes son:

    • babel polyfill que soporta mucho, pero es muy grande.
    • polyfill.io servicio que nos permite cargar/construir polyfills bajo demanda, dependiendo de las características que necesitemos.

Así que, si queremos usar características modernas del lenguaje, el transpiler y polyfill son necesarios.

Ejemplos en el tutorial

La mayoría de ejemplos se pueden ejecutar en el sitio, así:

alert('Presione el botón "Play" en la esquina superior derecha para ejecutar');

Ejemplos que usan JS moderno solo funcionarán si tu navegador lo soporta.

Generalmente, Google Chrome está actualizado con las últimas características del lenguaje, funciona bien para ejecutar demos con tecnología puntera sin ningún transpiler, pero otros navegadores modernos también funcionan bien.

Mapa del Tutorial

Comentarios

lea esto antes de comentar…
  • Si tiene sugerencias sobre qué mejorar, por favor enviar una propuesta de GitHub o una solicitud de extracción en lugar de comentar.
  • Si no puede entender algo en el artículo, por favor explique.
  • Para insertar algunas palabras de código, use la etiqueta <code>, para varias líneas – envolverlas en la etiqueta <pre>, para más de 10 líneas – utilice una entorno controlado (sandbox) (plnkr, jsbin, codepen…)