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

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. "OHVMBS$PNQJMFSͷਐԽ ng-japan meetup 2017 Autumn by @Quramy

  2. About me

  3. Today’s theme:

  4. Today’s theme: Compile w "OHVMBSͷ࿩୊ͷதͰ΋ϚχΞοΫͳ෦ྨ w ஌Βͳͯ͘΋ࠔΒͳ͍ w WͷςʔϚͷҰͭ ޙड़

  5. $PNQJMBUJPOJO"OHVMBS

  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; } }
  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()); }
  8. Naive implementation w ͜ͷํ๏͸৭ʑͳ͕ܽؕ͋Δɿ wඳըͷ౓ʹશཁૉͷ࡞Γସ͕͑ൃੜ͍ͯ͠Δ wඳըͷ౓ʹΠϕϯτϋϯυϦϯάΛొ࿥͠௚͍ͯ͠Δ w ͙͢ʹ%0.ͷੑೳྼԽΛҾ͖ىͯ͜͠͠·͏

  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; }
  10. Little better way w %0.ૢ࡞Λ࠷খݶʹ͢Δ w %0.ཁૉͷ࡞੒͸࠷ॳͷҰճ͚ͩ w $PNQPOFOUͷঢ়ଶߋ৽࣌ มߋݕ஌࣮ߦ࣌

    ͸ɺผ్ VQEBUF༻ͷؔ਺Λ࣮ߦ͢Δ
  11. That’s all w "OHVMBS$PNQJMFS͕΍͍ͬͯΔ͜ͱ΋Ұॹ w 5FNQMBUFΛQBSTFͯ͠ɺEFpOF7JFX΍VQEBUF7JFX૬ ౰Λ࡞ͬͯ͘ΕΔ w ͜ΕΒͷؔ਺Λ·ͱΊͨ΋ͷ͕$PNQPOFOU'BDUPSZ

  12. ngfactory in real world w ϒϥ΢β͔Β֬ೝ͢Δ͜ͱ΋ ҰԠ Ͱ͖Δ

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

    Δ͜ͱ͕Ͱ͖Δ w ϒϥ΢β࠷খίετͰ%0.πϦʔ͕ߋ৽͞ΕΔ w ͜ΕΒཱ͕྆Ͱ͖Δͷ͸ɺ$PNQJMFS͕
 %0.Λૢ࡞͢Δؔ਺Λੜ੒ͯ͘͠Ε͍ͯΔ͔Β
  14. What Angular Compiler does w 5FNQMBUFҎ֎ͷ$PNQJMFର৅ w $44 w "OJNBUJPO

    w %* QSPWJEFS *OKFDUBCMF  w .PEVMF JNQPSUTFYQPSUTEFDMBSBUJPOʜ  w 3PVUJOH
  15. When Compiler works w ίϯύΠϥͷಈ࡞λΠϛϯά w +J5 +VTUJO5JNF 
 ΞϓϦ͕࣮ߦ͞ΕΔλΠϛϯάͰղੳ

    w "P5 "IFBEPG5JNF 
 Ϗϧυ࣌ʹιʔείʔυΛ੩తʹղੳ
  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);
  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
  18. "P5WT+J5

  19. JiT Compilation’s problem w ϒϥ΢βͰಈ࡞ͤ͞Δ·Ͱ$PNQJMFΤϥʔʹؾ෇͚ͳ͍ w MBOHVBHFTFSWJDF ΤσΟλͰܰݮՄೳ w $PNQJMFSͷηΩϡϦςΟϦεΫ

    w 944Λಥ͔Εͨ৔߹ɺ೚ҙͷ$PNQPOFOUΛಈతʹ࡞ ੒͞ΕΔϦεΫʹ
  20. AoT Compilation’s problem w Ϗϧυʹ͕͔͔࣌ؒΔ w $PNQPOFOU਺ʹ΋ΑΔ͕ɺ਺ඵΦʔμʔΛཁ͢Δ ͜ͱ΋ w KTͷαΠζ͕ංେԽ͕ͪ͠

    w 7JFX&OHJOF dW ಋೖͰɺWYͱൺֱ͢Δͱ ఔ౓ʹαΠζ͕࡟ݮ͞Ε͍ͯΔ
  21. ͍ͭ·Ͱ"P5WT+J5ͳͷ͔

  22. V5 theme https://docs.google.com/presentation/d/ 17XEE7dNq2e8CAgC68vM7Hn_1hR5jwnPoBiRmqzAF9DQ/preview

  23. V5 and Compilation w 4JNQMJDJUZͦ΋ͦ΋+J5ͱ"P5͕ࠞࡏ͍ͯ͠Δ࣌఺Ͱγ ϯϓϧͰ͸ͳ͍ w +J5Λ࢖͏ཧ༝͸"P5͕஗͍͕ނ w Α͠ɺ"P5Λ଎͘͠Α͏ʂ

  24. "P5CZEFGBVMUʹ޲͚ͯ

  25. 5SBOTGPSNFST#BTFE $PNQJMFS"1*

  26. Transformer Based Compiler w ҰݴͰ͍͏ͱʮKTग़ྗํ๏ͷվྑʯ w ਎΋֖΋ͳ͍ݴ͍ํΛ͢Δͱɺʮ5ZQF4DSJQUຐվ଄ʯ

  27. compiler-cli(<= 4.2.x) w 5SBOTGPSNFSಋೖҎલͷDPNQJMFSDMJ

  28. compiler-cli(>= 4.3.0) w 5SBOTGPSNFSಋೖҎ߱ͷDPNQJMFSDMJ
 !BOHVMBSDMJW

  29. Waste of intermediate files w ैདྷͷDPNQJMFSDMJͰ͸தؒϑΝΠϧͱͯ͠ɺ
 OHGBDUPSZUT౳Λੜ੒͠ɺͦͷޙʹKTΛੜ੒͍ͯͨ͠ w தؒϑΝΠϧͷॻ͖ࠐΈ΍ɺதؒϑΝΠϧͷQBSTFίε τ͕༨ܭʹ͔͔ͬͯ͠·͏

  30. Why generate dot ts ? w 5ZQF4DSJQUར༻্ͷ੍໿ w UTKTͷ%PXO5SBOTQJMFॲཧΛ֦ு͢Δ࢓૊Έ͸ଘ ࡏ͍ͯ͠ͳ͔ͬͨ

  31. Custom Transformers w 5ZQF4DSJQUWͰ͸ɺΦϦδφϧͷτϥϯεύΠϧ ॲཧ 5SBOTGPSNFS Λ௥ՃͰ͖ΔΑ͏ʹͳͬͨ

  32. What’s Transformer? w "45 ந৅ߏจ໦ Λผͷ"45΁ม׵͢Δػߏ w #BCFMʹ͓͚ΔQMVHJOͷΑ͏ͳ΋ͷ w 5ZQF4DSJQUͷ಺෦Ͱ΋τϥϯεύΠϧॲཧ͸ͦΕͧΕͷ

    5SBOTGPSNFSͱ࣮ͯ͠૷͞Ε͍ͯΔ w FH&4༻ &4༻ &4༻ 54ຊମ༻
  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>
  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);
  35. Compiler and Transformers w ʮOHGBDUPSZΛੜ੒͢Δ5SBOTGPSNFSʯΛDPNQJMFSDMJ ͕༻ҙ͢Δ͜ͱͰɺ"P5$PNQJMF͕ߴ଎Խ

  36. "OHVMBS#B[FM3VMF

  37. What’s Bazel ?

  38. What’s Bazel ? w (PPHMF͕࡞੒ɾެ։͍ͯ͠ΔϏϧυπʔϧ
 #MB[Fͱ͍͏(PPHMFશࣾͰ࢖ΘΕ͍ͯΔπʔϧ͕ϕʔε w ೥ʹWϦϦʔε༧ఆʢݱঢ়͸CFUBʣ w ༷ʑͳݴޠͷQSKʹରԠ


    $$ HP +BWB 0CKFDUJWF$ 4DBMB 3VTU FUD
  39. How to make compilation faster w #B[FM͸ɺϏϧυର৅Λࡉ෼Խ্ͨ͠Ͱɺର৅ؒͷґଘ ؔ܎Λར༻ͯ͠ϏϧυΛߴ଎Խ͍ͯ͘͠

  40. Parallel Compilation w ಠཱ͍ͯ͠ΔՕॴ͸ฒߦͯ͠$PNQJMFΛ࣮ߦ

  41. Incremental Compilation w มߋ͕͋ͬͨՕॴͷΈ$PNQJMFΛ࣮ߦ

  42. Bazel and dependency graph w 1BDLBHFؒͷґଘؔ܎Λఆٛ͢Δ͜ͱͰ w ޓ͍ʹಠཱͨ͠1BDLBHFΛฒߦʹCVJMEͰ͖Δ w CVJMEࡁΈͷ1BDLBHFͷSFCVJMEΛεΩοϓͰ͖Δ

    w ʮࡉ͔͘Ϗϧυʯ͢Δ͜ͱͰແବͳ$PNQJMFΛආ͚Δ w طଘͷϏϧυπʔϧͰ͍͏ͱɺNBLF΍HVMQʹ͍ۙ
  43. Bazel and Angular w !BOHVMBSCB[FM w CFUB͔ΒϦϦʔε͞Ε͍ͯΔ w "OHVMBSͷNPEVMFΛ#B[FMͰϏϧυ͢ΔͨΊͷϧʔϧ ηοτ

    w ಺෦తʹOHD DPNQJMFSDMJ Λ࣮ߦ͍ͯ͠Δ
  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", )
  45. How to use Bazel w #B[FMΛૉͰ࢖͏ͷ͸໘౗ʜ w +BWB #B[FMͷηοτΞοϓ w

    Ϗϧυఆٛ༻ͷݴޠ4LZMBSL 1ZUIPO Λ֮͑Δ w ݸผͷ3VMF BOHVMBS TBTT FUDʜ ͷ࢖͍ํΛ֮͑Δ
  46. @angular/cli w !BOHVMBSDMJ͕ରԠ͢ΔͷΛ଴ͭͷ͕٢
 CB[FMCSBODI্Ͱ࡞ۀ͞Ε͍ͯΔ໛༷  w ରԠ͞Εͨ৔߹ɺCVJMEʹ+7.͕ඞཁ
 IUUQTHJUIVCDPNBMFYFBHMFOHDPOUBJOFSͷΑ͏ͳ %PDLFS*NBHFΛ$*Ͱར༻͢Δͱྑͦ͞͏

  47. 4VNNBSZ

  48. Summary w "OHVMBS$PNQJMFS͸41"QMBUGPSNͱͯ͠ͷཁ w "P5ΛσϑΥϧτʹ͢Δํ޲Ͱண࣮ʹਐԽ͍ͯ͠Δ w 5SBOTGPSNFST#BTFE"1*#B[FM3VMF w !BOHVMBSDMJΛ࠷৽ʹอ͓ͬͯ͘΂͠

  49. 5IBOLZPV

  50. "QQFOEJY" 5SBOTGPSNFSͰͲΕ͘Β͍ ଎͘ͳͬͯΔͷ͔

  51. Compilation performance w ໿ݸͷ$PNQPOFOUͷOHDʹཁ͢Δ࣌ؒ w DPNQJMFSDMJ!TFD w DPNQJMFSDMJ!SDTFD w ൒ݮͱ͸͍͔ͳ͍·Ͱ΋ɺ༗ҙʹ͕ࠩग़Δ

  52. "QQFOEJY# l"P5CZEFGBVMUzͷԸܙ

  53. Easy to reproduce errors w Τϥʔͷ࠶ݱํ๏ڞ༗͕؆୯ʹ w ʮ+J5Ͱ͸ى͖ͳ͍͚Ͳɺ"P5ͰͷΈΤϥʔ͕ʜʯͱ͍͏ έʔεͰ͸ɺڞ༗͢Δଆ΋ݕূ͢Δଆ΋େมɻ w

    1MOLFSͰ"P5ͷڞ༗͕೉͍͠
  54. Demonstration edit.ng