sábado, 21 de mayo de 2016

Ecmascript 6 dev usando VSCode, Babel y WebPack


Esta semana me ha tocado ponerme un poco con Ecmascript 6. Si estás bastante puesto en desarrollo javascript no te aportaré nada con este post, podrías dejar de leerlo, pero si lo que quieres es tener una introducción a Ecmascript y poder montarte tu hola mundo este es el post.

Desde que me dedico a desarrollar software Ecmascript siempre ha estado ahí, mi percepción de ecmascript era como la versión avanzada de javascript que tenías que ir con cuidado al usar en combinación con código javascript porque corrías el riesgo que ese código no funcionase en todos los navegadores. Ya veréis que la cosa ha evolucionado mucho pero sigue pasando lo mismo con la diferencia que a día de hoy ya tenemos transpiladores que se encargan de hacer que nuestra aplicación pueda funcionar en todos los navegadores. La transpilación en este caso consiste en entender el código Ecmascript y saber traducirlo a versiones de javascript soportadas por todos los browsers.

Ecmascript nació en 1997, mientras algunos navegadores apostaban por javascript, otros JScript y en definitiva cada browser y plataforma hacía un poco la suya en ámbito HTML finalmente se decidió adoptar un estándar con javascript como base que se respeta por todos los navegadores. A partir de ahí javascript ha ido creciendo siempre respetando las especificaciones de Ecmascript, tras una fase donde los developers veíamos javascript como un lenguaje menor llegó de Ajax y javascript empezó a tomar relevancia. Más tarde salieron frameworks y librerías que han puesto a javascript entre uno de los lenguajes de programación más usados. Aún así hasta la llegada de Ecmascript 6 javascript no permitía usar mecanismos de los que disponemos en otros lenguajes de programación. Se podría decir que con la llegada el año pasado de Ecmascript 6 se dota a javascript de todos estos mecanismos que hacen que programar en javascriptno sea tan diferente a lo que estás acostumbrado a programar en ámbito backend con java o c#. Os dejo un link que explica a la perfección que nos aporta Ecmascript 6 respecto la versión anterior. Entre las mejoras, declaración simplificada de clases, definición de constantes, arrow functions (vendrían a ser un simil de lambda expressions), module import/export etc...

Ya vale de wikipedia XD a continuación explicaré como montarte un entorno que te permita transpilar el código Ecmascript y poder jugar un poco. Dejar claro que es un entorno para probar y desarrollar si tuviese que hacer en un proyecto para clientes y desarrollar con cara y ojos me integraría con el debugger, testing, linters y en definitiva miraría de darle una vuelta esto que propongo aquí es un entorno que te funcionará y podrás desarrollar con Ecmascript pero no digo que sea la mejor opción ni mucho menos. Lo que buscaba al montarlo era perder el mínimo tiempo posible en montar una arquitectura cliente que me permita desarrollar en Ecmascript 6 desde un IDE y ver el resultado en un browser.

Vamos con los pasos para nuestro hola mundo. Una vez tengas node, podrías abrir la carpeta con Visual Studio Code dentro crea un archivo package.json en lo que sería el root del proyecto.

package.json

{
    "name":"areatic.ecmascript.seed",
    "version":"1.0.0",
    "scripts":{},
    "devDependencies": {
        
    }, 
    "dependencies": {
        
    }
}
Lo siguiente que haremos será instalar los paquetes necesarios a través de npm. Desde vsCode Ctrl+Shift+P, esto nos lleva a command palete donde hemos de seguir los dos pasos de la imagen.



Ahora si volvemos a command palette Crl+Shift+P ya podemos usar comandos npm para instalar webpack y babel que son mis elegidos para la transpilación y servidor http de desarrollo. Insisto, he optado por esta opción aunque hay otras... Una vez estamos en la paleta de comandos escribe "npm install" y entre las opciones deplegadas selecciona "install and save dev dependency" te pedirá el nombre del paquete como muestro en la imagen, escribe "babel-core" y pulsa enter.


Ahora se trataría de repetir el mismo proceso para el resto de paquetes necesarios para este entorno:

babel-loader

babel-preset-es2015

webpack

webpack-dev-server

Al finalizar este proceso, si abres el fichero package.json deberías ver como se han añadido automáticamente a devDependencies estos paquetes. También deberías tener una nueva carpeta en la root del proyecto "node_modules". El siguiente paso es crear un archivo de configuración para webPack, pulsamos new file desde VSCode y lo llamamos webpack.config.js:

webpack.config.js

var path = require('path');
var webpack = require('webpack');
 
module.exports = {
  entry: './index.js',
  output: { path: './app', filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
};
Ahora vamos a automatizar la tarea para hacer una build que se encargue de transpilar con babel y levantar nuestra aplicación con webpack para ello volvemos a command palete con Ctrl+Shift+P, escribimos task y seleccionamos "configure task runner", esto nos permitirá editar el archivo task.json. Aquí veremos que nos vienen comentadas una serie de opciones ya preparadas para typescript, gulp, npm, etc.. nosotros personalizaremos una task de este modo:

.vscode/task.json

{
 "version": "0.1.0",

 "command": "${workspaceRoot}/node_modules/.bin/webpack-dev-server",

 // The command is a shell script
 "isShellCommand": true,

 // Show the output window only if unrecognized errors occur.
 "showOutput": "always",

 // args is the HelloWorld program to compile.
 "args": [
        "--progress", 
        "--colors"
    ], 
    "echoCommand": true,
 "tasks": [
  {
   "args": [
    "" 
   ],
   "suppressTaskName": true,
   "taskName": "webpack dev",
   "isBuildCommand": true
  }
    ]
}

Con esto ya tendríamos el entorno de desarrollo, ahora los siguientes pasos describen como hacer una aplicación muy sencilla con Ecmascript. En primer lugar dentro de src crearemos un archivo .js que llamaremos Greeter.js

src/greeter.js

const defaultGreeter = "ola que ase amigo";

function sayHello(greeter){
    console.log('Greeter in action');
    return greeter;
}

export default {sayHello, defaultGreeter}
A continuación creamos index.js y index.html en la root del proyecto.

index.js

import HelloWorld from './src/Greeter.js'

var context = window || global;
var app = {};

var app = context.app;
if (!app) {
    app = context.app = {};
}

app.HelloWorld = HelloWorld;

export default app;

index.html

<html>
    <head>
        <script src="bundle.js"></script>
    </head>
    <body onload="javascript:document.getElementById('greeterinput').value = app.HelloWorld.defaultGreeter">
        <button onclick="javascript:(document.getElementById('myP').innerHTML = 
        app.HelloWorld.sayHello(document.getElementById('greeterinput').value))">Say Hello</button>
        <input id="greeterinput" type="text" />
        <p id="myP"></p>
    </body>
</html>
Ya tenemos la aplicación, ahora con Ctrl+Shift+B arrancas webpack.



Si abres la url http://localhost:8080/index en tu browser favorito podrás jugar con la aplicación que acabamos de crear.



Hasta aquí el post de esta semana, espero sea de utilidad a alguien, este artículo es de Mayo 2016 si te dispones a usar este entorno pasado ya un tiempo te recomiendo que eches un vistazo a ver si hay optimizaciones en cuanto a soporte de Ecmascript 6 en navegadores. Recuerda que puedes seguir areaTIC en las redes sociales y cualquier aportación, comentario, duda siempre es bienvenida!