Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Take the Quiz
Think you know JavaScript ES6? Test your knowledge in our quiz: JavaScript ES6, Do You Know the Right Tool for the Job?

Next lesson playing in 5 seconds

Cancel

Free Preview: JavaScript ES6 Fundamentals

Introduction

01:26
  • Overview
  • Transcript

JavaScript ES6 (more properly known as ECMAScript 2015 or ES2015) represents the biggest change to JavaScript in the last 20 years. JavaScript is the language of the web, and ES6 is a major improvement for web developers, adding much-needed features such as classes, promises, arrow functions, generators, string templates and many others. Browser support is growing, and transpilation tools such as Babel allow you to get started coding in ES6 today.

In this course, Envato Tuts+ instructor Dan Wellman will help you sharpen and update your JavaScript skills by learning some of the most important additions that ES6 brings to the language. Cutting-edge web development practices are increasingly relying on ES6, so knowledge of the new syntax is becoming more and more necessary. Not only that, but programming in ES6 is just more fun. So let's get started!

We've built a comprehensive guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics:

1. Introduction

1.1 Introduction

Hi folks. Ecma Script 2015 or ES6 as it's also named is now an official Ecma standard and represents the biggest change to the language in almost 20 years. JavaScript of course is the language of the web, and while many features of ES6 aren't yet on mainstream browsers we need to get up speed with the latest JavaScript techniques. My name is Dan Wellman. Welcome to ECMAScript 2015, Fundamentals, from all of us here at Tuts+. Support for ES6 is improving all the time. Features are rapidly making their way into the mainstream browsers. So there has never been a better time to get to grips with the latest features of JavaScript. Because support at this type is not universal, we're going to use Babel to transfile our ES 6 down to ES 5, so that it can be used in all mainstream browsers. Babel supports some ES 6 features with transfillation and others with a polyfill. In the first few lessons of the course, we'll be looking at features which are supported by transpolation. So initially we'll setup our development area ready to transpile. A bit later in the course we'll move on to other features that are supported by the polyfill. So at that point we'll hook up the polyfill and see how easy it is to work with that. So let's move on to the first lesson in the course and get Babel set up and ready to use. Thanks for watching.

1.2 Setup

Hi folks. ES6 is now an official standard but most mainstream browsers haven't yet implement all the new features. And a lot of the support they have added is disabled by default and needs to be enabled with configuration. This is where Babel comes in, it's a transpiler. We feed lovely shiny new ES6 into it and regular ES5 supported by all mainstream browsers comes out of the other side. Babel can be used with many different tools and frameworks. The website lists all of the different tools and software that can be used with Babel and gives instructions on how to install and use it for each of them. There's also a wealth of information about ES6 on the Babel website. So I'd recommend that you take a look through that also. We'll be using Grunt to run Babel, so you'll need to have Node.js installed. If you don't have Node.js installed, head on over to the website at nodejs.org and download the latest installer for your platform. So first of all, let's make sure that we've got the Grunt CLI installed globally so that we can run Grunt commands. So we use the -g flag to specify that it should be installed globally. So now let's get our development area set up and ready to work through the code examples throughout this course. So let's create a new folder somewhere. I'm going to put mine in my user folder and we can just call it es2015. So there's a few files that we're going to place into this new directory, I've got these already prepared on my desktop. So into the root of our new folder we can put a simple web page called index.html. And we're also going to want to put the Grunt file and the .babelrc files. We'll come back to those files shortly. For now, let's just put them in the folder. And we should also create a new folder called js. And inside this folder, we're going to put a JavaScript file called ES6. So first of all, then, let's open up the ES6.js file that we've just dropped into the js folder, and we can add some basic boilerplate to this file. First of all, we'll make sure that our code is always running in strict mode with the use strict statement. And then we just want to add an immediately invoked function expression and as we're working through the code examples all of our test code will be added inside this. So let's go back to the command line now. And we want to move into the directory that we just created. And first of all let's install the Babel Grunt plugin. And we should also install Grunt. So let's head back to the editor now and we can update the grunt file. So this file needs to be a node module And let's also put this into strict mode. And we can now define the configuration for the Babel task. So we use the initConfig method to specify configuration for the Babel task. So let's have some options first of all. And the option that we want to add is to enable source maps. Next let's specify a target for the task. We can now configure the files that we're going to be using. So the output file for this task is going to be a file called es5.js, and that's going to go into a directory called dist. So that is the compiled code. And the input file is going to be the es6 JavaScript file that we added to the js directory. We use the files object format to specify the output file as the key and the input file as the value. Next we need to load the Grunt Babel task. This need to happen after the initConfig method. And lastly we can register the task so that we can run it. So we've added a task alias of es6, so that's what will run on the command line. And when we run that on the command line, that will run the babel task. Great, so that's Babel installed and configured, but before it will transform any code for us, we need to enable a presets or some plugins. We use the es2015 presets, which is a collection of plugins that each handle transforming a particular es6 feature. We'll need to install this preset first via MPM so let's head back to the command line. So now let's open up the .babelrc file that we added to the root of our project earlier, and we can enable the preset that we've just installed. And now lastly let's just update the index.html file, that we also added to the root of the project. And in here, let's just add a link to the complied es5.js file because we'll be using this page to view the outputs of our compiled code. This is all we need to do for now. We can now add some ES6 code to the es6.JS file in the js folder, run our Grunt task and the page will be able to use the compiled es5.js file in the disk folder. So now that we've got our development environment set up, we can move on to the next lesson and start looking at some of the new features of ES6. Thanks for watching.