ng-japan meetup evolution of Angular Compiler

ng-japan meetup evolution of Angular Compiler

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

October 10, 2017
Tweet

Transcript

  1. 6.

    Think about Component w ͜ͷ$PNQPOFOUͷϨϯμϦϯάɺͲ͏࣮૷͠·͔͢ʁ @Component({ selector: 'app', template: `

    <span>{{count}}</span> <button (click)="countUp()">count up</button> `, }) export class AppComponent { count = 0; countUp() { this.count += 1; } }
  2. 7.

    Naive implementation Ҋ $PNQPOFOUͷߋ৽ͷ౓ʹɺ5FNQMBUFͷϓϨʔεϗϧ μΛஔ׵ͯ͠JOOFS)5.-΁ function renderView(hostElement, component) { hostElement.innerHTML

    = Component.template.replace('{{count}}', component.count); hostElement.querySelector('button') .addEventLister('click', () => component.countUp()); }
  3. 9.

    Little better way w ΋͏গ͠ਅ໘໨ʹॻ͍ͯΈΑ͏ function createView(hostElement, component) { //

    create <span></span> const sp = span = document.createElement('span'); hostElement.appendChild(sp); // create <button></button> const btnText = document.createTextNode('count up'); const btn = document.createElement('button'); btn.addEventLister('click', () => component.countUp()); btn.appendChild(btnText); hostElement.appendChild(btn); } function updateView(hostElement, component) { hostElement.children[0].textContet = component.count; }
  4. 13.

    What Angular Compiler does w ϑϨʔϜϫʔΫͷཉٻ w ։ൃऀ 5FNQMBUFΛ༻͍ͯ એݴతʹ7JFXΛ૊Έཱͯ

    Δ͜ͱ͕Ͱ͖Δ w ϒϥ΢β࠷খίετͰ%0.πϦʔ͕ߋ৽͞ΕΔ w ͜ΕΒཱ͕྆Ͱ͖Δͷ͸ɺ$PNQJMFS͕
 %0.Λૢ࡞͢Δؔ਺Λੜ੒ͯ͘͠Ε͍ͯΔ͔Β
  5. 14.

    What Angular Compiler does w 5FNQMBUFҎ֎ͷ$PNQJMFର৅ w $44 w "OJNBUJPO

    w %* QSPWJEFS *OKFDUBCMF  w .PEVMF JNQPSUTFYQPSUTEFDMBSBUJPOʜ  w 3PVUJOH
  6. 16.

    Using JiT Compilation import { enableProdMode } from '@angular/core'; import

    { platformBrowserDynamic } from '@angular/platform-browser- dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
  7. 17.

    Using AoT Compilation import { enableProdMode } from '@angular/core'; import

    { platformBrowser } from '@angular/platform-browser'; import { AppModuleNgFactory } from './app/app.module.ngfactory'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); $ ngc # create app.module.ngfactory
  8. 33.

    Transformation example var square = x ** 2; <variable-statement> <variable-declaration-list>

    <identifier escaped-text="square" /> <binary-expression> <identifier escaped-text="x" /> <asterisk-asterisk-token /> <first-literal-token text="2" /> </binary-expression> </variable-declaration-list> </variable-statement>
  9. 34.

    Transformation example <variable-statement> <variable-declaration-list> <identifier escaped-text="square" /> <call-expression> <property-access-expression> <identifier

    escaped-text="Math" /> <identifier escaped-text="pow" /> </property-access-expression> <identifier escaped-text="x" /> <first-literal-token text="2" /> </call-expression> </variable-declaration-list> </variable-statement> var square = Math.pow(x, 2);
  10. 42.
  11. 44.

    @angular/bazel package(default_visibility = ["//visibility:public"]) load("@angular//:index.bzl", "ng_module") load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary") sass_binary( name

    = "hello-world-styles", src = "hello-world.component.scss", deps = [ "//src/shared:colors", "//src/shared:fonts", ], ) ng_module( name = "hello-world", srcs = glob(["*.ts"]), deps = ["//src/lib"], assets = [":hello-world-styles"], tsconfig = "//src:tsconfig.json", )
  12. 45.

    How to use Bazel w #B[FMΛૉͰ࢖͏ͷ͸໘౗ʜ w +BWB #B[FMͷηοτΞοϓ w

    Ϗϧυఆٛ༻ͷݴޠ4LZMBSL 1ZUIPO Λ֮͑Δ w ݸผͷ3VMF BOHVMBS TBTT FUDʜ ͷ࢖͍ํΛ֮͑Δ
  13. 47.