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. • 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. • 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
  3. • 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
  4. • 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
  5. • 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
  6. @mgechev Strict Mode Strict TypeScript type checking strictTemplates in Angular

    Opt-in ES5 support Opt-in CommonJS support Reduced side-effects
  7. @mgechev Byelog TypeScript 4 e2e testing Ivy libraries Trusted types

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

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

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

    AppComponent.ɵcmp = ng.$ngDeclareComponent({ ... }); export class AppComponent { ... } AppComponent.ɵcmp = ng.defineComponent({ ... });
  11. @mgechev ESLint Better forms webpack 5 Ergonomic code-splitting Remove VE

    DevTools Future projects Optional Zone Optional NgModules