The State of Angular

In this presentation, we’ll look at the current state of Angular and its tooling infrastructure. Along the way, we’ll dive into the theory and motivation driving the direction of the framework.

In the second part of the talk, we’ll focus on the roadmap of Angular and peek into the future of the framework.

Transcript

1. @yourtwitter
   The State of Angular
   Minko Gechev
   twitter.com/mgechev
   github.com/mgechev
   blog.mgechev.com
   

   View Slide

2. @mgechev
   

   View Slide

3. @mgechev
   Framework
   

   View Slide

4. @mgechev
   Framework
   CLI Components
   

   View Slide

5. @mgechev
   Framework
   CLI Components
   i18n Language service Router Animations
   Forms PWA HTTP More!
   

   View Slide

6. @yourtwitter
   https://unsplash.com/photos/rafblRbne3o
   

   View Slide

7. @mgechev
   2,500+
   Projects at Google
   

   View Slide

8. @mgechev
   

   View Slide

9. Predictability vs Flexibility trade-offs
   Predictable Flexible
   

   View Slide

10. Static vs Dynamic trade-offs
    Static Dynamic
    

    View Slide

11. Static vs Dynamic trade-offs
    Static Dynamic
    Rust
    Haskell
    Idris
    C# / Java Go
    JavaScript
    TypeScript
    Ruby
    

    View Slide

12. Static vs Dynamic trade-offs
    Static Dynamic
    

    View Slide

13. • Compile-time optimizations
    • Excellent IDE/text editor support
    • Strict type checking
    • Source code visualization
    • Lazy component loading
    • Dynamic UI assembling
    • Fast (no) builds
    Static Dynamic
    

    View Slide

14. twitter.com/mgechev
    

    View Slide

15. twitter.com/mgechev
    15%
    of bugs detectable
    at build time
    

    View Slide

16. twitter.com/mgechev
    

    View Slide

17. twitter.com/mgechev
    

    View Slide

18. • Compile-time optimizations
    • Excellent IDE/text editor support
    • Strict type checking
    • Source code visualization
    • Lazy component loading
    • Dynamic UI assembling
    • Fast (no) builds
    Static Dynamic
    

    View Slide

19. • Compile-time optimizations
    • Excellent IDE/text editor support
    • Strict type checking
    • Source code visualization
    • Lazy component loading
    • Dynamic UI assembling
    • Fast (no) builds
    Static Dynamic
    2.0 4.0
    

    View Slide

20. • Compile-time optimizations
    • Excellent IDE/text editor support
    • Strict type checking
    • Source code visualization
    • Lazy component loading
    • Dynamic UI assembling
    • Fast (no) builds
    Static Dynamic
    4.0 9.0
    

    View Slide

21. • Compile-time optimizations
    • Excellent IDE/text editor support
    • Strict type checking
    • Source code visualization
    • Lazy component loading
    • Dynamic UI assembling
    • Fast (no) builds
    Static Dynamic
    9.0
    

    View Slide

22. @mgechev
    What’s new in Angular?
    

    View Slide

23. @mgechev
    v10 and beyond
    • Opt-in strict flag
    • Increase visibility
    

    View Slide

24. @mgechev
    • Opt-in strict flag
    • Increase visibility
    v10 and beyond
    

    View Slide

25. @mgechev
    Strict Mode
    Strict TypeScript type checking
    strictTemplates in Angular
    Opt-in ES5 support
    Opt-in CommonJS support
    Reduced side-effects
    

    View Slide

26. @mgechev
    

    View Slide

27. twitter.com/mgechev
    >15%
    of bugs detectable
    at build time
    

    View Slide

28. @mgechev
    Opt-in CommonJS
    

    View Slide

29. twitter.com/mgechev
    https://web.dev/commonjs-larger-bundles/
    

    View Slide

30. @mgechev
    • Opt-in strict flag
    • Increase visibility
    v10 and beyond
    

    View Slide

31. @mgechev
    

    View Slide

32. @mgechev
    Stability, DX, and Speed
    

    View Slide

33. @mgechev
    Byelog
    TypeScript 4 e2e testing
    Ivy libraries
    Trusted types Future RxJS
    Current projects
    MDC Web
    Harnesses
    

    View Slide

34. Byelog
    • Up to 50% in issue triage
    • 30% fewer issues in CLI
    • < 40 untriaged components issues
    

    View Slide

35. Ivy library distribution
    @Component({
    selector: 'app',
    template: ' ...'
    })
    class AppComponent { ... }
    export class AppComponent {
    ...
    }
    AppComponent.ɵcmp =
    ng.$ngDeclareComponent({
    ...
    });
    ngc
    publishedLibrary
    

    View Slide

36. Ivy library distribution
    ngl
    export class AppComponent {
    ...
    }
    AppComponent.ɵcmp =
    ng.$ngDeclareComponent({
    ...
    });
    export class AppComponent {
    ...
    }
    AppComponent.ɵcmp =
    ng.defineComponent({
    ...
    });
    

    View Slide

37. @mgechev
    

    View Slide

38. @mgechev
    ESLint Better forms webpack 5
    Ergonomic
    code-splitting
    Remove VE DevTools
    Future projects
    Optional Zone
    Optional
    NgModules
    

    View Slide

39. webpack 5
    • Better tree-shaking
    • Persistent disk caching
    

    View Slide

40. Angular DevTools
    

    View Slide

41. twitter.com/mgechev @mgechev
    Stability, DX, and Speed
    

    View Slide

42. @mgechev
    Thank you!
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com
    Survey: mgv.io/talk
    

    View Slide