Angular 2 Offline Compiler

ng-sake #3 http://ng-sake.connpass.com/event/30746/

Transcript

1. Angular 2
   Offline
   Compiler
   @shuheikagawa
   

   View Slide

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

   View Slide

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

   View Slide

4. Compiler in
   JavaScript?
   

   View Slide

5. Template -> JS
   

   View Slide

6. Angular 1
   Runtime compilation was
   the bottleneck
   

   View Slide

7. Angular 2
   Compiles only once at the
   boot time
   

   View Slide

8. Can we do
   better?
   

   View Slide

9. Offline Compiler
   → Faster bootstrap
   → Smaller lib
   

   View Slide

10. Let's try!
    

    View Slide

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

    View Slide

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

    View Slide

13. main.ts
    

    View Slide

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

    View Slide

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

    View Slide

16. Doesn't Work
    

    View Slide

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

    View Slide

18. View Slide

19. What's .ngfactory.ts?
    

    View Slide

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

    View Slide

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

    View Slide

22. createInternal
    

    View Slide

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

    View Slide

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

    View Slide

25. detectChangesInternal
    

    View Slide

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

    View Slide

27. detectChangesInternal
    → detect changes
    → update DOMs
    → call child views
    

    View Slide

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

    View Slide

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
    

    View Slide

30. Stay tuned!
    

    View Slide

31. fin
    

    View Slide