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
   

   View Slide

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

   View Slide

3. @CONSTJS
   

   View Slide

4. WHAT’S NEW
   @CONSTJS
   

   View Slide

5. Ivy
   TypeScript
   Angular
   CLI
   @CONSTJS
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. YES!
    but...
    @CONSTJS
    

    View Slide

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

    View Slide

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

    View Slide

15. No?
    but...
    @CONSTJS
    

    View Slide

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
    

    View Slide

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%
    

    View Slide

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

    View Slide

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

    View Slide

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
    ~~~~~~~~~~~~~~~~~~~~~~~~
    After Ivy:
    Build error
    

    View Slide

21. TESTBED
    @CONSTJS
    

    View Slide

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

    View Slide

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

    View Slide

24. I18N
    @CONSTJS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. MIGRATION
    TIPS
    @CONSTJS
    

    View Slide

30. @CONSTJS
    

    View Slide

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

    View Slide

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
    

    View Slide

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:
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

37. WHAT’S NEXT
    @CONSTJS
    

    View Slide

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

    View Slide

39. @CONSTJS
    

    View Slide

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

    View Slide

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

    View Slide