Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of Angular

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.

Minko Gechev

August 12, 2020
Tweet

More Decks by Minko Gechev

Other Decks in Programming

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