Vert.x ES6 back to the future

On Oc­to­ber 21th, 2015 we all re­joiced with the re­turn from the past of Marty McFly with his fly­ing car and so on, how­ever in the Vert.x world we were quite sad that the JavaScript sup­port we have was still using a tech­nol­ogy re­leased in De­cem­ber 2009. The sup­port for ES5 is not some­thing that we Vert.x team con­trols but some­thing that is in­her­ited from run­ning on top of Nashorn.

With all these nos­tal­gic thoughts on my mind I’ve de­cided to bring us back to the fu­ture and by fu­ture I mean, let’s start using a mod­ern JavaScript, or more cor­rectly, let’s start using EC­MAScript 6.

It turned out to be quite sim­ple to achieve this so I’ll pick the hello world ex­am­ple and write it in ES6 just to show how you can port your code to ES6 and still use the cur­rent Vert.x APIs. Note that Vert.x in­ter­nals still are ES5 and have not been touched or mod­i­fied to sup­port any of ES6 fea­tures.

main

Tra­di­tion­ally your main.js file would re­side in the root of your mod­ule (this is where NPM will look for it by de­fault); how­ever as we are going to tran­spile to ES5 you’ll want to put your index file in /src/main.js.

How­ever, be­cause we are tran­spiling to ES5, your package.json’s main block should point to the tran­spiled index.js file in the /lib di­rec­tory.

{
  "name": "vertx-es6",
  "version": "0.0.1",
  "private": true,

  "main": "lib/main.js",

  "scripts": {
    "build": "rm -Rf lib && ./node_modules/.bin/babel --out-dir lib src",
    "start": "./node_modules/.bin/vertx run lib/main.js"
  },

  "dependencies": {
    "vertx3-full": "3.1.0",
    "babel-cli": "6.2.0",
    "babel-preset-es2015": "6.1.18"
  }
}

As you can see, the main idea is to in­voke the tran­spiler (Babel) when we are build­ing our project, and run it using the gen­er­ated files. This is slightly equiv­a­lent to a com­pi­la­tion process you would have using com­piled lan­guage.

.npmignore

If you’re plan­ning to de­ploy your pack­age to npm ei­ther local or pri­vate you should be aware that npm will ex­clude any­thing listed on your .gitignore since we should ig­nore the gen­er­ated code from git it need to in­form npm to ig­nore that rule and keep the lib di­rec­tory. The .gitignore should be some­thing like:

/lib
/node_modules

And the .npmignore:

/.gitignore

Hello fat arrows and let keywords

So all the heavy work has been done, in order to cre­ate our hello world we just need to code some ES6 in our src/main.js file:

var Router = require("vertx-web-js/router");
var server = vertx.createHttpServer();

var router = Router.router(vertx);

router.get("/").handler((ctx) => {

    let response = ctx.response();
    response.putHeader("content-type", "text/plain");

    response.end("Hello ES6 World!");
});

server.requestHandler(router.accept).listen(8080);

As you can see we’re using fat ar­rows in­stead of writ­ing a func­tion clo­sure and scoped vari­ables using let key­word. If you now com­pile your project:

npm run build

And then start it:

npm start

You have your first back to the fu­ture ES6 ver­ti­cle!