Skip to content

Commit 91a7cb9

Browse files
joaquineliojoaquinelio
authored
Merge pull request #504 from joaquinelio/potra
polifill update cierra #457
2 parents c621daf + 636847e commit 91a7cb9

File tree

1 file changed

+67
-29
lines changed

1 file changed

+67
-29
lines changed

‎1-js/03-code-quality/06-polyfills/article.md

Lines changed: 67 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,92 @@
11

2-
# Polyfills
2+
# Polyfills y transpiladores
33

4-
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).
4+
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).
55

6-
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.
6+
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.
77

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

10-
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).
10+
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).
1111

12-
## Babel
12+
Como programadores, queremos las características más recientes. Cuanto más, ¡mejor!
1313

14-
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.
14+
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?
1515

16-
Aquí Babel viene al rescate.
16+
Hay dos herramientas para ello:
1717

18-
[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.
18+
1. Transpiladores
19+
2. Polyfills.
1920

20-
En realidad, hay dos partes en Babel:
21+
En este artículo nuestro propósito es llegar a la esencia de cómo trabajan y su lugar en el desarrollo web.
2122

22-
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.
23+
## Transpiladores
2324

24-
2. Segundo, el polyfill.
25+
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.
2526

26-
Nuevas características del lenguaje pueden incluir no solo construcciones sintácticas sino también funciones incorporadas.
27-
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.
27+
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`.
2828

29-
Existe el término "polyfill" para scripts que "llenan"(fill in) el vacío y agregan las implementaciones que faltan.
29+
Un transpilador analizaría nuestro código y rescribiría `height ?? 100` como `(height !== undefined && height !== null) ? height : 100`.
3030

31-
Dos polyfills interesantes son:
32-
- [babel polyfill](https://babeljs.io/docs/usage/polyfill/) que soporta mucho, pero es muy grande.
33-
- [polyfill.io](http://polyfill.io) servicio que nos permite cargar/construir polyfills bajo demanda, dependiendo de las características que necesitemos.
31+
```js
32+
// antes de ejecutar el transpilador
33+
height = height ?? 100;
3434

35-
Así que, si queremos usar características modernas del lenguaje, el transpiler y polyfill son necesarios.
35+
// después de ejecutar el transpilador
36+
height = (height !== undefined && height !== null) ? height : 100;
37+
```
3638
37-
## Ejemplos en el tutorial
39+
Ahora el código rescrito es apto para los intérpretes de JavaScript más viejos.
3840
41+
Usualmente, un desarrollador ejecuta el transpilador en su propia computadora y luego despliega el código transpilado al servidor.
3942
40-
````online
41-
La mayoría de ejemplos se pueden ejecutar en el sitio, así:
43+
Acerca de nombres, [Babel](https://babeljs.io) es uno de los más prominentes transpiladores circulando.
4244
43-
```js run
44-
alert('Presione el botón "Play" en la esquina superior derecha para ejecutar');
45-
```
45+
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.
46+
47+
## Polyfills
48+
49+
Nuevas características en el lenguaje pueden incluir no solo construcciones sintácticas y operadores, sino también funciones integradas.
50+
51+
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`.
4652
47-
Ejemplos que usan JS moderno solo funcionarán si tu navegador lo soporta.
48-
````
53+
En algunos (muy desactualizados) intérpretes JavaScript no existe `Math.trunc`, así que tal código fallará.
4954
50-
```offline
51-
Como estás leyendo la versión offline, en PDF los ejemplos no se pueden ejecutar. En EPUB algunos pueden ejecutarse.
55+
Aquí estamos hablando de nuevas funciones, no de cambios de sintaxis. No hay necesidad de transpilar nada. Solo necesitamos declarar la función faltante.
56+
57+
Un script que actualiza o agrega funciones nuevas es llamado "polyfill". Este llena los vacíos agregando las implementaciones que faltan.
58+
59+
En este caso particular, el polyfill para `Math.trunc` es un script que lo implementa:
60+
61+
```js
62+
if (!Math.trunc) { // no existe tal función
63+
// implementarla
64+
Math.trunc = function(number) {
65+
// Math.ceil y Math.floor existen incluso en los intérpretes antiguos
66+
// los cubriremos luego en el tutorial
67+
return number < 0 ? Math.ceil(number) : Math.floor(number);
68+
};
69+
}
5270
```
5371
54-
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.
72+
JavaScript es un lenguaje muy dinámico, los scripts pueden agregar o modificar cualquier función, incluso las integradas.
73+
74+
Dos librerías interesantes de polyfills son:
75+
- [core js](https://github.com/zloirock/core-js) - da muchísimo soporte, pero permite que se incluyan solamente las características necesitadas.
76+
- [polyfill.io](http://polyfill.io) - servicio que brinda un script con polyfills dependiendo de las características del navegador del usuario.
77+
78+
79+
## Resumen
80+
81+
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.
82+
83+
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.
84+
85+
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).
86+
87+
Buenos recursos que muestran el estado actual de soporte para varias característica:
88+
- <https://kangax.github.io/compat-table/es6/> - para JavaScript puro.
89+
- <https://caniuse.com/> - para funciones relacionadas al navegador.
90+
91+
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.
92+

0 commit comments

Comments
 (0)