Build Web Apps with Angular 2 Module Loading & Webpack
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Module Loading & Webpack" Lesson
>> Scott Moss: So a little bit about me, my name is Scott Moss. This is my third course here with Mark and Frontend Masters. Very excited to be back, especially with Lukas cuz he's the homie. [LAUGH] We always just build stuff together. We've been working together for, it's been over a year now.
>> Lukas Ruebbelke: Yeah.
>> Scott Moss: Time flies.
>> Lukas Ruebbelke: We're still friends.
[00:00:41] That part that nobody wants to do, the part that's probably gonna give the most errors. But I promise you, it's not that bad.
>> Speaker 3: It's not that bad, it's all bad [LAUGH]. It's not that bad and all that.
>> Scott Moss: It's not that bad. All right, so we're going to talk about the tooling because with Angular 2.
[00:01:18] But just like a modern application even if using something like React or something. You're gonna need something like Module Loading obviously, because the browser doesn't support modules of any kind. And if you don't know why you need modules, let me know and I'll tell you why.
>> Speaker 4: [INAUDIBLE]
>> Scott Moss: [LAUGH]
>> Lukas Ruebbelke: Why do we need modules?
>> Scott Moss: Why do we need modules? Well, for encapsulation just like our components encapsulate logic that can be reused and shared an application. We can organize our application that way too, so now that it's exposed globally. We can share things and swap things around.
[00:01:51] And we get cool things like asynchronously loading parts of the application depending on routing. We get to share modules across different applications. It's pretty awesome, so modules are great. So definitely you should use some type of module system there's tons of them out there. Webpack, so Webpack is a bundler that creates the modules for us to use in the browser.
[00:02:16] There is many other ones for instance Angular, actually the Angular team recommends using JSPM. Which I believe actually is a better way than Webpack. But at the current time, Webpack just has better stuff, better plug-ins, better support. On he Webpack 2 is on the horizon, It's really awesome.
[00:02:36] So although, I think JSPM is better and eventually I think it will just be like to go to. As of right now I think Webpack is just a better choice to go with, so that's what I'm sticking with for now. But JSPM is awesome too, I highly recommend checking it out.
[00:02:48] Whereas JSPM is also a package manager and a bundler. Whereas Webpack is just a bundler, so it's like two different things. JSPM will like replace NPM for you and everything. It will do all that stuff, it's kind of crazy. But that's what the Angular team recommends so it's worth a look.
[00:03:05] ES6, ES5 and then with Angular 2. We got TypeScript and then typings. So we're getting into that stuff. Any question so far? No? Okay. Here's a quiz, what's different about this logo to an Angular 1 logo? Who knows? There's only two things different.
>> Lukas Ruebbelke: Material design, [SOUND].
>> Speaker 5: There's no JS.
>> Scott Moss: No, the version one didn't have JS on it.
>> Scott Moss: Anybody else?
>> Speaker 5: The white border around it?
>> Scott Moss: There was a white border, and what's the other one?
>> Speaker 6: Shadow.
>> Scott Moss: Yep, there's a shadow.
>> Speaker 6: [CROSSTALK] line in the middle of the angle or something.
>> Scott Moss: Yep, exactly. There's a shadow on the A, and a white border.
>> Speaker 6: Sorry.
>> Scott Moss: It's like the third or fourth different version. I just noticed it like five minutes ago, so I figured I'd ask. [LAUGH]
>> Speaker 4: [INAUDIBLE]
>> Scott Moss: Yeah, so like I said, there's all this stuff you gotta jog through or crawl through to get to Angular 2.
[00:04:05] Most of the stuff is optional like TypeScripts, you don't have to use it. ES6, optional, Babel, all that stuff is optional. Then if you take away all that stuff then really all you have is RxJS and Angular. And then even, you can kinda get away using Angular 2 without even using RxJS.
[00:04:20] Not recommended, but you can get away without using some of the stuff built into it. Again not recommended, at that point you might as well just use like Angular what? You might as well, there's no point. Are we wanna grow? We wanna learn hard stuff, Module Loading. So, module code is not required with Angular, like I said you could use ES5.
[00:04:44] And you can use your own IFE system, or whatever you want to do, you don't need modules. But it is totally recommended because that is just how the architecture is built. Everything is component based, so it makes sense to have your application module based to it just fits like a glove, totally do it.
[00:04:59] It can easily interact, it allows us to use specific parts of the library. So you know we don't have to load up all of these scrip tags everywhere and different paths and different place. No, we can just use the different modules. Hopefully the developer had made the module, made it in such a way that you can pick the parts that you want.
[00:05:15] Like the new version of Load Ash, you can load different files without loading an entire library. It's pretty awesome, obviously collisions with namespaces and stuff. We don't need script tags. And because modules are not supported, again, we need some type of module loader to load it. Webpack, it's definitely one of the most popular ones, it's definitely my favorite one.
[00:05:56] It's pretty awesome, right? I think it's dope, so this is why we're gonna use it because it's very, very useful. But again there are other ones out there notably JSPM. There is also Browser Pi and I mean you can probably just build your own with Gulp if you wanted to.
[00:06:14] Maybe mark out your own JS using some type of UMD stuff.