Tweet
Tweet

Slide 1

Slide 1 text

Angular 9 review PIOTR LEWANDOWSKI

Slide 2

Slide 2 text

YES! I’m super excited! @CONSTJS

Slide 3

Slide 3 text

@CONSTJS

Slide 4

Slide 4 text

WHAT’S NEW @CONSTJS

Slide 5

Slide 5 text

Ivy TypeScript Angular CLI @CONSTJS

Slide 6

Slide 6 text

Faster Smaller i18n be/er errors better testing ... @CONSTJS Ivy – Promises

Slide 7

Slide 7 text

Ivy – benchmark @CONSTJS Context of app • 130k LOC • 800 components • 110 lazy-loaded modules

Slide 8

Slide 8 text

Ivy – benchmark Speed • production build • dev build • recompile time @CONSTJS Size • whole bundle • chunks • main

Slide 9

Slide 9 text

Ivy – benchmark --prod build speed (minutes) 0 1 2 3 4 5 6 7 Build ES2015+ES5 Before Ivy After Ivy @CONSTJS -30%

Slide 10

Slide 10 text

Ivy – benchmark ng serve (minutes) @CONSTJS 0 0,5 1 1,5 2 2,5 ng serve Before Ivy After Ivy -20%

Slide 11

Slide 11 text

Ivy – benchmark recompile time (seconds) @CONSTJS 0 5 10 15 20 25 recompile main recompile lazy-module Before Ivy After Ivy -30%

Slide 12

Slide 12 text

YES! but... @CONSTJS

Slide 13

Slide 13 text

YES! but... libraries needs to compile with ngcc tool +40s @CONSTJS

Slide 14

Slide 14 text

Ivy – benchmark Bundle size (mb) 0 2 4 6 8 10 12 Minified Gzipped Before Ivy After Ivy -9% -0.5% @CONSTJS

Slide 15

Slide 15 text

No? but... @CONSTJS

Slide 16

Slide 16 text

Ivy – benchmark lazy-loaded chunks (minified, mb) 0 1 2 3 4 5 6 7 8 Chunk size Before Ivy After Ivy -25% @CONSTJS

Slide 17

Slide 17 text

Ivy – benchmark main.js (minified, mb) 0 0,5 1 1,5 2 2,5 3 3,5 4 4,5 main.js Before Ivy After Ivy @CONSTJS +25%

Slide 18

Slide 18 text

Ivy – benchmark Summary Reminder from authors: Ivy is enabler. ALer migraMon-period is over, it has potenMal to be much beNer @CONSTJS

Slide 19

Slide 19 text

Ivy – strict templates BeKer errors @CONSTJS Before Ivy: Runtime error

Slide 20

Slide 20 text

Ivy – strict templates Better errors @CONSTJS ERROR in src/app/app.component.html:4:19 - error TS2322: Type 'null' is not assignable to type 'string'. 4 ~~~~~~~~~~~~~~~~~~~~~~~~ After Ivy: Build error

Slide 21

Slide 21 text

TESTBED @CONSTJS

Slide 22

Slide 22 text

TestBed @CONSTJS • Type-safe TestBed.inject() • Rewritten component-loading • Test harness

Slide 23

Slide 23 text

TestBed – Speed test @CONSTJS • We use jest . • 7.5k tests: no difference • On Karma gain is expected up to 50%

Slide 24

Slide 24 text

I18N @CONSTJS

Slide 25

Slide 25 text

i18n – Before Ivy @CONSTJS Translations in HTML 3 languages = 3 builds = 3 bundles No runtime translations

Slide 26

Slide 26 text

i18n – AAer Ivy @CONSTJS TranslaPons in HTML and TypeScript 3 languages = 1 build = 3 bundles No runPme translaPons yet

Slide 27

Slide 27 text

i18n – TranslaBon in TypeScript @CONSTJS class AppComponent { name = 'Angular Tricity’; title = `Hello, ${name}!`; }

Slide 28

Slide 28 text

i18n – Translation in TypeScript @CONSTJS class AppComponent { name = 'Angular Tricity’; title = $localize`Hello, ${name}!`; }

Slide 29

Slide 29 text

MIGRATION TIPS @CONSTJS

Slide 30

Slide 30 text

@CONSTJS

Slide 31

Slide 31 text

@CONSTJS ➜ ng update @angular/core @angular/cli –-create-commits • takes 11 minutes • with nice progress bar

Slide 32

Slide 32 text

Big-bang migraBon with angular cli + lots of manual adjustments @CONSTJS ➜ ng update @angular/core @angular/cli –-create-commits + then runMme errors 420 modified files

Slide 33

Slide 33 text

Goal: Step by step migration ❌ TypeScript 3.7 ❌ Ivy run2me ❌ Migra2on to TestBed.inject() ❌ Migra2on of loadChildren ❌ New i18n package Without... @CONSTJS We updated with 6 files:

Slide 34

Slide 34 text

Goal: Step by step migraBon ✅ Cherry-pick code-migra2ons to Angular 8.2 ✅ Fix TypeScript issues found in 3.6 / 3.7 Before update... @CONSTJS

Slide 35

Slide 35 text

Goal: Step by step migraBon ✅ Bump Angular to 9.0.x ✅ Disable Ivy ✅ (op2onal) Downgrade TypeScript to 3.6 update... @CONSTJS

Slide 36

Slide 36 text

Goal: Step by step migraBon ✅ Migrate to TypeScript 3.7 ✅ Follow Ivy migra2on ✅ Enable strictTemplates and strictNullChecks in tsconfig After update... @CONSTJS

Slide 37

Slide 37 text

WHAT’S NEXT @CONSTJS

Slide 38

Slide 38 text

ANGULAR 10+ Ivy renderer for libraries Final touch for i18n ESlint migraMon @CONSTJS ‼ speculated Opening Ivy internal APIs *ngIf="stream$ | async" replacement

Slide 39

Slide 39 text

@CONSTJS

Slide 40

Slide 40 text

YES! I’m super excited! @CONSTJS

Slide 41

Slide 41 text

Ques%ons? Let’s talk PIOTR LEWANDOWSKI Twi1er: @constjs