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.

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