ng-japan meetup evolution of Angular Compiler

Slide 1

Slide 1 text

"OHVMBS$PNQJMFSͷਐԽ ng-japan meetup 2017 Autumn by @Quramy

Slide 2

Slide 2 text

About me

Slide 3

Slide 3 text

Today’s theme:

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

$PNQJMBUJPOJO"OHVMBS

Slide 6

Slide 6 text

Think about Component w ͜ͷ$PNQPOFOUͷϨϯμϦϯάɺͲ͏࣮૷͠·͔͢ʁ @Component({ selector: 'app', template: ` {{count}} count up `, }) export class AppComponent { count = 0; countUp() { this.count += 1; } }

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Naive implementation w ͜ͷํ๏͸৭ʑͳ͕ܽؕ͋Δɿ wඳըͷ౓ʹશཁૉͷ࡞Γସ͕͑ൃੜ͍ͯ͠Δ wඳըͷ౓ʹΠϕϯτϋϯυϦϯάΛొ࿥͠௚͍ͯ͠Δ w ͙͢ʹ%0.ͷੑೳྼԽΛҾ͖ىͯ͜͠͠·͏

Slide 9

Slide 9 text

Little better way w ΋͏গ͠ਅ໘໨ʹॻ͍ͯΈΑ͏ function createView(hostElement, component) { // create const sp = span = document.createElement('span'); hostElement.appendChild(sp); // create 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; }

Slide 10

Slide 10 text

Little better way w %0.ૢ࡞Λ࠷খݶʹ͢Δ w %0.ཁૉͷ࡞੒͸࠷ॳͷҰճ͚ͩ w $PNQPOFOUͷঢ়ଶߋ৽࣌ มߋݕ஌࣮ߦ࣌ ͸ɺผ్ VQEBUF༻ͷؔ਺Λ࣮ߦ͢Δ

Slide 11

Slide 11 text

That’s all w "OHVMBS$PNQJMFS͕΍͍ͬͯΔ͜ͱ΋Ұॹ w 5FNQMBUFΛQBSTFͯ͠ɺEFpOF7JFX΍VQEBUF7JFX૬ ౰Λ࡞ͬͯ͘ΕΔ w ͜ΕΒͷؔ਺Λ·ͱΊͨ΋ͷ͕$PNQPOFOU'BDUPSZ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

What Angular Compiler does w ϑϨʔϜϫʔΫͷཉٻ w ։ൃऀ 5FNQMBUFΛ༻͍ͯ એݴతʹ7JFXΛ૊Έཱͯ Δ͜ͱ͕Ͱ͖Δ w ϒϥ΢β࠷খίετͰ%0.πϦʔ͕ߋ৽͞ΕΔ w ͜ΕΒཱ͕྆Ͱ͖Δͷ͸ɺ$PNQJMFS͕  %0.Λૢ࡞͢Δؔ਺Λੜ੒ͯ͘͠Ε͍ͯΔ͔Β

Slide 14

Slide 14 text

What Angular Compiler does w 5FNQMBUFҎ֎ͷ$PNQJMFର৅ w $44 w "OJNBUJPO w %* QSPWJEFS *OKFDUBCMF w .PEVMF JNQPSUTFYQPSUTEFDMBSBUJPOʜ w 3PVUJOH

Slide 15

Slide 15 text

When Compiler works w ίϯύΠϥͷಈ࡞λΠϛϯά w +J5 +VTUJO5JNF   ΞϓϦ͕࣮ߦ͞ΕΔλΠϛϯάͰղੳ w "P5 "IFBEPG5JNF   Ϗϧυ࣌ʹιʔείʔυΛ੩తʹղੳ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

"P5WT+J5

Slide 19

Slide 19 text

JiT Compilation’s problem w ϒϥ΢βͰಈ࡞ͤ͞Δ·Ͱ$PNQJMFΤϥʔʹؾ෇͚ͳ͍ w MBOHVBHFTFSWJDFΤσΟλͰܰݮՄೳ w $PNQJMFSͷηΩϡϦςΟϦεΫ w 944Λಥ͔Εͨ৔߹ɺ೚ҙͷ$PNQPOFOUΛಈతʹ࡞ ੒͞ΕΔϦεΫʹ

Slide 20

Slide 20 text

AoT Compilation’s problem w Ϗϧυʹ͕͔͔࣌ؒΔ w $PNQPOFOU਺ʹ΋ΑΔ͕ɺ਺ඵΦʔμʔΛཁ͢Δ ͜ͱ΋ w KTͷαΠζ͕ංେԽ͕ͪ͠ w 7JFX&OHJOF dW ಋೖͰɺWYͱൺֱ͢Δͱ ఔ౓ʹαΠζ͕࡟ݮ͞Ε͍ͯΔ

Slide 21

Slide 21 text

͍ͭ·Ͱ"P5WT+J5ͳͷ͔

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

"P5CZEFGBVMUʹ޲͚ͯ

Slide 25

Slide 25 text

5SBOTGPSNFST#BTFE $PNQJMFS"1*

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Waste of intermediate ﬁles w ैདྷͷDPNQJMFSDMJͰ͸தؒϑΝΠϧͱͯ͠ɺ  OHGBDUPSZUT౳Λੜ੒͠ɺͦͷޙʹKTΛੜ੒͍ͯͨ͠ w தؒϑΝΠϧͷॻ͖ࠐΈ΍ɺதؒϑΝΠϧͷQBSTFίε τ͕༨ܭʹ͔͔ͬͯ͠·͏

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

What’s Transformer? w "45 ந৅ߏจ໦ Λผͷ"45΁ม׵͢Δػߏ w #BCFMʹ͓͚ΔQMVHJOͷΑ͏ͳ΋ͷ w 5ZQF4DSJQUͷ಺෦Ͱ΋τϥϯεύΠϧॲཧ͸ͦΕͧΕͷ 5SBOTGPSNFSͱ࣮ͯ͠૷͞Ε͍ͯΔ w FH&4༻ &4༻ &4༻ 54ຊମ༻

Slide 33

Slide 33 text

Transformation example var square = x ** 2;

Slide 34

Slide 34 text

Transformation example var square = Math.pow(x, 2);

Slide 35

Slide 35 text

Compiler and Transformers w ʮOHGBDUPSZΛੜ੒͢Δ5SBOTGPSNFSʯΛDPNQJMFSDMJ ͕༻ҙ͢Δ͜ͱͰɺ"P5$PNQJMF͕ߴ଎Խ

Slide 36

Slide 36 text

"OHVMBS#B[FM3VMF

Slide 37

Slide 37 text

What’s Bazel ?

Slide 38

Slide 38 text

What’s Bazel ? w (PPHMF͕࡞੒ɾެ։͍ͯ͠ΔϏϧυπʔϧ  #MB[Fͱ͍͏(PPHMFશࣾͰ࢖ΘΕ͍ͯΔπʔϧ͕ϕʔε w ೥ʹWϦϦʔε༧ఆʢݱঢ়͸CFUBʣ w ༷ʑͳݴޠͷQSKʹରԠ  $$ HP +BWB 0CKFDUJWF$ 4DBMB 3VTU FUD

Slide 39

Slide 39 text

How to make compilation faster w #B[FM͸ɺϏϧυର৅Λࡉ෼Խ্ͨ͠Ͱɺର৅ؒͷґଘ ؔ܎Λར༻ͯ͠ϏϧυΛߴ଎Խ͍ͯ͘͠

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Bazel and dependency graph w 1BDLBHFؒͷґଘؔ܎Λఆٛ͢Δ͜ͱͰ w ޓ͍ʹಠཱͨ͠1BDLBHFΛฒߦʹCVJMEͰ͖Δ w CVJMEࡁΈͷ1BDLBHFͷSFCVJMEΛεΩοϓͰ͖Δ w ʮࡉ͔͘Ϗϧυʯ͢Δ͜ͱͰແବͳ$PNQJMFΛආ͚Δ w طଘͷϏϧυπʔϧͰ͍͏ͱɺNBLF΍HVMQʹ͍ۙ

Slide 43

Slide 43 text

Bazel and Angular w !BOHVMBSCB[FM w CFUB͔ΒϦϦʔε͞Ε͍ͯΔ w "OHVMBSͷNPEVMFΛ#B[FMͰϏϧυ͢ΔͨΊͷϧʔϧ ηοτ w ಺෦తʹOHD DPNQJMFSDMJ Λ࣮ߦ͍ͯ͠Δ

Slide 44

Slide 44 text

@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", )

Slide 45

Slide 45 text

How to use Bazel w #B[FMΛૉͰ࢖͏ͷ͸໘౗ʜ w +BWB #B[FMͷηοτΞοϓ w Ϗϧυఆٛ༻ͷݴޠ4LZMBSL 1ZUIPO Λ֮͑Δ w ݸผͷ3VMF BOHVMBS TBTT FUDʜ ͷ࢖͍ํΛ֮͑Δ

Slide 46

Slide 46 text

@angular/cli w !BOHVMBSDMJ͕ରԠ͢ΔͷΛ଴ͭͷ͕٢  CB[FMCSBODI্Ͱ࡞ۀ͞Ε͍ͯΔ໛༷ w ରԠ͞Εͨ৔߹ɺCVJMEʹ+7.͕ඞཁ  IUUQTHJUIVCDPNBMFYFBHMFOHDPOUBJOFSͷΑ͏ͳ %PDLFS*NBHFΛ$*Ͱར༻͢Δͱྑͦ͞͏

Slide 47

Slide 47 text

4VNNBSZ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

5IBOLZPV

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Compilation performance w ໿ݸͷ$PNQPOFOUͷOHDʹཁ͢Δ࣌ؒ w DPNQJMFSDMJ!TFD w DPNQJMFSDMJ!SDTFD w ൒ݮͱ͸͍͔ͳ͍·Ͱ΋ɺ༗ҙʹ͕ࠩग़Δ

Slide 52

Slide 52 text

"QQFOEJY# l"P5CZEFGBVMUzͷԸܙ

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Demonstration edit.ng