/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["On ", _jsx(_components.a, {
        href: "http://backtothefuture.wikia.com/wiki/2015",
        children: "Oc­to­ber 21th, 2015"
      }), " we all re­joiced with the re­turn from the past of\nMarty 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\nhave was still using a tech­nol­ogy re­leased in ", _jsx(_components.a, {
        href: "https://en.wikipedia.org/wiki/ECMAScript#Versions",
        children: "De­cem­ber 2009"
      }), ". The\nsup­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\n", _jsx(_components.a, {
        href: "http://openjdk.java.net/projects/nashorn/",
        children: "Nashorn"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["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\nstart using a mod­ern JavaScript, or more cor­rectly, let’s start using ", _jsx(_components.a, {
        href: "http://es6-features.org/",
        children: "EC­MAScript 6"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "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\nhow 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\nhave not been touched or mod­i­fied to sup­port any of ES6 fea­tures."
    }), "\n", _jsxs(_components.h2, {
      id: "main",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#main"
      }), "main"]
    }), "\n", _jsxs(_components.p, {
      children: ["Tra­di­tion­ally your ", _jsx(_components.code, {
        children: "main.js"
      }), " file would re­side in the root of your mod­ule (this is where ", _jsx(_components.code, {
        children: "NPM"
      }), " will look for it by\nde­fault); how­ever as we are going to tran­spile to ", _jsx(_components.code, {
        children: "ES5"
      }), " you’ll want to put your index file in ", _jsx(_components.code, {
        children: "/src/main.js"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["How­ever, be­cause we are tran­spiling to ", _jsx(_components.code, {
        children: "ES5"
      }), ", your ", _jsx(_components.code, {
        children: "package.json"
      }), "’s main block should point to the tran­spiled ", _jsx(_components.code, {
        children: "index.js"
      }), "\nfile in the ", _jsx(_components.code, {
        children: "/lib"
      }), " di­rec­tory."]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-json",
        children: [_jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"name\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx-es6\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n  ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"version\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"0.0.1\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n  ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"private\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "true"
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n\n  ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"main\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"lib/main.js\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n\n  ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"scripts\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n    ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"build\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"rm -Rf lib && ./node_modules/.bin/babel --out-dir lib src\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n    ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"start\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"./node_modules/.bin/vertx run lib/main.js\""
        }), "\n  ", _jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n\n  ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"dependencies\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n    ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"vertx3-full\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"3.1.0\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n    ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"babel-cli\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"6.2.0\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n    ", _jsx(_components.span, {
          className: "hljs-attr",
          children: "\"babel-preset-es2015\""
        }), _jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"6.1.18\""
        }), "\n  ", _jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n", _jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", _jsx(_components.p, {
      children: "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\ngen­er­ated files. This is slightly equiv­a­lent to a com­pi­la­tion process you would have using com­piled lan­guage."
    }), "\n", _jsxs(_components.h2, {
      id: "npmignore",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#npmignore"
      }), ".npmignore"]
    }), "\n", _jsxs(_components.p, {
      children: ["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\nany­thing listed on your ", _jsx(_components.code, {
        children: ".gitignore"
      }), " since we should ig­nore the gen­er­ated code from git it need to in­form npm to ig­nore\nthat rule and keep the ", _jsx(_components.code, {
        children: "lib"
      }), " di­rec­tory. The ", _jsx(_components.code, {
        children: ".gitignore"
      }), " should be some­thing like:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "hljs language-text",
        children: "/lib\n/node_modules\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["And the ", _jsx(_components.code, {
        children: ".npmignore"
      }), ":"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "hljs language-text",
        children: "/.gitignore\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "hello-fat-arrows-and-let-keywords",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#hello-fat-arrows-and-let-keywords"
      }), "Hello fat arrows and let keywords"]
    }), "\n", _jsxs(_components.p, {
      children: ["So all the heavy work has been done, in order to cre­ate our hello world we just need to code some ", _jsx(_components.code, {
        children: "ES6"
      }), " in our\n", _jsx(_components.code, {
        children: "src/main.js"
      }), " file:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: [_jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Router"
        }), " = ", _jsx(_components.span, {
          className: "hljs-built_in",
          children: "require"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx-web-js/router\""
        }), ");\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " server = vertx.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "createHttpServer"
        }), "();\n\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " router = ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Router"
        }), ".", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "router"
        }), "(vertx);\n\nrouter.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "get"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"/\""
        }), ").", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "handler"
        }), "(", _jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", _jsx(_components.span, {
            className: "hljs-params",
            children: "ctx"
          }), ") =>"]
        }), " {\n\n    ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " response = ctx.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "response"
        }), "();\n    response.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "putHeader"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"content-type\""
        }), ", ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"text/plain\""
        }), ");\n\n    response.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "end"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello ES6 World!\""
        }), ");\n});\n\nserver.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "requestHandler"
        }), "(router.", _jsx(_components.span, {
          className: "hljs-property",
          children: "accept"
        }), ").", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "listen"
        }), "(", _jsx(_components.span, {
          className: "hljs-number",
          children: "8080"
        }), ");\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["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 ", _jsx(_components.code, {
        children: "let"
      }), " key­word. If\nyou now com­pile your project:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "hljs language-arduino",
        children: "npm run build\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "And then start it:"
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-sql",
        children: ["npm ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "start"
        }), "\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["You have your first back to the fu­ture ", _jsx(_components.code, {
        children: "ES6"
      }), " ver­ti­cle!"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Blog

Vert.x ES6 back to the future

Next post

Combine vert.x and mongo to build a giant

Previous post

Using the asynchronous SQL client

Blog

Vert.x ES6 back to the future

Next post

Combine vert.x and mongo to build a giant

Previous post

Using the asynchronous SQL client

Related posts

Some Rest with Vert.x

Unit and Integration Tests

Using the asynchronous SQL client