Thomas R Alexander

Manager, Developer, and professional problem solver

ES6: The Future is Now

As web developers, we’re all familiar with the sloth-like pace of web standards from idea to implementation (there’s a reason JS hasn’t changed much over the years). ES6 was announced in 2008 and the first draft was published in 2011. It’s 2015 and we cannot fully use ES6 in the browser yet. It’s frustrating, but we’ve all been distracted by the JavaScript flavor-of-the-month libraries/compiled languages that were introduced to help breathe life into JS and MVC.

So why write ES6 code now?

ES6 is closer to completion than you think and if you learn it now, you’ll be much further ahead in the job market. Career advancement aside, ES6 allows you to write better quality, performant, and organized code and can help you wean off of some of the other third party JS-language libraries.

Aside from that, there are third-party libraries that have been released that allow you to write ES6 code and compile it to ES5 code. Some of examples of these are: BabelJS, Traceur, and es6-transpiler. They, much in large, accomplish the same thing, but I’ve found that BabelJS is better maintained and supported (and even features some future-techy es7 features).

So not only is ES6 available to you now, but it has been right under your nose the entire time. Now is the time to start asking yourself:

  • “Why am I using library x?”
  • “What does library x offer that ES6 doesn’t?”
  • “Can ES6 do what library x does?”

I’m willing to bet that a lot of the things you are using (AMD imports, classes/inheritance, widgets and modules, and promises) can be replaced entirely with ES6.

But why would you even bother to rewrite your code? ES6 is the future and is, of course, native JS code. Native JS code is more performant and is finally in a position to tackle the front-end engineering problems of this century. By ditching libraries like Coffeescript, Typescript, and Dart, you’ll not only reduce the amount of code in your codebase, but you’ll also be improving the way you write JavaScript code (no, CoffeeScript is not JS code).

Let me show you how easy it is to get up and running with BabelJS and how you can immediately start writing ES6 code.

Getting Started with BabelJS

I use Gulp as a build system in my projects, but of course there are many others. I am going to assume you have Gulp installed. If you use another build system, check out Babel’s install page for further instructions.

Install

Add a task to your Gulpfile

The following task will take app.js, run it through the babel compiler, and output it in a folder called dist. In this example, app.js is your javascript file with ES6 code and dist/app.js is the output file, transpiled to ES5. You would include the dist/app.js file in your html, not the src js.

That’s it. That’s all it takes to write ES6 code today.

Bonus: Add sourcemaps to to make debugging easier

BabelJS compiles your code to ES5 code, so it can get in the way of debugging out of the box. To solve this problem, Babel includes the sourcemaps option, which will help you debug/visualize code from the original source JS file. Here’s an example on how you’d use it:

What next?

Now is the time to start learning ES6. Here are a few blog posts of mine on classes and fat arrow functions to get you started. Look for more in the future, but in the meantime check out Babel’s ES6 tutorial page.

The future is now.

2 thoughts on “ES6: The Future is Now

  • Veille technologique | Pearltrees
    June 11, 2015 at 2:29 am

    […] more about ES6 features here Run it with PM2 Development mode lib/math.js. ES6: The Future is Now. Leave a Comment Posted on June 8, 2015 As web developers, we’re all familiar with the sloth-like […]

  • zombiecodekill
    June 13, 2015 at 2:25 am

    I agree that now is a good time to start learning it.

    I don’t use any transpilers in my main job just yet, I still need to write ES3 occasionally and also don’t want to spend time teaching (or pushing) ES6 myself until JavaScript is a larger part of the development work that we do, however many people around the world are already using it for all of their JavaScript development very successfully.

    It is not one of those new technologies where we don’t know whether it will take off or not. ES6 will be everywhere in about a year from now. However in some cases I believe developers who do not use JavaScript as their main language should first focus on learning how to write cleaner ES5 code – basics like linting and strict mode are still not ubiquitous unfortunately.

    I have a full list of transpilers and other JavaScript frameworks listed at http://www.zombiecodekill.com/JavaScript some people think I’m crazy because there’s a new framework to add everyday, the project is helping me understand JavaScript better myself.

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


7 + 1 =