Component-Based Architecture in AngularJS 1.x and ES6 Using ES6/ES2015
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Using ES6/ES2015" Lesson
>> 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: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: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: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]