The JavaScript language was created in 1994, received a few updates in 1999, but went unchanged from 1999 to 2009. A set of small changes was introduced in 2009, resulting in the version of JavaScript known as ES5, or the fifth edition of the standard.

In 2015, a number of language improvements were added as the sixth edition of the standard. Many of these new language features were influenced by languages like Ruby and Python. Technically, this sixth edition is named ES2015, but it is more commonly known as ES6.

ES6 is well supported by Google Chrome, Mozilla Firefox, and Microsoft Edge. These are evergreen browsers, meaning that they self-update without the user needing to manually download and install the latest version. As Google, Mozilla, and Microsoft have added more and more ES6 compatibility to their browsers, they have been able to roll out these enhancements quickly to their users.

However, non-evergreen and most mobile browsers have poor support for ES6. Figure 17.1 shows the percentage of ES6 features supported by recent versions of desktop and mobile browsers. (In the figure, IE = Internet Explorer, FF = Mozilla Firefox, CH = Google Chrome, SF = Safari, KQ = Konqueror, and AN = Android.)

Figure 17.1  ES6 feature support as of spring 2016

If you would like a closer or up-to-date look at browser support for ES6, go to kangax.github.io/​compat-table/​es6/ to check out the latest information. The table’s creator, Juriy Zaytsev, updates the data frequently.

Support may be spotty among older browsers, but we love, love, love ES6. It is a beautiful thing, and it is worth the effort to switch over as soon as possible rather than waiting until support is universal.

In this chapter, you will begin working on the user-facing portion of Chattrbox, which you will write using a number of ES6 features. To make sure your application works on all browsers, you will use the open-source tool Babel to take care of compatibility.

There is one item of housekeeping to take care of before you begin. So that you can focus on learning ES6 and using Babel, the index.html and stylesheets/styles.css files for Chattrbox are provided for you at www.bignerdranch.com/​downloads/​front-end-dev-resources.zip. Download the .zip file and extract the contents (including the entire stylesheets/ folder) into your chattrbox/app directory. (index.html will replace your existing copy of index.html.)

Also, one note: While working through the code in this chapter, you may see a warning in the console about the MIME type of your CSS files. It is safe to ignore this warning.

Onward and upward! By the end of this chapter, Chattrbox will communicate over WebSockets with your chat server (Figure 17.2).

Figure 17.2  Chattrbox at the end of this chapter

Tools for Compiling JavaScript

Babel is a compiler. Its job is to translate ES6 syntax into the equivalent ES5 code to be run by a browser’s JavaScript engine (Figure 17.3).

Figure 17.3  Building ES5 code from ES6 files

To use Babel effectively, you will need to install a few npm modules to create an automated build process. You will use Babel to compile your ES6 code to ES5, Browserify to bundle your modules together into a single file, and Babelify to make the two work together. Additionally, you will use Watchify to trigger the build process any time you save changes to your code (Figure 17.4).

Figure 17.4  Compilation workflow

First, you need to install Babel. It has a few different moving parts, depending on your needs. In your case, you will need the ability to compile in two ways: from the command line and programmatically. The tools babel-cli and babel-core, respectively, will address these needs. You will also need to install a Babel configuration suitable for compiling the ES6 standard, which is called babel-preset-es2015.

Run the following npm commands in your chattrbox directory to install the appropriate Babel tooling. (If you need a refresher on how to run npm install -g with administrator privileges, refer to Chapter 1.)

npm install -g babel-cli
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015

Now you need to configure Babel to compile using the es2015 preset you installed. Create a file called .babelrc in your root chattrbox folder and add the following configuration information to it:

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

Finally, install Babelify, Browserify, and Watchify to the chattrbox/node_modules/ directory:

npm install --save-dev browserify babelify watchify

You will be using these three tools later in this chapter, after you have Babel up and running.