This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Using ES6/ES2015" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

Scott gives a quick overview of the technology he’ll be using throughout this course. The ES2015 (ES6) code will be transpiled with Babel. Scott will be using Webpack and Gulp for automation.

Get Unlimited Access Now

Transcript from the "Using ES6/ES2015" Lesson

>> [MUSIC]

>> Scott Moss: How and why ES6 2015? So ES6 itself is feature complete as of maybe a month, month and a half ago. So they're not adding any more features or anything to the current set of ES6. So what they did was, first, the committee was like, well, this is great, and we still have all these proposals coming in.

[00:00:29] What we want to do is we want to continue this process every year. So I don't know how long it took for ES6 to come out, years and years. So now they're like, well, this took too long. We want the stuff to come out every year. So it makes sense for them to change the name from ES6 to ES2015 as the release of like all the proposals and features that made this cut this year, you know ES2015.

[00:00:51] But there continues to be an influx of more proposals and more features that are being added. And they will be released in other versions, ES2016, ES2017, etc., or we can use them today, as you'll soon find out. So there are tons of helpful new features that have been added.

[00:01:11] Some are entirely new concepts that I haven't seen before in any programming language. Sure they exist somewhere, I just haven't come across them. And some are just standard stuff you see in other languages that they adopted, even some from CoffeeScript, they were just like, well, they got a lot of inspiration from CoffeeScript.

[00:01:27] So if you like CoffeeScript you'll kind of feel familiar with some of the stuff here, cuz they definitely took a lot of inspiration from there. But with all that said, all those features definitely made developing a little bit more less hard in JavaScript and, in my opinion a lot more fun.

[00:01:43] Like I was kinda getting bored with JavaScript, I was like, yeah this sucks. All this cool stuff is coming out, there's other languages. And then, ES2015 is like, now you can do this and I am like all right, all right, this is pretty cool. So it kind of made it a little more fun for me to write some JavaScript.

[00:02:02] However, all that new stuff we just talked about isn't fully implemented in all the browsers, even the latest ones. So they're being released feature by feature into the browsers I think Microsoft Edge is the leading browser right now that has the most ES2015. It's crazy, right, like Microsoft?

[00:02:19] Yeah I know, they're doing better than all of them. So they're really doing a good job with that. Chrome is pretty good, Safari, not too sure. I don't think they're doing as well as Edge and Chrome, but they're getting there, so they're starting to release their stuff out.

[00:02:33] I mean, you can open up the console right now and you can see some of the stuff that's already in there. But with that being said, because it's not available in the browsers, we can't just run ES2015 right in a browser. Some things may work, some things might not work.

[00:02:49] But, I can guarantee your application just won't run, or as soon as it sees a syntax error or something, it's just going to crash. So, we have to use like a transpiler, very much like CoffeeScript. In fact, it's the same thing as CoffeeScript. So there are two transpilers that have emerged as like the go tos for compiling ES2015, and they are Babel and Traceur.

[00:03:12] Babel is this community one, is really awesome, Traceur's built by Google. I think it was there first, Babel used to be called 6 to 5, so if you've seen that before, that's what that is. They just changed the names because they realized that it's not just about ES2016 or it's like a whole another thing.

[00:03:26] So these are the two, there are more but these are like the two that the community is backing and following. I recommend Babel, and that's the one we're going to be using. The reason is, the compiled JavaScript that it spits out is like way closer to the original source code.

[00:03:46] It's not exactly like a human may have written it, but it's a lot closer than Traceur, if you look at what Traceur spits out, it's just like [LAUGH] what is that? Like, no, no, no, way a person would ever write that. So and Traceur requires a runtime whereas Babel doesn't.

[00:04:05] There's no runtime and you can just like pick and choose different polyfills as you please, if you want to. So it's really, really legit. So we have a transpiler, that's going to be our tool for compiling ES5, or ES2015 down to ES5. So we can work in environments like the browser or Node or whatever you're programming on, a TV or smart watch.

[00:04:27] So the transpiler's going to do the work of the conversion, but we're all lazy and we don't want to do that manually every time, right? So we need some type of build systems inside the build tool. So, I mean, I can list every single build tool in every system out there and we'll be talking for days.

[00:04:41] So I'm just going to talk about the ones that I think that are the most popular ones for this ES2015 process, and the ones that have the best support. And those three are Webpack, JSPM, which stands for JavaScript Package Manager. This is the one Angular 2 is using and they're going to continue to use.

[00:05:01] And it's like, it really does follow the ES2015 spec, and then there's Gulp which is Gulp, Gulp is Gulp, right, it's awesome. What we're gonna be using is a combination of Webpack and Gulp. Although JSPM is the recommended one, and it's the one Angular 2 uses, we're not gonna use it toda, mainly because the configuration is a little difficult.

[00:05:24] And the plugin support isn't as robust as Webpack is right now because JSPM is a little newer. So for that reason we'll be using Webpack, but in the future you'll probably be using JSPM. But JSPM itself is like, it's like a course on itself to be honest. It's just ridiculously robust.

>> Speaker 2: And we do have a course on ES6, ES2015 or whatever, it's by Aaron Frost.
>> Scott Moss: That's right Aaron Frost, I took it, I should know Aaron Frost.
>> Speaker 3: Are we going to use JSPM by itself, or we going to use that with Gulp or where does that fit in?

>> Scott Moss: So Webpack and JSPM do not need Gulp. We're gonna use it together and you'll see why we use it together but neither those two build systems need Gulp. So we'll be using Webpack and Gulp together with JSPM and if you were to use it, you don't need Gulp.

[00:06:11] Its job is gonna be just transpiling and giving you like the actual module features that ES6 proposed, but Gulp will do other things that JSPM won't. Let's say you need a task for your CI, or some documentation stuff. JSPM won't do that, all right? It's only going to do that thing is like compiling your code, right?

[00:06:30] Yeah, so I still use Gulp for things like that.
>> Speaker 3: Got you.
>> Scott Moss: Creating a server, running tests, stuff like that. So you don't need Gulp for any of this stuff. But Webpack and JSPM are strictly for like modifying your source code or transpiling and stuff and then beyond that you need something else.

[00:06:45] Yeah I think Angular 2 is using Broccoli for that. Yeah Broccoli, that's another thing, so, never had Broccoli, go check it out. [LAUGH]