This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "AOT Support" Lesson
[00:00:00]
>> Lukas Ruebbelke: So, AOT is ahead of time compilation. So right now, we are using just in time compilation. So, what happens is Angular is we're making changes to our application. Angular is essentially going through and kind of recompiling templates, redrawing everything. And as things change, it's compiling this kind of on the fly.
[00:00:26]
>> Lukas Ruebbelke: So what AOT is, is we are going to take, doing some more live coding.
>> Lukas Ruebbelke: This is AOT compilation. So, instead of having the compiler baked into the project when you ship it. So with Angular 1, doing actually dynamic compilation was really, really easy. You had the dollar compile service.
[00:00:52] You would say, take this HTML. Take this scope object and compile them together completely on the fly. In Angular two, because of the way compilation happens, because we're targeting multiple devices. So for instance, you can do server side Angular. Right now, we're targeting the browser, but electron or these different things is the complication step happens closer to the front like you have to know when you fire this up, what you're actually targeting.
[00:01:19] We've taken this a step further with ahead of time compilation. And what this does is you compile a specific version of the application that's highly optimized, that does not ship with the compiler is that Angular can infer that it knows enough about the application that anything that happens, it can handle it without the compiler.
[00:01:43] So what this means is that whereas you had a large application, cuz it had to accommodate the compiler by doing ahead of time compilation. So essentially, think of it as kind of like you're doing a static build. You're pulling out the compiler, now your application just goes [SOUND] and it's very fast and it's very light.
[00:02:03] Now, when you start to get into kind of like dynamic things. And so, they're still trying to figure out how to handle lazy loaded routes with ahead of time compilation. So like that's kind of the trade-off is pretty much once you do ahead of time compilation, that's it.
[00:02:17] For most cases, that's completely fine. The idea is that you get a much smaller payload, fewer async requests and much faster rendering, because Angular already knows it's almost like I don't want to say clairvoyance, but it knows whats going to happen. So the nature of Angular itself is because it's a tree graph, it already knows it can make some inferences about how events are gonna flow, how data is going to flow.
[00:02:46] But then by taking it a step further and this is where anti-module came in is by using anti-module, we can tell the Angular application everything it needs to know to enable this. So here, we just compile it. So you need to actually install a specific compiler for this, then you essentially generate a manifest.
[00:03:12] And so you can read all about this on the Internet, but this is kind of the high-level view. Install a specific compiler for it. You generate, basically, a manifest or a file that tells it how it's gonna happen and then you compile it. And in doing so, you also need to, instead of bootstrapping to your app module, you need to bootstrap to the app module factory.
[00:03:38] So you're actually stepping it even just a step before, essentially. So what you have is you have the module, but then you have, where does the module come from? It comes from a factory. And so what you're basically doing is you're moving a compilation step up just a step forward.
[00:03:54] So now you bootstrap to the app module factory which will then be responsible for generating the module, if that makes sense. So we're just kinda moving things up just a step, so that we can get rid of the compiler entirely. One of the upsides of this and this is something I've not tried, but everything that I've heard has been pretty phenomenal is that this also allows us to do tree shaking.
[00:04:18] And so if you have a large application and you're not using something, well, then you can just shake it out. And so now you can highly optimize not only not ship the compiler, but not ship parts of the code you're just not using and that's where tree shaking comes in, yes?
[00:04:32]
>> Speaker 2: Havy is asking, does AOT compensate for the Aangular 2 internal HTML parser? Because Angular 2 templates are case sensitive and browser's HTML parser should not be case sensitive.
>> Lukas Ruebbelke: I mean, it'll still be handled like an Angular application. But basically, the raw JavaScript for your application has been generated for it.
[00:05:01] And so I would wager $100 that if it doesn't work in a regular Angular application, then it's not going to work after AOT. And so all of the JavaScript is being generated, like all your Angular JavaScript's being generated, it's just Angular knows what's going to happen and it can preemptively say, this is what we need and this is how we handle it.
[00:05:25] So essentially, it's a very specific custom build based on your application.
>> Lukas Ruebbelke: And yeah, so that's my last slide. It somehow ended there. All right, workshop's over everybody.
>> Lukas Ruebbelke: So, AOT, any questions? Make sense? You're just compiling ahead of time, so ahead of time compilation and you just get the super optimized very specific build to your application.
[00:06:01] Now if you're shipping an application for money or that involves people or you care about a user experience, I highly recommend looking into this. So, this goes back to my things I love about Angular. This is one of the radical things that I think is so far beyond like anything that any framework is doing right now.
[00:06:23] That is just gonna make it like it's already fast, with this it's just crazy fast. So this gets a big plus one on the things that are awesome about Angular 2 or as I call it, the shiny parts.