Angular 9 - Review

Angular 9 - Review

Presentation from Angular Tricity meetup - Gdansk, Poland.
I discuss what we can expect from Angular 9 release and why it is huge accomplishment for the team.
I've given few tips how we managed to migrate with 6 file-changes (even when schematic migration modified 420 files)

At last, few speculations on close future of Angular.

B48000922680b510078188df438184dd?s=128

Piotr Lewandowski

March 10, 2020
Tweet

Transcript

  1. 7.

    Ivy – benchmark @CONSTJS Context of app • 130k LOC

    • 800 components • 110 lazy-loaded modules
  2. 8.

    Ivy – benchmark Speed • production build • dev build

    • recompile time @CONSTJS Size • whole bundle • chunks • main
  3. 9.

    Ivy – benchmark --prod build speed (minutes) 0 1 2

    3 4 5 6 7 Build ES2015+ES5 Before Ivy After Ivy @CONSTJS -30%
  4. 10.

    Ivy – benchmark ng serve (minutes) @CONSTJS 0 0,5 1

    1,5 2 2,5 ng serve Before Ivy After Ivy -20%
  5. 11.

    Ivy – benchmark recompile time (seconds) @CONSTJS 0 5 10

    15 20 25 recompile main recompile lazy-module Before Ivy After Ivy -30%
  6. 14.

    Ivy – benchmark Bundle size (mb) 0 2 4 6

    8 10 12 Minified Gzipped Before Ivy After Ivy -9% -0.5% @CONSTJS
  7. 16.

    Ivy – benchmark lazy-loaded chunks (minified, mb) 0 1 2

    3 4 5 6 7 8 Chunk size Before Ivy After Ivy -25% @CONSTJS
  8. 17.

    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%
  9. 18.

    Ivy – benchmark Summary Reminder from authors: Ivy is enabler.

    ALer migraMon-period is over, it has potenMal to be much beNer @CONSTJS
  10. 19.

    Ivy – strict templates BeKer errors @CONSTJS <app-my-component [name]="stream$ |

    async"></app-my-component> Before Ivy: Runtime error
  11. 20.

    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 <app-my-component [name]="stream$ | async"></app-my-component> ~~~~~~~~~~~~~~~~~~~~~~~~ After Ivy: Build error
  12. 23.

    TestBed – Speed test @CONSTJS • We use jest .

    • 7.5k tests: no difference • On Karma gain is expected up to 50%
  13. 25.

    i18n – Before Ivy @CONSTJS Translations in HTML 3 languages

    = 3 builds = 3 bundles No runtime translations
  14. 26.

    i18n – AAer Ivy @CONSTJS TranslaPons in HTML and TypeScript

    3 languages = 1 build = 3 bundles No runPme translaPons yet
  15. 27.

    i18n – TranslaBon in TypeScript @CONSTJS class AppComponent { name

    = 'Angular Tricity’; title = `Hello, ${name}!`; }
  16. 28.

    i18n – Translation in TypeScript @CONSTJS class AppComponent { name

    = 'Angular Tricity’; title = $localize`Hello, ${name}!`; }
  17. 30.
  18. 32.

    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
  19. 33.

    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:
  20. 34.

    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
  21. 35.

    Goal: Step by step migraBon ✅ Bump Angular to 9.0.x

    ✅ Disable Ivy ✅ (op2onal) Downgrade TypeScript to 3.6 update... @CONSTJS
  22. 36.

    Goal: Step by step migraBon ✅ Migrate to TypeScript 3.7

    ✅ Follow Ivy migra2on ✅ Enable strictTemplates and strictNullChecks in tsconfig After update... @CONSTJS
  23. 38.

    ANGULAR 10+ Ivy renderer for libraries Final touch for i18n

    ESlint migraMon @CONSTJS ‼ speculated Opening Ivy internal APIs *ngIf="stream$ | async" replacement
  24. 39.