¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6, nuevo estándar de JavaScript

Me gusta estar a la última con los lenguajes que trato y JavaScript no iba a ser una excepción. ES6 es el nuevo estándar. Lo sorprendente de ES6 es el grado de adopción que está teniendo ya que hay muchos frameworks (AngularJS y EmberJS) que han apostado por ellos y sus próximas versiones estarán escritas con ellos. Sin embargo ES5 no gozó de tanta fama.

Dada la importancia que tendrán estas características en un futuro no muy lejano, vamos a ir viendo poco a poco lo que nos depara el futuro.

Repasemos un poco la historia de JavaScript.

Las características principales del núcleo de JavaScript están definidas en un estándar conocido como ECMA-262. El lenguaje que se define en el estándar es ECMAScript el cual es aumentado en JavaScript en Node.js y los navegadores.
Aunque estos añadan más capacidades a través de nuevos métodos y objetos, el núcleo sigue definido en ECMAScript.

En 2007, JavaScript estaba en una encrucijada. La web estaba empezando a despegar con las aplicaciones AJAX mientras que JavaScript no había cambiado desde la tercera edición de ECMA-262 que se publicó en 1999. Así que el comité responsable de este estándar se puso manos a la obra y escribió ECMAScript 4. Éste introducía muchísimos cambios al lenguaje: nueva sintaxis, módulos, clases, etc.

Demasiados cambios causaron un alboroto en el comité encargado y algunos miembros apuntaban (con razón) que la cuarta edición estaba haciendo demasiadas cosas. Así que un pequeño grupo de líderes de Google, Microsoft y Yahoo escribieron una propuesta diferente a la que llamaron ECMASCript 3.1. El número de la versión era a propósito, querían destacar algo incremental sobre lo existente y no algo radicalmente distinto.

ECMAScript 3.1 añadía pocos cambios en la sintaxis y se centró en las propiedades de los objetos, añadir soporte nativo para JSON.

En 2008, el creador de JavaScript Brendan Eich, anunció que el comité trataría de estandarizar ECMAScript 3.1. Los cambios en sintaxis y características de ECMASCript 4 no serían tratados hasta que la siguiente versión del lenguaje fuera estandarizada y el comité trabajaría para unir lo mejor de 3.1 y 4 a lo que se conocía como ECMAScript Harmony (de armonía).

Finalmente, ECMASCript 3.1 se estandarizó como la quinta versión de ECMA-262, también conocida como ECMAScript 5. El comité nunca llegó a lanzar ECMAScript 4 para evitar confusiones y el trabajo comenzó a centrarse en ECMAScript Harmony, siendo ECMAScript 6 el primer estándar de este nuevo esfuerzo.

ECMAScript 6 se completó en 2014. Las nuevas características varían ampliamente desde nuevos objetos y patrones a cambios de sintaxis. Lo realmente bueno de ECMAScript 6 es que está enfocada a resolver problemas que los programadores tienen y aunque se tardará en adoptar por completo, hay mucho que ganar comenzando hoy mismo a trabajar con él.

ES6 en el navegador

El navegador es al fin y al cabo donde normalmente se ejecuta nuestro código JavaScript.

A día de hoy Microsoft tiene el listón en lo más alto en cuanto a nuevas características implementadas, eso sí, solo en Edge.

Para obtener el mejor nivel de soporte, lo ideal es usar Chrome Canary o Firefox Nightly para tener acceso a las últimas características conforme van siendo implementadas en vez de tener que esperar a los lanzamientos estables.

En Chrome, la mayoría de las características de ES6 necesitan que haya un flag activo: “Enable Experimental JavaScript”. Ve a chrome://flags/#enable-javascript-harmonyy asegúrate de que queda activado.

ES6 en Node.js

Hasta hace bien poco, Node.js no podía ejecutar ES6 sin pasar un argumento especial que activara estas características. Como historia curiosa, debido a este lento acercamiento, algunos de los programadores de Node.js se cansaron y decidieron crear IO.js cuyo lema es: Trayendo ES6 a la comunidad de Node.js.

No obstante, Node.js lanzó una versión recientemente que tiene ES6 activada por defecto de manera pública y estable: 0.12.X.

Transpilando que es gerundio

La palabra Transpilar no existe en castellano, que yo sepa. No obstante no he encontrado traducción alguna para transpile y he decidido castellanizarla. Por que sí.

Pero, ¿a qué viene todo esto?

Todo lo que hemos hablado hasta ahora sobre cómo probar nuestro código ES6 es genial para código que estás probando o para ver/comprender nuevas características, pero en el navegador aun no están listas para producción. Muy poca gente que visite tu página/aplicación usará los navegadores experimentales e incluso menos gente tendrá activado el JavaScript experimental (en el caso de Chrome).

Esto no significa que no puedas comenzar a escribir en ES6 desde hoy mismo. Aunque ciertamente los navegadores se están poniendo las pilas. Chrome 50 soporta ya el 93% de la especificación de ES6. ¡Una pasada! Si quieres, echa un vistazo a la tabla de compatibilidad.

Babel es una herramienta que nos permite transformar nuestro código ES6 en código ES5 que es compatible con los navegadores de hoy en día sin hacer nada de brujería. Babel no soporta todas las características de ES6 aunque a día de hoy, soporta el 75% de ellas (más que ningún otro navegador) lo cual nos deja ir haciendo uso de todo lo nuevo en los navegadores actuales.

A día de hoy podemos usar Babel en varios formatos diferentes. Tenemos plugins de Grunt, Gulp y su versión web también.

¡La elección os la dejo a vosotros!

Veamos un breve ejemplo antes de finalizar. No os preocupéis por la sintaxis que la explicaremos en próximas entregas con más detenimiento.

Veamos algo de código en ES6:

let prueba = 'test';  
const TEST = '1234';

var probando = () => {  
  prueba += TEST;
}

Y, transpilándolo a ES5 nos quedamos con:

'use strict';

var prueba = 'test';  
var TEST = '1234';

var probando = function probando() {  
  prueba += TEST;
};

Sencillo, ¿verdad? Pues si tienes ganas de más, no te pierdas los próximos artículos al respecto.

Conclusión

ES6 ha venido para quedarse y su adopción está siendo bastante abrumadora. Teniendo en cuenta que la especificación se completó recientemente, es ahora cuestión de tiempo el que los navegadores completen su implementación.

Mientras esto ocurre, nos queda Babel.

Quizá te estés preguntando. ¿Debería usarlo? Aunque en producción no es necesario y, a priori no hay una necesidad imperiosa de usarlo, podría parecer que no pero te recomiendo encarecidamente que empieces a usarlo ya, transpilando hasta que el soporte se haya extendido. De esta manera te irás haciendo a la nueva sintaxis.

Nuestros tutoriales de ES6

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!