Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 Offline Compiler

Angular 2 Offline Compiler

Shuhei Kagawa

May 20, 2016
Tweet

More Decks by Shuhei Kagawa

Other Decks in Programming

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