Angular 2 - Ahead of-time Compilation

2. XHR
(browser)
Parser
(browser)
DOM
(browser)
Angular 1
(JavaScript)

3. Source
(browser)
Angular 2
(JavaScript)
Angular Compiler
Parser
AST
(Abstract Syntax Tree)
Template
// JIT
platformBrowserDynamic()
.bootstrapModule(AppModule);
SourceCode
 Bundle Size
 Slow bootstrap

4. Source
(browser)
Angular 2
(JavaScript)
Angular Compiler
Parser
AST
Template
SourceCode
//AOT
platformBrowser()
.bootstrapModuleFactory(AppModuleNgFactory);

5. Offline
compile
Tree-shake Minify

6. Offline
compile
Tree-shake Minify
class AppComponentFactory extends ComponentFactory<DemoApp> {
e0, e1, e2, lastName;
constructor(private renderer:Renderer, private context: App) {
e0 = renderer.createElement(null, 'div');
e1 = renderer.createText(e0, 'Hello ');
e2 = renderer.createText(e0, '');
}
detectChangesInternal() {
var name = this.context.name
if (name !== this.lastName) {
renderer.setText(e0, this.lastName = name);
}
}
}
<div>Hello {{name}}</div>
Template
 VM-friendly code
 No need for parser

7. Offline
compile
Tree-shake Minify

8. Offline
compile
Tree-shake Minify