Como profesional en la web debes saber lo importante que es conocer las tecnologías de desarrollo y sus novedades, especialmente aquellas que son estándares y que por tanto cualquier proyecto utilizará. En el caso de Javascript las novedades vienen marcadas por el estándar ECMAScript, que recientemente ha presentado su sexta versión, ES6, también conocido como ECMAScript 2015.

Con este texto comenzamos una serie de artículos donde iremos analizando con detalle qué nos aporta ES6 y cómo implementarlo en nuestros proyectos. De momento en esta entrega explicaremos con detalle en qué consiste este estándar y cómo integrarlo en un proyecto para la web, de modo que aseguremos que nuestro código sea compatible con todos los navegadores que lo puedan ejecutar.

Javascript Vs ECMAScript

Cuando nos acercamos a ECMAScript a muchos de nosotros nos surge la duda sobre qué es y qué diferencia tiene con Javascript. Así que comenzaremos rápidamente aclarando este punto.

Javascript es una marca comercial propiedad de Oracle y antes de Sun Microsystems. Cuando los ingenieros de Netscape incorporaron un lenguaje de Scripting en su navegador decidieron, después de varios nombres, denominarlo Javascript bajo consentimiento de Sun.

Más tarde Netscape decidió proponer su lenguaje como estándar y el trabajo fue realizado por ECMA, dando lugar a ECMAScript. Por tanto, hoy Javascript sería un dialecto de ECMAScript.

A lo largo de los años se han ido incorporando novedades al estándar, que más tarde o temprano son aplicadas a los navegadores en sus propias implementaciones. Hacía mucho que no se publicaba ninguna novedad o mejora, exactamente desde el 2009 donde se hacía pública su edición número 5, que en los últimos años se ha convertido en un gran referente.

Hoy Javascript, y por tanto ECMAScript, se encuentra implementado en navegadores y más recientemente como lenguaje de propósito general como NodeJS, en el que no vamos a entrar en detalle, ya que tenemos un excelente curso y diversos artículos en el manual de Node donde nos adentramos más en el.

Compatibilidad de ECMASCRIPT 2015

Si queremos usar la versión más actual de ECMAScript, la primera pregunta que uno se suele formular es la compatibilidad con las distintas plataformas donde está disponible.

En los navegadores se está extendiendo progresivamente el soporte a ES6, pero aún queda trabajo por hacer. A la larga todos los navegadores actualizados implementarán el estándar, pero el momento en que lo hagan depende de los fabricantes. Los hay que llevan más retraso también encontramos fabricantes que incluso que se están adelantando y han comenzado a dar soporte a la siguiente versión, ES7.

Esta situación es perfectamente normal, por lo que no debe decepcionarnos. Ni tampoco es motivo por el cual no se pueda usar ES6 ya mismo, ya que existen diversas herramientas que nos solucionarán la vida y nos permitirán usar todas las posibilidades de ECMAScript 6 en la actualidad.

Transpiladores

La palabra "transpilador" no la encontrarás en el diccionario. Se ha acuñado recientemente a raíz de las necesidades de traducción diversas versiones de ECMAScript y dialectos y lenguajes derivados. Transpilador es realidad es una adaptación al español del término "Transpiler", que a su vez viene de "Tanslator" y "Compiler".

Los "transpiladores" son por tanto una especie de compiladores que transforman nuestro código ES6 a ES5, para así ser totalmente compatible con todos los navegadores. Uno de los más conocidos y usados es Babel, pero también tenemos otros como Google Traceur.

En general y por decirlo con palabras sencillas, no son más que traductores del "Javascript del mañana" al "Javascript de hoy". Todos tienen la particularidad que funcionar en la etapa de desarrollo. Es decir, la traducción de tu código ES6 a ES5 se realiza en tu ordenador, generando automáticamente código ES5 a partir de tu código ES6. Esa traducción se realiza antes de desplegar un proyecto, de modo que, cuando subes tus archivos JS al servidor, tienen únicamente código Javascript que es entendible por todos los navegadores. Por tanto, no tienes por qué preocuparte de rendimiento, puesto que es una tarea que se realiza una vez, y no cada vez que se ejecuta un script, como ocurre con el compilado de los lenguajes no interpretados.

El código generado contiene un mapeado al código que tú has escrito, de modo que todo el trabajo de depuración del programa se realiza sobre el código ES6 y no sobre el código generado. Así pues, todo el flujo de desarrollo y pruebas se realiza contra tu propio código, sin importarte cómo se haya traducido a ES5. Dicho de otro modo, esta traducción es realmente transparente para el desarrollador, tú seguirás desarrollando como si todo navegador entendiese ES6.

Un transpilador puede transformar nuestro código ES6:

const nomVariable = n => n * n;

A este otro código ES5:

var nomVariable = function nomVariable (n) {
  return n * n;
};

Podéis apreciar el cambio entre versiones del estándar y el ahorro de líneas y la mayor facilidad de organizar nuestro código con esta nueva sintaxis de ES6.

Hay muchas novedades en las que nos iremos adentrando, pero en este momento nos hace falta crear un entorno de trabajo en el que podamos desarrollar en ES6 sin problemas, configurando nuestro propio transpilador. Lo veremos paso a paso a continuación.

Crear entorno de trabajo para ES6 con Babel

Ahora vamos a comentar varias maneras de iniciar y compilar con este magnífico transpilador conocido por Babel.

Para poder trabajar con Babel necesitamos instalarlo en nuestro equipo, para ello necesitamos tener Node y npm si no sabes de qué hablamos o simplemente no lo tienes instalado puedes ver nuestra guía en http://www.desarrolloweb.com/manuales/manual-nodejs.html.

Babel-cli (Opción de instalación global)

Instalamos las herramientas de trabajo con Babel mediante línea de comandos de forma global mediante nuestra consola:

npm install --global babel-cli

Babel viene construido modularmente y en este caso el que nos interesa es el modulo de ES6, así que procedemos a instalar ya en nuestro directorio raíz nuestro preset:

npm i -D babel-preset-es2015

Ya solo nos queda indicárselo a babel creando el fichero .babelrc con el siguiente contenido:

{
  "presets": ["es2015"]
}

Después de esto ya podemos compilar nuestro fichero .js con el comando

babel mi-fichero.js

Esto compilará nuestro js, mostrando el resultado directamente en la pantalla del terminal. Si estamos contentos con el resultado o simplemente queremos ahorrarnos este paso y compilar directamente en un fichero debemos escribir en el terminal

babel mi-fichero.js -o mi-fichero-compilado.js

Si por el contrario tenemos varios ficheros js que queremos llevar a producción podemos compilar todos los ficheros de un directorio con las instrucciones

babel la-carpeta -d lib

Babel-cli (Opción de instalación local)

Si tenemos varios proyectos que necesitan versiones de babel diferentes podemos instalarlo de forma local. Es algo interesante, pero realmente no todos los desarrolladores lo prefieren, por la comodidad de instalarlo una única vez. Suele ser más recomendable la instalación local, ya que independiza las dependencias por proyectos, pudiendo usar diferentes versiones en cada uno, ya sea de Babel o con cualquier otra dependencia que necesitemos. En este caso primero debemos ir a la carpeta raíz del proyecto, con nuestra consola, e introducir el comando:

npm install --save-dev babel-cli

Si en un momento dado deseamos desinstalar nuestra copia global para usar nuestra copia local ingresamos en la consola

npm uninstall --global babel-cli

Una vez que acabe de instalar nos quedaría un package.json parecido a este

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.0.0"
  }
}

Ahora, en vez de ejecutar Babel directamente desde la línea de comandos, podemos escribir nuestros comandos en npm scripts los cuales usarán nuestra versión local. Simplemente se añade el campo "scripts" a el mencionado paquete package.json situado en la raíz del proyecto. En dicho campo se debe poner el comando de babel, como build.

Procedemos a instalar el preset para ES6:

npm i -D babel-preset-es2015

Introducimos su configuración en nuestro package.json quedando así:

{
    "name": "mi-proyecto",
    "version": "1.0.0",
    "scripts": {
      "build": "babel directorio -d lib"
   },
"babel":{
  "presets": ["es2015"]
},
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

Ahora, desde nuestro terminal, podemos correr lo siguiente:

npm run build

Esto ejecutará Babel igual que antes, sólo que ahora estamos usando una copia local.

Como podéis comprobar, resulta bastante fácil dar el primer paso hacia un código más limpio, estructurado y mucho más fácil de crear y leer. En los siguientes artículos entraremos más profundamente en las novedades de ECMAScript 2015. Todo esto es material de estudio también del curso de ES6 de EscuelaIT, que está a punto de empezar.

Recordar que Babel también está integrado con automatizadores de tareas como Gulp que nos facilitan mucho la operativa del trabajo durante el desarrollo de un proyecto.

En resumen, no estamos hablando de una librería o un framework que pueda estar de moda, sino de las bases de un lenguaje tan usado como Javascript, con infinitas salidas profesionales. Como desarrolladores es nuestra responsabilidad usar las tecnologías de la mejor manera y si estamos buscando nuevas posibilidades en el mercado laboral es algo que debemos conocer para estar por delante de otros candidatos.