{"id":12,"date":"2015-04-12T10:48:00","date_gmt":"2015-04-12T10:48:00","guid":{"rendered":""},"modified":"2016-01-30T22:51:01","modified_gmt":"2016-01-30T22:51:01","slug":"using-ecmascript6-today","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2015\/04\/12\/using-ecmascript6-today\/","title":{"rendered":"Using ECMAScript6 today"},"content":{"rendered":"<h3>1. Introduction<\/h3>\n<p>Although <i>ECMAScript6<\/i> has not been officially released yet, we can play around with new language features today. There are tools such as <i>Traceur<\/i> or <i>Babel<\/i> which are able to convert <i>ECMAScript6<\/i> into <i>ECMASciprt5<\/i>, thus we are able to run the code in every browser. So let&#8217;s try to run the snippet below, which leverages <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\"> destructuring assignment<\/a>using those tools<\/p>\n<pre lang=\"javascript\">\r\n(function () {\r\n    var obj = {\r\n        firstProp: 1,\r\n        secondProp: 2\r\n    }, array = [1, 2, 3];\r\n\r\n    \/\/Destructuring array\r\n    var [x,y,z] = array;\r\n\r\n    console.log('Destructuring array');\r\n    console.log('Value of x = ' + x);\r\n    console.log('Value of y = ' + y);\r\n    console.log('Value of z = ' + z);\r\n\r\n    console.log('Destructuring object');\r\n    var { secondProp: b,firstProp: a } = obj;\r\n    console.log('Value of firstProp = ' + a);\r\n    console.log('Value of secondProp = ' + b);\r\n\r\n}());\r\n<\/pre>\n<h3>2. Using <i>Traceur<\/i><\/h3>\n<p>I&#8217;ll start from <i>Traceur<\/i> first. First of all we have to install it, so run in console (I am using gulp as my build system)<\/p>\n<pre lang=\"bash\">\r\nnpm install gulp-traceur --save-dev\r\n<\/pre>\n<p>Then we have to write simple gulp task which:<\/p>\n<ul>\n<li>grabs all of our js files<\/li>\n<li>runs the code analysis using <i>JsHint<\/i><\/li>\n<li>transpiles source files into valid <i>ECMAScript5<\/i><\/li>\n<li>concatenates the result into single file<\/li>\n<li>generates source maps (for debugging proposes)<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\nvar gulp = require('gulp');\r\nvar sourcemaps = require('gulp-sourcemaps');\r\nvar traceur = require('gulp-traceur');\r\nvar concat = require('gulp-concat');\r\nvar jshint = require('gulp-jshint');\r\n\r\nreturn gulp.src('app\/*.js')\r\n           .pipe(jshint())\r\n           .pipe(jshint.reporter('jshint-stylish'))\r\n           .pipe(jshint.reporter('fail'))\r\n           .pipe(sourcemaps.init())\r\n           .pipe(traceur())\r\n           .pipe(concat('app.all.js'))\r\n           .pipe(sourcemaps.write('.'))\r\n           .pipe(gulp.dest('dest'));\r\n<\/pre>\n<p>Having our result file ready, now we can add a script tag in html pointing to <i>app.all.js<\/i>. However at this point in the runtime we will get an error.<\/p>\n<pre lang=\"bash\">\r\n$traceurRuntime is not defined\r\n<\/pre>\n<p><a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/runtimeerror.png\" rel=\"attachment wp-att-266\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/runtimeerror.png\" alt=\"ECMAScript6 today\" width=\"600\" class=\"aligncenter size-full wp-image-266\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/runtimeerror.png 520w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/runtimeerror-150x28.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/runtimeerror-300x55.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/a><br \/>\nQuick look at the generated <i>app.all.js<\/i> file reveals the problem<\/p>\n<pre lang=\"javascript\">\r\n\"use strict\";\r\n(function() {\r\n  var $__1,\r\n      $__2;\r\n  var obj = {\r\n    firstProp: 1,\r\n    secondProp: 2\r\n  },\r\n      array = [1, 2, 3];\r\n  var $__0 = array,\r\n      x = ($__1 = $__0[$traceurRuntime.toProperty(Symbol.iterator)](), ($__2 = $__1.next()).done ? void 0 : $__2.value),\r\n      y = ($__2 = $__1.next()).done ? void 0 : $__2.value,\r\n      z = ($__2 = $__1.next()).done ? void 0 : $__2.value;\r\n  console.log('Destructuring array');\r\n  console.log('Value of x = ' + x);\r\n  console.log('Value of y = ' + y);\r\n  console.log('Value of z = ' + z);\r\n  console.log('Destructuring object');\r\n  var $__3 = obj,\r\n      b = $__3.secondProp,\r\n      a = $__3.firstProp;\r\n  console.log('Value of firstProp = ' + a);\r\n  console.log('Value of secondProp = ' + b);\r\n}());\r\n\r\n\/\/# sourceMappingURL=app.all.js.map\r\n<\/pre>\n<p>Transpiled code has references to <i>$traceurRuntime<\/i> objects, so in order to make our code work, we have to add additional script tag pointing to <i>traceur-runtime.js<\/i>. You can easily get the sources with <i>bower<\/i>, just run in console<\/p>\n<pre lang=\"bash\">\r\nnpm install bower --save-dev\r\nbower install  traceur-runtime\r\n<\/pre>\n<p>Now everything should work and in console we&#8217;ll get expected result<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/result.png\" rel=\"attachment wp-att-267\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/result.png\" alt=\"ECMAScript6 today\" width=\"600\" class=\"aligncenter size-full wp-image-267\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/result.png 427w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/result-150x74.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/result-300x148.png 300w\" sizes=\"(max-width: 427px) 100vw, 427px\" \/><\/a><br \/>\nAs you could see in example above <i>Traceur<\/i> generates overcomplicated code which makes debugging of the original sources (using source maps) a painful process. Just take a look at the following screenshot<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapTraceur.png\" rel=\"attachment wp-att-269\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapTraceur.png\" alt=\"ECMAScript6 today\" width=\"600\" class=\"aligncenter size-full wp-image-269\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapTraceur.png 520w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapTraceur-150x92.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapTraceur-300x185.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/a><br \/>\nfortunately <i>Babel<\/i> doesn&#8217;t seem to have these drawbacks.<\/p>\n<h3>3. Using <i>Babel<\/i> <\/h3>\n<p>Let&#8217;s modify our gulp build script to use <i>Babel<\/i> instead of <i>Traceur<\/i><\/p>\n<pre lang=\"bash\">\r\nnpm install gulp-babel --save-dev\r\n<\/pre>\n<pre lang=\"javascript\">\r\nvar gulp = require('gulp');\r\nvar sourcemaps = require('gulp-sourcemaps');\r\nvar babel= require('gulp-babel');\r\nvar concat = require('gulp-concat');\r\nvar jshint = require('gulp-jshint');\r\n\r\nreturn gulp.src('app\/*.js')\r\n           .pipe(jshint())\r\n           .pipe(jshint.reporter('jshint-stylish'))\r\n           .pipe(jshint.reporter('fail'))\r\n           .pipe(sourcemaps.init())\r\n           .pipe(babel())\r\n           .pipe(concat('app.all.js'))\r\n           .pipe(sourcemaps.write('.'))\r\n           .pipe(gulp.dest('dest'));\r\n<\/pre>\n<p>And basically that all, we are ready to go. <i>Babel<\/i> doesn&#8217;t require any runtime dependencies, generated code is simple<\/p>\n<pre lang=\"javascript\">\r\n'use strict';\r\n\r\n(function () {\r\n    var obj = {\r\n        firstProp: 1,\r\n        secondProp: 2\r\n    },\r\n        array = [1, 2, 3];\r\n\r\n    \/\/Destructuring array\r\n    var x = array[0];\r\n    var y = array[1];\r\n    var z = array[2];\r\n\r\n    console.log('Destructuring array');\r\n    console.log('Value of x = ' + x);\r\n    console.log('Value of y = ' + y);\r\n    console.log('Value of z = ' + z);\r\n\r\n    console.log('Destructuring object');\r\n    var b = obj.secondProp;\r\n    var a = obj.firstProp;\r\n\r\n    console.log('Value of firstProp = ' + a);\r\n    console.log('Value of secondProp = ' + b);\r\n})();\r\n\/\/# sourceMappingURL=app.all.js.map\r\n<\/pre>\n<p>and even source maps seem to work correctly.<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapBabel.png\" rel=\"attachment wp-att-268\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapBabel.png\" alt=\"ECMAScript6 today\" width=\"600\" class=\"aligncenter size-full wp-image-268\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapBabel.png 738w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapBabel-150x62.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/04\/using-ecmascript6-today\/SourceMapBabel-300x124.png 300w\" sizes=\"(max-width: 738px) 100vw, 738px\" \/><\/a><br \/>\nSo when it comes to me I choose <i>Babel<\/i>. Source code for this post can be found <a href=\"https:\/\/github.com\/tpodolak\/Blog\/tree\/master\/UsingEcmaScript6Today\">here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Introduction Although ECMAScript6 has not been officially released yet, we can play around with new language features today. There are tools such as Traceur or Babel which are able to convert ECMAScript6 into ECMASciprt5, thus we are able to run the code in every browser. So let&#8217;s try to run the snippet below, which [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,19,18,21],"tags":[172,173,174,175],"class_list":["post-12","post","type-post","status-publish","format-standard","hentry","category-babel","category-ecmascript6","category-javascript","category-traceur","tag-babel","tag-ecmascript6","tag-javascript","tag-traceur"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":6,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions\/525"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}