El 2018 en perspectiva
El 2018 en perspectiva
El 2018 fue un año muy bueno para Javascript como lenguaje en general y para todo su ecosistema, en esta publicación haremos un resumen de lo mas destacado.
ECMAScript 2018 (ES9)
ECMAScript, es el estándar que le da vida a Javascript, y es un estándar que se encuentra en en constante evolución. ES6 (ECMAScript 2015) fue una versión que tardó seis años en finalizar, después de ES6, se ha formulado un nuevo proceso el cual es anual para simplificar el manejo de versiones y agregar funcionalidades al lenguaje de una manera mas ágil.
ES9 (ES2018) es la versión lanzada en Junio de 2018, y en esta podemos destacar lo siguiente.
Iteradores asíncronos
El protocolo de iteradores, introducido en ECMAScript 6, es usable unicamente en modo síncrono. El protocolo especifica que un iterador debe de implementar un método llamado next, el cual debe de retornar un objeto con dos propiedades, value y done.
La propiedad value contiene el valor de la iteración actual y la propiedad done nos indica si el iterador ha finalizado, como podemos ver, necesitamos saber en el momento de cada iteración el valor de estas propiedades.
En los iteradores asíncronos en cambio, se espera que el método next retorne una promesa, la cual deberá resolver a un objeto con las características previamente descritas.
La necesidad de iterar sobre multiples valores asíncronos llevo a la introducción del bucle for ... await ... of'
Esto es particularmente util cuando trabajamos con lecturas de archivos por medio de flujos en Node por ejemplo:
async function main(inputFilePath) {
const readStream = fs.createReadStream(inputFilePath,
{ encoding: 'utf8', highWaterMark: 1024 });
for await (const chunk of readStream) {
console.log('>>> '+chunk);
}
console.log('### DONE ###');
}Promise.prototype.finally
El método finally nos permite ejecutar una función cuando una promesa finaliza, ya sea esta haya sido resuelta o rechazada. Esto nos proporciona una manera para evitar la duplicación de código, ya que muchas veces nos veíamos obligados a ejecutar las mismas acciones en ambos métodos then y catch.
promesa.then(() => console.log('Resuelta'))
.catch(() => console.log('Rechazada'))
.finally(() => console.log('Esto siempre se ejecutará'));Sintaxis de rest y spread en objetos
El sintaxis ... aplicado en objetos, al igual que en arreglos para ES6, nos sirve para dos propósitos, para esparcir o extender (de su nombre spread en ingles) propiedades de un objeto en uno nuevo, o para obtener el resto de propiedades (de rest en ingles), en una asignación destructurada.
El uso del sintaxis spread es equivalente al uso del método Object.assign, el triple punto es simplemente azúcar sintáctico o conveniencia.
Es especialmente útil cuando necesitamos clonar superficialmente un objeto, por ejemplo:
const obj = {
a: 1,
b: 2
};
const copia = {
c: 3,
...obj
};
// { a: 1, b: 2, c: 3 }Es equivalente a:
const copia = Object.assign({
c: 3
}, obj);Este sintaxis también nos permite extraer el resto de propiedades que no fueron destructuradas en una asignación, por ejemplo:
const obj = {
a: 1,
b: 2,
c: 3
};
const { b, ...resto } = obj;
// b = 2
// resto = { a: 1, c: 3 }Mucha gente le llama al tiple punto “operador spread” u “operador rest” pero esto es técnicamente incorrecto, ya que el mismo en si no esta definido como un operador en términos de la especificación de ECMAScript. Y su semántica es diferente a los operadores, por ejemplo, el uso del mismo no genera un valor que pueda ser utilizado en una operación posterior.
En el ecosistema de Javascript
Este año tuvimos muchos cambios para bien en el ecosistema de Javascript especialmente al rededor de herramientas o tooling. En particular, la facilitation de la configuración ha tenido un énfasis muy grande, ya que muchas herramientas se enfocaron en hacerse 0 configuración, entre lo mas notable, mencionaremos:
Webpack 4
Webpack 4 incluye muchas mejoras entre las que podemos destacar el esfuerzo que se hizo en las mejoras en desempeño y optimizaciones de empaquetamiento, soporte para WebAssembly y mas.
Notablemente, antes de esta version siempre necesitábamos definir un archivo de configuración básica especificando al menos un punto de entrada.
Ahora, podemos utilizar Webpack 4 sin incluso tener un archivo de configuración, por defecto, buscará el archivo ./src/index.js, y producirá el archivo de salida ./dist/main.js.
Esto nos permite iniciar de nuevos proyectos de manera rápida.
Babel 7
Babel es una herramienta que se dedica a transpilar o transformar el código de Javascript de ultima generación a Javascript compatible con los navegadores en el mercado hoy.
Casi después de 3 años desde la última versión mayor Babel 7 incluye muchísimas mejoras en rendimiento, facilidad de configuración, configuración por medio de archivos .js.
Entre las características mas notables de esta entrega tenemos el soporte nativo para TypeScript, lo cual sin duda facilitara la adopción de este lenguaje en el futuro.
create-react-app 2
Create React App es una herramienta creada por Facebook para ayudarnos a crear iniciar aplicaciones con React, ahorrándonos configuración. La version 2 de esta herramienta incluye casi un año de desarrollo y nos provee con las siguientes mejoras notables:
- Soporte para Sass y módulos CSS
- Babel 7, incluyendo soporte para fragmentos de React
- Webpack 4, que por defecto incluye particionamiento de código
- Jest 23, con soporte para ejecución en modo watch
- Soporte para PostCSS
- Y mucho más…
Con la ejecución de un solo comando podemos tener un proyecto listo para trabajar.
Vue CLI 3
En el mundo de VueJS vimos el lanzamiento de Vue CLI 3, el cual fue una re-escritura completa de la version anterior.
Las versiones anteriores de Vue CLI se enfocaban en proveer diferentes templates, la nueva version, se enfoca en proveer un ecosistema basado en plugins.
Otra cosa a destacar de esta herramienta es que no es unicamente una herramienta de la linea de comando, esta herramienta incluye una interfaz web muy accessible y fácil de utilizar.
Al igual que create-react-app 2, Vue CLI 3 esta basada en Webpack 4 y Babel 7, e incluye opciones para inicializar tu proyecto con:
- TypeScript
- Soporte para PWA
- Vue Router y Vuex
- Configuración base para ESLint / TSLint / Prettier
- Pruebas unitarias con Jest o Mocha
- Pruebas E2E con Cypress o Nightwatch