The State of Angular

The State of Angular

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 07, 2020
Tweet

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