javascript-tutorial · joaquinelio · Jun 17, 2021 · Mar 28, 2021 · Mar 28, 2021 · Jun 17, 2021
diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md
@@ -1,54 +1,92 @@
 
-# Polyfills
+# Polyfills y transpiladores
 
-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](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
+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 a la [especificación](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
 
-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.
+Los equipos de desarrollo detrás de los 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 porque son 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).
+Una buena página para ver el estado actual de soporte de características del lenguaje es <https://kangax.github.io/compat-table/es6/> (es grande, todavía tenemos mucho que aprender).
 
-## Babel
+Como programadores, queremos las características más recientes. Cuanto más, ¡mejor!
 
-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.
+Por otro lado, ¿cómo hacer que nuestro código moderno funcione en intérpretes más viejos que aún no entienden las características más nuevas?
 
-Aquí Babel viene al rescate.
+Hay dos herramientas para ello:
 
-[Babel](https://babeljs.io) es un [transpilador](https://en.wikipedia.org/wiki/Source-to-source_compiler). Reescribe código JavaScript moderno en el estándar anterior.
+1. Transpiladores
+2. Polyfills.
 
-En realidad, hay dos partes en Babel:
+En este artículo nuestro propósito es llegar a la esencia de cómo trabajan y su lugar en el desarrollo web.
 
-1. Primero, el programa transpilador, 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](http://webpack.github.io/) o [brunch](http://brunch.io/), proporcionan medios para ejecutar el transpilador automáticamente en cada cambio al código, de modo que no implique ninguna perdida de tiempo de nuestra parte.
+## Transpiladores
 
-2. Segundo, el polyfill.
+Un [transpilador](https://es.wikipedia.org/wiki/Transpilador) es un software que puede analizar ("leer y entender") código moderno y rescribirlo usando sintaxis y construcciones más viejas, y que su resultado sea el mismo.
 
-    Nuevas características del lenguaje pueden incluir no solo construcciones sintácticas sino también funciones incorporadas.
-    El transpilador reescribe el código, transformando las construcciones sintácticas nuevas al viejo formato. Pero para funciones nuevas, necesitamos implementarlas. JavaScript es un lenguaje muy dinámico, los scripts pueden agregar o modificar cualquier función para que actúen acorde al estándar moderno.
+Por ejemplo, antes del año 2020 JavaScript no tenía el operador "nullish coalescing" `??`. Entonces, si un visitante lo usa en un navegador desactualizado, este fallaría en entender un código como `height = height ?? 100`.
 
-    Existe el término "polyfill" para scripts que "llenan"(fill in) el vacío y agregan las implementaciones que faltan.
+Un transpilador analizaría nuestro código y rescribiría `height ?? 100` como `(height !== undefined && height !== null) ? height : 100`.
 
-    Dos polyfills interesantes son:
-    - [babel polyfill](https://babeljs.io/docs/usage/polyfill/) que soporta mucho, pero es muy grande.
-    - [polyfill.io](http://polyfill.io) servicio que nos permite cargar/construir polyfills bajo demanda, dependiendo de las características que necesitemos.
+```js
+// antes de ejecutar el transpilador
+height = height ?? 100;
 
-Así que, si queremos usar características modernas del lenguaje, el transpiler y polyfill son necesarios.
+// después de ejecutar el transpilador
+height = (height !== undefined && height !== null) ? height : 100;
+```
 
-## Ejemplos en el tutorial
+Ahora el código rescrito es apto para los intérpretes de JavaScript más viejos.
 
+Usualmente, un desarrollador ejecuta el transpilador en su propia computadora y luego despliega el código transpilado al servidor.
 
-````online
-La mayoría de ejemplos se pueden ejecutar en el sitio, así:
+Acerca de nombres, [Babel](https://babeljs.io) es uno de los más prominentes transpiladores circulando.
 
-```js run
-alert('Presione el botón "Play" en la esquina superior derecha para ejecutar');
-```
+Sistemas de desarrollo de proyectos modernos, tales como [webpack](http://webpack.github.io/), brindan los medios para ejecutar la transpilación automática en cada cambio de código, haciendo muy fácil la integración al proceso de desarrollo.
+
+## Polyfills
+
+Nuevas características en el lenguaje pueden incluir no solo construcciones sintácticas y operadores, sino también funciones integradas.
+
+Por ejemplo, `Math.trunc(n)` es una función que corta la parte decimal de un número, ej. `Math.trunc(1.23)` devuelve `1`.
 
-Ejemplos que usan JS moderno solo funcionarán si tu navegador lo soporta.
-````
+En algunos (muy desactualizados) intérpretes JavaScript no existe `Math.trunc`, así que tal código fallará.
 
-```offline
-Como estás leyendo la versión offline, en PDF los ejemplos no se pueden ejecutar. En EPUB algunos pueden ejecutarse.
+Aquí estamos hablando de nuevas funciones, no de cambios de sintaxis. No hay necesidad de transpilar nada. Solo necesitamos declarar la función faltante.
+
+Un script que actualiza o agrega funciones nuevas es llamado "polyfill". Este llena los vacíos agregando las implementaciones que faltan.
+
+En este caso particular, el polyfill para `Math.trunc` es un script que lo implementa:
+
+```js
+if (!Math.trunc) { // no existe tal función
+  // implementarla
+  Math.trunc = function(number) {
+    // Math.ceil y Math.floor existen incluso en los intérpretes antiguos
+    // los cubriremos luego en el tutorial
+    return number < 0 ? Math.ceil(number) : Math.floor(number);
+  };
+}
 ```
 
-Generalmente, Google Chrome está actualizado con las últimas características del lenguaje, funciona bien para ejecutar demos con tecnología puntera sin ningún transpilador, pero otros navegadores modernos también funcionan bien.
+JavaScript es un lenguaje muy dinámico, los scripts pueden agregar o modificar cualquier función, incluso las integradas. 
+
+Dos librerías interesantes de polyfills son:
+- [core js](https://github.com/zloirock/core-js) - da muchísimo soporte, pero permite que se incluyan solamente las características necesitadas.
+- [polyfill.io](http://polyfill.io) - servicio que brinda un script con polyfills dependiendo de las características del navegador del usuario.
+
+
+## Resumen
+
+En este artículo queremos motivarte a estudiar las características más modernas y hasta experimentales del lenguaje, incluso si aún no tienen aún buen soporte en los intérpretes JavaScript.
+
+Pero no olvides usar transpiladores (si usas sintaxis u operadores modernos) y polyfills (para añadir funciones que pueden estar ausentes). Ellos se asegurarán de que el código funcione.
+
+Por ejemplo, cuando estés más familiarizado con JavaScript puedes configurar la construcción de código basado en [webpack](http://webpack.github.io/) con el plugin de [babel](https://github.com/babel/babel-loader).
+
+Buenos recursos que muestran el estado actual de soporte para varias característica:
+- <https://kangax.github.io/compat-table/es6/> - para JavaScript puro.
+- <https://caniuse.com/> - para funciones relacionadas al navegador.
+
+P.S. Google Chrome usualmente es el más actualizado con las características del lenguaje, pruébalo si algún demo del tutorial falla. Aunque la mayoría de los demos funciona con cualquier navegador moderno.
+