What is a Compiler?

A compiler is a computer program that transforms source code written in a programming language into another computer language [...] The most common reason for converting source code is to create an executable program.

Template Strings

What is JIT?

Just-in-time (JIT) compilation, also known as dynamic translation, is compilation done during execution of a program – at run time...

Components

JIT

Dynamic Compilation

OR

JIT drawbacks...

What is AOT?

Ahead-of-time (AOT) compilation is the act of compiling a high-level programming language, into a native machine code with the intention of executing the resulting binary file natively. AOT produces machine optimized code...

Components

AOT

Static Compilation

OR

In Angular...

Angular modules

@NgModule({
  imports: [
    BrowserModule, MdModule,
    HttpModule, RoutesModule...
  ],
  declarations: [
    HomeComponent, PersonComponent...
  ],
  providers: [ AwesomeService ],
  bootstrap: [ AppComponent ]
})

Angular in JIT mode

// The browser platform with a compiler
import { 
   platformBrowserDynamic 
} from '@angular/platform-browser-dynamic';


// The app module
import { AppModule } from './app.module';


// Compile (JIT) and launch the module
platformBrowserDynamic().bootstrapModule(
   AppModule
);

Angular in AOT mode

// The browser platform with a compiler
import { 
   platformBrowser 
} from '@angular/platform-browser';

// The generated app factory (AOT)
import { 
   AppModuleNgFactory
} from './app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(
   AppModuleNgFactory
);

Angular in AOT mode

$ npm install \
        @angular/compiler-cli \
        @angular/platform-server \
        @angular/compiler \
        typescript@next --save

$ ./node_modules/.bin/ngc -p tsconfig.aot.json

$ # generates app.module.ngfactory.ts
$ # generates app.component.ngfactory.ts
$ # generates app.component.css.shim.ts
$ # generates ...

Good News...

const { AotPlugin } = require('@ngtools/webpack');
const tsconfig = root('./src/tsconfig.browser.json');

module.exports = {
    //...
    plugins: [
        new AotPlugin({
            tsConfigPath: tsconfig
        })
    ]
}

Using webpack...

Access modifiers

// bad
@Component({template: `{{ foo }}`})
export class AppComponent {
  private foo: any;
}

// good
@Component({template: `{{ foo }}`})
export class AppComponent {
  public foo: any;
}

Error at /app.component.ngfactory.ts Property 'foobar' is private and only accessible within class 'AppComponent'.

Named exports

// bad
@Component({})
class AppComponent {}
export default AppComponent;

// good
@Component({})
export class AppComponent {}

can't find symbol undefined exported from module app.component.ts

Know/found others?

tweet them to me

@manekinekko

Resources

1. asm-js-aot-compilation-and-startup-performance/
2. http://www.cs.columbia.edu/~aho/cs6998/Lectures/14-09-22_Croce_JIT.pdf
3. blog.mgechev.com/2016/07/21/even-smaller-angular2-applications-closure-tree-shaking/
4. blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/
5. angular.io/docs/ts/latest/guide/ngmodule.html
6. medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80
7. github.com/webpack/webpack/tree/master/examples/harmony-unused
8. https://www.youtube.com/watch?v=kW9cJsvcsGo