This post originally appeared on Engine Yard.
As developers, it’s our blessing and curse to always be learning. When I think about getting ready to adopt ES6, I feel some anxiety about the thought of having to figure out all of the new patterns and APIs it exposes.
In this miniseries, we’ll look at some quick and easy ways to integrate ES6 into what you’re working on today. Hopefully, by adding ES6 patterns into our coding practice a little at a time, we’ll be able to avoid spending a weekend learning the new API when we could be playing outside.
Looking Ahead to ES6
It’s found on the server as Node, in OS X Automation, and of course, in all of the web browsers—where many of us spend most of our time writing JS apps. And we’ll be writing ES6 in all of these locations before you know it. It’s already standard in Ember CLI, Angular 2.0 will be based on it, and is making its way into Node bit by bit.
There are many features that haven’t been rolled out yet, but can be easily transpiled (transformed and compiled) to ES5 for immediate use. There are several compilers and polyfills available to help with transpiling. My favorite is Babel, formerly called 6to5. Babel 5.0 was released on March 31, 2015, and is currently leading other options, with 76% of the spec in place.
Regardless of which transpiler you use, there are several features that are still mostly unsupported across all JS engines. These include: tail calls, WeakMap, WeakSet, Proxy, Reflect, Symbol, new.target, and subclassing built-ins, among others.
Some of these features are available in Babel, but only with experimental mode turned on. For the purposes of this miniseries, we’ll be looking at some of the most widely supported, easy-to-use features—so we won’t be covering experimental features like these.
We’re also going to skip over some of the features that are a little more difficult to get started with, such as iterators, generators, and proxies.
Getting ES6 Into Your Build Process
Since we can transpile ES6 code to ES5 and start using it everywhere now, it doesn’t hurt to get it set up in our build process, so that we can just start using it without having to think twice about it. Luckily, this is really easy to do with Babel.
It’s beyond the scope of this miniseries to get into all the variations of what you might encounter in getting ES6 into your build process, but you probably won’t have much trouble adding it as a step in your existing build process.
There’s a Babel plugin available for just about every build setup, including Grunt, Gulp, and Broccoli, and whether you’re using Browserify or RequireJS. It even has a built in JSX transpiler, making it really easy to use with React. There’s a full list of build tools and how to use them [on the Babel website] (http://babeljs.io/docs/using-babel).
You may also want to make use of the babel-runtime package. This is an optional transformer that prevents duplication of common functions during compilation. It also sandboxes your code, aliasing many globals to
core-js to avoid polluting the global namespace.
With Browswerify + NPM Scripts
1 2 3 4 5 6 7 8 9 10
Note that by defining the build script under the
postinstall property, it will be run automatically after the package is installed. This might be handy when deploying to Engine Yard, as it will prevent you from having to explicitly call a build in your deploy script.
Let’s Do It
Now that you’ve gotten ES6 set up in your build, you can just start writing it whenever you’re developing. Or, if you don’t feel like it, you can just fall back to ES5. Remember, it’s all valid ES6!
Make sure to tune tomorrow for part two of this miniseries, where we’ll walk through some of the easiest places to start using ES6 in a typical front-end Backbone + React project.
Until then, happy hacking!