The State of Angular

Transcript

1. @yourtwitter The State of Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
2. @yourtwitter https://unsplash.com/photos/rafblRbne3o
3. @mgechev v9.1 is out
4. @mgechev
5. @mgechev Smaller Faster builds Better debugging Better type checking Improved build errors Simpler Improved i18n Improvements in Universal
6. @mgechev Smaller Faster builds Better debugging Better type checking Improved build errors Simpler Improved i18n Improvements in Universal
7. Predictability vs Flexibility trade-offs Predictable Flexible
8. Static vs Dynamic trade-offs Static Dynamic
9. Static vs Dynamic trade-offs Static Dynamic
10. • Great compile-time optimizations • Excellent IDE/text editor support • Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic
11. • Great compile-time optimizations • Excellent IDE/text editor support • Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic
12. • Great compile-time optimizations • Excellent IDE/text editor support • Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic 2.0 4.0
13. • Great compile-time optimizations • Excellent IDE/text editor support • Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic 4.0 9.0
14. • Great compile-time optimizations • Excellent IDE/text editor support • Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic 9.0
15. @mgechev So, Angular is now more dynamic!
16. @mgechev …but not too dynamic
17. @mgechev • Do something • Collect feedback • Adjust direction “Gradient descent” optimization
18. @mgechev • Do something • Collect feedback • Adjust direction “Gradient descent” optimization
19. twitter.com/mgechev @mgechev
20. @mgechev Google Community
21. @mgechev
22. @mgechev Faster builds -40%
23. @mgechev VE @Component({ selector: 'app', template: ' ...' }) class AppComponent { ... } app.ngfactory.js app.ngsummary.json app.metadata.json app.component.js app.component.d.ts
24. @mgechev Ivy @Component({ selector: 'app', template: ' ...' }) class AppComponent { ... } app.component.js app.component.d.ts
25. @mgechev Faster builds • We do less work • No longer generate factories • ngcc does this once* • No longer using metadata.json • Incremental AoT builds
26. @mgechev Faster builds • We do less work • No longer generate factories • ngcc does this once* • No longer using metadata.json • Incremental AoT builds AoT in development
27. @mgechev
28. @mgechev
29. @mgechev
30. @mgechev Smaller bundles • Less generated code • Smaller framework
31. @mgechev Smaller framework • Tree-shakable instructions • No need for ngfactory machinery
32. @mgechev Improved i18n
33. Angular compile-time i18n (v2-v8) src lib Link & optimize ngc ngc l10n l10n l10n l10n
34. Angular compile-time i18n (v2-v8) src lib Link & optimize ngc ngc l10n l10n repeat
35. @mgechev Focused on static optimizations • Generate app at compile-time: • No runtime binding overhead • Smaller bundles: • Localizations are hard to tree-shake • No need for binding instructions
36. Angular compile-time i18n (Ivy) src lib Link & optimize l10n repeat ngc
37. @mgechev Angular Universal
38. @mgechev Challenges with Universal • Change-refresh time • Deployment
39. @yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:serve-ssr New in v9!
40. @yourtwitter $ ng update @nguniversal/express-engine
41. twitter.com/mgechev @ManfredSteyer @AlanAgius4 @mgechev
42. twitter.com/mgechev Deployment
43. twitter.com/ mgechev New in @angular/fire
44. New in @angular/fire
45. twitter.com/ mgechev New in @angular/fire
46. twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run app on server LCP
47. twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run app on server LCP If not cached Return from the cache Cache LCP
48. @mgechev Prerendering
49. @yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:prerender Using Universal at build-time New in v9!
50. @mgechev Building the app Prerendering <2s for 800 pages ng run app:prerender
51. twitter.com/mgechev
52. twitter.com/mgechev @mgechev JAMStack By HeroDevs
53. twitter.com/mgechev @mgechev
54. @mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk