Understanding the Angular Compile Cycle

Compiling JavaScript for fun and profit

Alex Miller @amahopa

Agenda

  • Compilers & Lies
  • Angular Compilation
  • Fun & Profit

What does a compiler do?

It compiles.

What is compilation?

¯\_(ツ)_/¯

lets figure it out

( means compilation )

Def 1: Code => => Running Application*

*This is a lie

C++

C++ => => Native Code => Asked to Run => Running Application

Ahead of time compilation

Def 1: Code => => Running Application

Def 2: Code => => Runnable Code*

*text

Def 1: Code => => Running Application

Def 2: Code => => Runnable Code*

*text

Def 1: Code => => Running Application

Def 2: Code => => Runnable Code*

*This is still a lie

C#/Java

C#/Java => => Byte Code => Asked to Run => => Native Code => Running Application

Ahead of time compilation & Just in Time Compilation

Def 1: Code => => Running Application

Def 2: Code => => Runnable Code

Def 3:

*This is still a lie

Def 1: Code => => Running Application

Def 2: Code => => Runnable Code

Def 3: Code => => Code Closer to Execution *

*Spacing

Def 1: Code => => Running Application

Def 2: Code => => Runnable Code

Def 3: Code => => Code Closer to Execution *

*Just kidding

How do you generate code from code?

Abstract Syntax Trees

Parse Code => Create AST => Generate Code

astexplorer.net

TypeScript Input


/** 
 * Documentation for C 
 */
class C { 
    /** 
     * constructor documentation
     * @param a my parameter documentation
     * @param b another parameter documentation
     */
    constructor(a: string, b: C) { }
}

Source: TypeScript Compiler API Wiki

AST output


[
    {
        "name": "C",
        "documentation": "Documentation for C ",
        "type": "typeof C",
        "constructors": [
            {
                "parameters": [
                    {
                        "name": "a",
                        "documentation": "my parameter documentation",
                        "type": "string"
                    },
                    {
                        "name": "b",
                        "documentation": "another parameter documentation",
                        "type": "C"
                    }
                ],
                "returnType": "C",
                "documentation": "constructor documentation"
            }
        ]
    }
]

Source: TypeScript Compiler API Wiki

Angular Compilation

What gets compiled?

TypeScript => TS/JS

Templates (HTML) => TS/JS

JIT Compilation

  1. TypeScript => JavaScript
  2. Transfer Application JS, Templates, Angular & Compiler to Client
  3. Bootstrap Application
  4. Parse Classes & Templates
  5. Generate Code
  6. Render Application

JIT Advantages

  • Out of the box
  • Faster for single compile cycle

Disadvantages

  • Must Transfer Compiler to Client
  • Compilation delay before render
  • Won't run in all environments

Generating code in the browser

String Concatination + Eval

Ahead of Time Compilation

AOT Compilation

  1. Parse Classes & Templates
  2. Generate Code (TypeScript)
  3. TypeScript => JavaScript
  4. Transfer Application JS & Angular to Client
  5. Bootstrap Application
  6. Render Application

AOT

  • Advantages

    • Faster render times
    • Throws template errors early
    • Type checking in templates

  • Disadvantages

    • 3rd party modules must include TypeScript or metadata
    • Code does not execute before generation
    • Generated templates larger than html. (Use lazy loading)

Demo Benchmarks

Demo Compiled Template

Fun & Profit

Why do we even need to compile?

There's another compiler Angular is optimizing for...

JavaScript => Browser => V8 => Native Code => Application

Angular Optimizes for what the V8 engine's JIT compiler does best

Write TypeScript that is nice for humans

Compile to JavaScript that is nice for browsers

Compile to Native Code that is nice for processors

Profit.

Using AOT

AOT uses the NGC (Angular Compiler)

NGC compiles TypeScript to TypeScript, ES2015, ES5

With AOT it produces TypeScript

Option 1: Use NGC Directly

  • Add tsconfig-aot.json for AOT
  • index.html for AOT
  • Bootstrap using in main bootstrapModuleFactory
  • Add Rollup for tree shaking

Option 2: Leverage a Library

Angular Seed -> serve.prod.exp

Angular CLI -> ng serve -prod --aot

Review

  • Compilation in General
  • Compilation Cycle in Angular
  • How to use AOT

References

Want to explore a topic?

Give a talk!

The End