Angular 2 Offline Compiler

Transcript

1. 1.

   Angular 2 Offline Compiler @shuheikagawa

2. 2.

   → GitHub/Qiita @shuhei → Twitter @shuheikagawa → Software Engineer @

   M3, Inc
3. 3.

   Angular 2 & Me TypeScript-ish type annotations and decorators in

   ES2015+ → babel-angular2-app → babel-preset-angular2 → babel-plugin-angular2-annotations
4. 4.

   Compiler in JavaScript?

5. 5.

   Template -> JS

6. 6.

   Angular 1 Runtime compilation was the bottleneck

7. 7.

   Angular 2 Compiles only once at the boot time

8. 8.

   Can we do better?

9. 9.

   Offline Compiler → Faster bootstrap → Smaller lib

10. 10.

    Let's try!

11. 11.

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

12. 12.

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

13. 13.

    main.ts

14. 14.

    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);
15. 15.

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

16. 16.

    Doesn't Work

17. 17.

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

    x router
18. 18.

    None
19. 19.

    What's .ngfactory.ts?

20. 20.

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

    { name: string = 'ng2'; }
21. 21.

    app.ngfactory.ts class _View_App0 extends DebugAppView<any> { createInternal() {} detectsChangeInternal() {}

    } function viewFactory_App0(...): AppView<any> {} class _View_App_Host0 extends DebugAppView<any> { createInternal() {} } function viewFactory_App_Host0(...): AppView<any> {} export const AppNgFactory: ComponentFactory<App> = new ComponentFactory<App>('app', viewFactory_App_Host0, App);
22. 22.

    createInternal

23. 23.

    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; }
24. 24.

    createInternal → create elements, texts and directives → set up

    listeners → set up subscriptions → call child views
25. 25.

    detectChangesInternal

26. 26.

    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); }
27. 27.

    detectChangesInternal → detect changes → update DOMs → call child

    views
28. 28.

    Benefits → Shorter bootstrap time → JS size: compiler and

    platform-browser-dynamic vs *.ngfactory.ts → Type-check your templates!
29. 29.

    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
30. 30.

    Stay tuned!

31. 31.

    fin