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. Angular 9 review PIOTR LEWANDOWSKI

  2. YES! I’m super excited! @CONSTJS

  3. @CONSTJS

  4. WHAT’S NEW @CONSTJS

  5. Ivy TypeScript Angular CLI @CONSTJS

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

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

    • 800 components • 110 lazy-loaded modules
  8. Ivy – benchmark Speed • production build • dev build

    • recompile time @CONSTJS Size • whole bundle • chunks • main
  9. Ivy – benchmark --prod build speed (minutes) 0 1 2

    3 4 5 6 7 Build ES2015+ES5 Before Ivy After Ivy @CONSTJS -30%
  10. Ivy – benchmark ng serve (minutes) @CONSTJS 0 0,5 1

    1,5 2 2,5 ng serve Before Ivy After Ivy -20%
  11. Ivy – benchmark recompile time (seconds) @CONSTJS 0 5 10

    15 20 25 recompile main recompile lazy-module Before Ivy After Ivy -30%
  12. YES! but... @CONSTJS

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

    @CONSTJS
  14. Ivy – benchmark Bundle size (mb) 0 2 4 6

    8 10 12 Minified Gzipped Before Ivy After Ivy -9% -0.5% @CONSTJS
  15. No? but... @CONSTJS

  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
  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%
  18. Ivy – benchmark Summary Reminder from authors: Ivy is enabler.

    ALer migraMon-period is over, it has potenMal to be much beNer @CONSTJS
  19. Ivy – strict templates BeKer errors @CONSTJS <app-my-component [name]="stream$ |

    async"></app-my-component> Before Ivy: Runtime error
  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
  21. TESTBED @CONSTJS

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

    harness
  23. TestBed – Speed test @CONSTJS • We use jest .

    • 7.5k tests: no difference • On Karma gain is expected up to 50%
  24. I18N @CONSTJS

  25. i18n – Before Ivy @CONSTJS Translations in HTML 3 languages

    = 3 builds = 3 bundles No runtime translations
  26. i18n – AAer Ivy @CONSTJS TranslaPons in HTML and TypeScript

    3 languages = 1 build = 3 bundles No runPme translaPons yet
  27. i18n – TranslaBon in TypeScript @CONSTJS class AppComponent { name

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

    = 'Angular Tricity’; title = $localize`Hello, ${name}!`; }
  29. MIGRATION TIPS @CONSTJS

  30. @CONSTJS

  31. @CONSTJS ➜ ng update @angular/core @angular/cli –-create-commits • takes 11

    minutes • with nice progress bar
  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
  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:
  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
  35. Goal: Step by step migraBon ✅ Bump Angular to 9.0.x

    ✅ Disable Ivy ✅ (op2onal) Downgrade TypeScript to 3.6 update... @CONSTJS
  36. Goal: Step by step migraBon ✅ Migrate to TypeScript 3.7

    ✅ Follow Ivy migra2on ✅ Enable strictTemplates and strictNullChecks in tsconfig After update... @CONSTJS
  37. WHAT’S NEXT @CONSTJS

  38. ANGULAR 10+ Ivy renderer for libraries Final touch for i18n

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

  40. YES! I’m super excited! @CONSTJS

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