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
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