ng-japan meetup evolution of Angular Compiler

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. $PNQJMBUJPO
   JO
   "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
    JNQPSUT
    
    FYQPSUT
    
    EFDMBSBUJPOʜ
    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. "P5
    WT
    +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. ͍ͭ·Ͱ
    "P5
    WT
    +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. "P5
    CZ
    EFGBVMUʹ޲͚ͯ
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
 !BOHVMBSDMJ
    
    W
29. Waste of intermediate files w ैདྷͷDPNQJMFSDMJͰ͸தؒϑΝΠϧͱͯ͠ɺ
 OHGBDUPSZUT౳Λੜ੒͠ɺͦͷޙʹKTΛੜ੒͍ͯͨ͠
    w தؒϑΝΠϧͷॻ͖ࠐΈ΍ɺதؒϑΝΠϧͷQBSTFίε τ͕༨ܭʹ͔͔ͬͯ͠·͏
30. Why generate dot ts ? w 5ZQF4DSJQUར༻্ͷ੍໿
    w UT
    
    KT
    ͷ%PXO
    5SBOTQJMFॲཧΛ֦ு͢Δ࢓૊Έ͸ଘ ࡏ͍ͯ͠ͳ͔ͬͨ
31. Custom Transformers w 5ZQF4DSJQU
    WͰ͸ɺΦϦδφϧͷτϥϯεύΠϧ ॲཧ 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[FM
    3VMF
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[FM
    CSBODI্Ͱ࡞ۀ͞Ε͍ͯΔ໛༷
    w ରԠ͞Εͨ৔߹ɺCVJMEʹ+7.͕ඞཁ
 IUUQTHJUIVCDPNBMFYFBHMFOHDPOUBJOFS
    ͷΑ͏ͳ %PDLFS
    *NBHFΛ$*Ͱར༻͢Δͱྑͦ͞͏
47. 4VNNBSZ
48. Summary w "OHVMBS
    $PNQJMFS͸41"
    QMBUGPSNͱͯ͠ͷཁ
    w "P5ΛσϑΥϧτʹ͢Δํ޲Ͱண࣮ʹਐԽ͍ͯ͠Δ
    w 5SBOTGPSNFST
    #BTFE
    "1*
    
    #B[FM
    3VMF
    w !BOHVMBSDMJΛ࠷৽ʹอ͓ͬͯ͘΂͠
49. 5IBOL
    ZPV
    
50. "QQFOEJY
    "
    5SBOTGPSNFSͰͲΕ͘Β͍
    ଎͘ͳͬͯΔͷ͔
51. Compilation performance w ໿ݸͷ$PNQPOFOUͷOHDʹཁ͢Δ࣌ؒ
    w DPNQJMFSDMJ!
    
    TFD
    w DPNQJMFSDMJ!SD
    
    TFD
    w ൒ݮͱ͸͍͔ͳ͍·Ͱ΋ɺ༗ҙʹ͕ࠩग़Δ
52. "QQFOEJY
    #
    l"P5
    CZ
    EFGBVMUz
    ͷԸܙ
53. Easy to reproduce errors w Τϥʔͷ࠶ݱํ๏ڞ༗͕؆୯ʹ
    w ʮ+J5Ͱ͸ى͖ͳ͍͚Ͳɺ"P5ͰͷΈΤϥʔ͕ʜʯͱ͍͏ έʔεͰ͸ɺڞ༗͢Δଆ΋ݕূ͢Δଆ΋େมɻ
    w 1MOLFSͰ"P5ͷڞ༗͕೉͍͠
54. Demonstration edit.ng