This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Exercise 1 Solution, continued" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Speaker 2: Asked if webpack handles any kind of lazy loading, for a front end assets and if not if you have a recommendation on tools to use for that.
>> Scott Moss: Webpack does. Webpack can handle lazy loading. You have to, it's not there by default. So you have to set it up, but yeah, it can handle lazy loading, it could also handle code splitting as well, which is really, really nice feature.
[00:00:29] Lower configuration, but it's heavily documented on the webpack website.
>> Speaker 2: Cool. Wants to know, what's sublime text them you're using for your colors?
>> Scott Moss: So for the colors I'm using, what am I using? Yeah, this is Seti for the theme and for the colors I'm using Glacier.
>> Speaker 2: Cool, and Abdulla wants to know, what's the reasoning behind using NPM to install angular is, versus something like Bower, he's been using Bower.
[00:01:01]
>> Scott Moss: Yeah, Bower is great. It's very great, it's not exactly the same as NPM. The reason we're using NPM to install angular and not Bower is because we're using, we're gonna be using ES2015 modules which using the webpack, compiles down the common JS modules. And because we can use common JS, which is node, we can just import, [COUGH] we are able to use Angular ES6 model pretty much.
[00:01:25] If we use Bowser, then what's going to happen is, angular is gonna be added as a global to the window, right. And we don't want that, we actually want it, we want the module. We wanna be able to reference it and encapsulate it, just like we would in node.
[00:01:39] So that's why we don't wanna use Bowser. But some people are starting to build ES6, like their client site code with ES6. So some newer stuff actually uses ES6, so you can get away with using that stuff and downloading, without NPM. But definitely not anguler. None of that stuff is built with ES6 or ES2015.
[00:02:03] So if you can use common JS, then you're guaranteed to be able to import it. But if you don't then you don't know. It can be a AMD module, it can be a global module. You have no idea what it's gonna be, right. But if it's NPM, it's guaranteed to come in JS.
[00:02:18] So we know that we can import it. Good question. Yep. So, yes so I was talking about the different stages. If you go, I don't know where it is on Babel. But Babel has a place on there that talks about like the different stages of features that comes out.
[00:02:36] Stage one is like, it's like next to bleeding, yet state zero is like bleeding edge. Somebody just came over this feature yesterday and we made it, type thing. Stage one is like, here are some proposals that some really smart people came up with and we implemented them. So we're gonna use stage one for some of the features.
[00:02:55] So that's how we pass in that option there. So that's why I pass in stage one.
>> Speaker 2: Hey, Scott.
>> Scott Moss: Yes?
>> Speaker 2: What stage does it end at for most stable?
>> Scott Moss: I think by default it uses stage two. But I think it goes up to stage three.
[00:03:08] I could be corrected. I'll find the page for it on Babel later, I can't dig around right now, but it tells you on here. It's like, this is where we.
>> Speaker 2: [INAUDIBLE] There it is.
>> Scott Moss: Let's check it out. This one? No. It's not this one. There's another page on here somewhere that says, yes this is it.
[00:03:32] Let's see, there it is, you're right, sorry. Yes, so, Strawman, that's hilarious. Yes, the reason stage one was just like proposal stuff. Stage two or above are enabled by default. So it goes all the way to stage four, which is everything that's done, that's mostly, some of it's probably in the browser or whatever.
[00:03:52] But we're gonna stage one, which is pretty good. Stage zero is crazy. You're a crazy person for using that. But some really good features in there like function binding and stuff. It's really awesome. There is in this stuff, decorators, async functions, rest spread, all that nice stuff. So this is another reason why I recommend Babel, cuz don't I think you can do a lot of the stuff in Tracer.
[00:04:14] Or if you can, it's not this easy.
>> Scott Moss: Cool, and then this next thing here is the, I think it should be excluded not excludes. So this tells webpack to hey, I want you to test everything that with this rejects, but not if it also has this rejects, all right.
[00:04:34] So don't test everything in old modules, otherwise will be sitting here forever as it tries to convert ES5 down to ES5. All right, cuz that's what's gonna happen. It's gonna go look at all the stuff you imported from node modules. And it's gonna run it through Babel, and Babel's like, I'll look at it, but it looks like ES5 to me already.
[00:04:51] So, and this is gonna take forever. And then it's gonna throw an error like, this took too long. So, just exclude all the stuff that you downloaded from the internet. Only run your code.
>> Scott Moss: Makes sense, yes?
>> Speaker 2: Scott, there was a clarification on the lazy loading question for webpack.
[00:05:09] Was asking specifically about angular one apps, do you have a recommendation on how to get around the kind of Global bootstrapping problem with lazy loading there? Is that out of scope for this exercise today?
>> Scott Moss: That that's a little out scope, we could probably get to at the end tomorrow.
[00:05:25]
>> Speaker 2: Okay.
>> Scott Moss: I one is a little more complicated, but there are ways around it.
>> Speaker 2: Okay.
>> Scott Moss: You gotta do some hacks, cool. All right so now, if we go look, let's just go look at what happens. We'll look at bundle.js. If you curious and you looked at bundle.js, you see all of this stuff, right?
[00:05:47] You got, this is what webpack creates. This is, if you know, if you ever use node or common JS, you can see that. Look, exports, module.exports. This is common JS. It's mimicking common JS. So this is how we're able to require and import things and stuff like that.
[00:06:03] So that's all webpack. And then, down here is our code, finally. So this is what it turned our code into. It was this, and then it turned it to that. So this is why I like Babel, cuz I mean, that looks like something that you would write. It looks like what a human would write.
[00:06:24] Right there. So that's what that turned into, and this is what's being ran on a browser.
>> Speaker 4: Any idea if it works twice?
>> Scott Moss: Where do you see it run twice?
>> Speaker 4: Just on the left and right angle.
>> Scott Moss: So this is the code that we wrote in ES2015 this is app.js, this is bundle.js.
[00:06:46] This is what webpack created. This is what the browser reads.
>> Speaker 4: So it's ES6, or ES2015, then ES5?
>> Scott Moss: Yep. Exactly, so this is our ES2015, and then bundle.js is our ES2000, or our ES5.
>> Scott Moss: This is what Babel did. Babel took it from that to this, using the webpack.