Slide 1

Slide 1 text

Angular 2 Offline Compiler @shuheikagawa

Slide 2

Slide 2 text

→ GitHub/Qiita @shuhei → Twitter @shuheikagawa → Software Engineer @ M3, Inc

Slide 3

Slide 3 text

Angular 2 & Me TypeScript-ish type annotations and decorators in ES2015+ → babel-angular2-app → babel-preset-angular2 → babel-plugin-angular2-annotations

Slide 4

Slide 4 text

Compiler in JavaScript?

Slide 5

Slide 5 text

Template -> JS

Slide 6

Slide 6 text

Angular 1 Runtime compilation was the bottleneck

Slide 7

Slide 7 text

Angular 2 Compiles only once at the boot time

Slide 8

Slide 8 text

Can we do better?

Slide 9

Slide 9 text

Offline Compiler → Faster bootstrap → Smaller lib

Slide 10

Slide 10 text

Let's try!

Slide 11

Slide 11 text

$ npm i -D @angular/compiler-cli $ ./node_modules/.bin/ngc -p tsconfig.json

Slide 12

Slide 12 text

$ ls -l src app.css app.css.shim.ts app.ngfactory.ts app.ts main.ts

Slide 13

Slide 13 text

main.ts

Slide 14

Slide 14 text

import { coreBootstrap, ReflectiveInjector } from '@angular/core'; import { browserPlatform, BROWSER_APP_STATIC_PROVIDERS } from '@angular/platform-browser'; import {AppNgFactory} from './app.ngfactory'; const appInjector = ReflectiveInjector.resolveAndCreate( BROWSER_APP_STATIC_PROVIDERS, browserPlatform().injector ); coreBootstrap(appInjector, AppNgFactory);

Slide 15

Slide 15 text

./node_modules/.bin/tsc -p tsconfig.json

Slide 16

Slide 16 text

Doesn't Work

Slide 17

Slide 17 text

→ o compiler_cli/integrationtest → x angular2-seed → x router-deprecated → x router

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

What's .ngfactory.ts?

Slide 20

Slide 20 text

app.ts @Component({ selector: 'app', template: 'hello {{name}}' }) class App { name: string = 'ng2'; }

Slide 21

Slide 21 text

app.ngfactory.ts class _View_App0 extends DebugAppView { createInternal() {} detectsChangeInternal() {} } function viewFactory_App0(...): AppView {} class _View_App_Host0 extends DebugAppView { createInternal() {} } function viewFactory_App_Host0(...): AppView {} export const AppNgFactory: ComponentFactory = new ComponentFactory('app', viewFactory_App_Host0, App);

Slide 22

Slide 22 text

createInternal

Slide 23

Slide 23 text

createInternal(rootSelector: string): AppElement { var parentRenderNode =this.renderer .createViewRoot(this.declarationAppElement.nativeElement); this._text_0 = this.renderer .createText(parentRenderNode,'',this.debug(0,0,0)); this._expr_0 = import3.uninitialized; this.init([],[this._text_0],[],[]); return null; }

Slide 24

Slide 24 text

createInternal → create elements, texts and directives → set up listeners → set up subscriptions → call child views

Slide 25

Slide 25 text

detectChangesInternal

Slide 26

Slide 26 text

detectChangesInternal(throwOnChange: boolean): void { this.detectContentChildrenChanges(throwOnChange); this.debug(0,0,0); var currVal_0: any = import4.interpolate(1,'Hello World ',this.context.user,''); if (import4.checkBinding(throwOnChange,this._expr_0,currVal_0)) { this.renderer.setText(this._text_0,currVal_0); this._expr_0 = currVal_0; } this.detectViewChildrenChanges(throwOnChange); }

Slide 27

Slide 27 text

detectChangesInternal → detect changes → update DOMs → call child views

Slide 28

Slide 28 text

Benefits → Shorter bootstrap time → JS size: compiler and platform-browser-dynamic vs *.ngfactory.ts → Type-check your templates!

Slide 29

Slide 29 text

Notes → Don't check in generated files → TypeScript 1.8: generate in src → TypeScript 1.9: use rootDirs → Expect a build system plugin instead of the CLI

Slide 30

Slide 30 text

Stay tuned!

Slide 31

Slide 31 text

fin