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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

August 12, 2020
Tweet

Transcript

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

  2. @mgechev

  3. @mgechev Framework

  4. @mgechev Framework CLI Components

  5. @mgechev Framework CLI Components i18n Language service Router Animations Forms

    PWA HTTP More!
  6. @yourtwitter https://unsplash.com/photos/rafblRbne3o

  7. @mgechev 2,500+ Projects at Google

  8. @mgechev

  9. Predictability vs Flexibility trade-offs Predictable Flexible

  10. Static vs Dynamic trade-offs Static Dynamic

  11. Static vs Dynamic trade-offs Static Dynamic Rust Haskell Idris C#

    / Java Go JavaScript TypeScript Ruby
  12. Static vs Dynamic trade-offs Static Dynamic

  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
  14. twitter.com/mgechev

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

  16. twitter.com/mgechev

  17. twitter.com/mgechev

  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
  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
  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
  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
  22. @mgechev What’s new in Angular?

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

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

    beyond
  25. @mgechev Strict Mode Strict TypeScript type checking strictTemplates in Angular

    Opt-in ES5 support Opt-in CommonJS support Reduced side-effects
  26. @mgechev

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

  28. @mgechev Opt-in CommonJS

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

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

    beyond
  31. @mgechev

  32. @mgechev Stability, DX, and Speed

  33. @mgechev Byelog TypeScript 4 e2e testing Ivy libraries Trusted types

    Future RxJS Current projects MDC Web Harnesses
  34. Byelog • Up to 50% in issue triage • 30%

    fewer issues in CLI • < 40 untriaged components issues
  35. Ivy library distribution @Component({ selector: 'app', template: ' ...' })

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

    AppComponent.ɵcmp = ng.$ngDeclareComponent({ ... }); export class AppComponent { ... } AppComponent.ɵcmp = ng.defineComponent({ ... });
  37. @mgechev

  38. @mgechev ESLint Better forms webpack 5 Ergonomic code-splitting Remove VE

    DevTools Future projects Optional Zone Optional NgModules
  39. webpack 5 • Better tree-shaking • Persistent disk caching

  40. Angular DevTools

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

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