Appendix A. Setting Up Your Developing Environment For ES6

The best way to get started with ES6 is by using an interactive online REPL. Here is a list of some of my favorites:

• Babel REPL - bit.ly/babel-repl. Babel is a ES6 transpiler that let’s you take advantage of ES6 and ESnext features today. It is the de facto ES6 transpiler.
• jsBin - jsbin.com. JsBin is a very popular web prototyping tool with a customizable set of pans to visualize HTML, CSS, JavaScript, a console and the output.
• jsFiddle - jsfiddle.net. JsFiddle is yet another popular prototyping tool that let’s you look at your HTML, CSS, JavaScript and output at a glance.
• CodePen - codepen.io is a web prototyping tool and community.
• ES6 Katas - es6katas.org is a collection of interactive katas to learn ES6.

Using ES6 with Node.js

In addition to using prototyping tools for the web, node.js has great support for ES6 as you can appreciate in these compatibility table. But it you want to be able to use all features of ES6 and ESnext you can take advatange of babel.js and the babel-node REPL.

You can install it using the following command:

1 $ npm install -g babel

And start it using babel node:

1 $ babel-node

This will open a REPL that has complete support for ES6.

ES6 and Modern Browsers

Modern browsers also have an increasing support for ES6. The ES6 compability table can give you a general idea as to how the efforts from the different vendors are going.

The problem with developing for the browser is that you cannot control the runtime in which your application is running like you do when developing a backend in node.js. This means that you cannot rely on your user’s browser having the features that you need or want to use. Because of that, transpiling your application from ES6 to ES5 becomes crucial in these environments to make sure that it works in a myriad of devices and can reach as many users as possible.

There’s a wide variety of tools that let you transpile your ES6 code to something that can work on any browser and setup a real world ES6 development environment.

Real-World ES6 Development Environments

The de facto standard for transpiling ES6 is babel.js. It is very extensible and can be plugged into any of the modern front-end build pipelines. It uses a plugin system that lets you easily decide which features of ES6 and ESnext you want to enable.

Depending on your build tooling of choice you’ll need to follow different steps to start using Babel. You can find numerous and extensive guides for Gulp, WebPack, Grunt, Broccoli, etc at bit.ly/setup-es6.