Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of Angular

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
May 07, 2020
Programming
1
85

The State of Angular

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 07, 2020
Tweet

More Decks by Minko Gechev

See All by Minko Gechev
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
15
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
40
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
69
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
160
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
28
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
61
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
720
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
2.3k
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
230

Other Decks in Programming

See All in Programming
2564c99f616f1ecfc0f617a6fe87e2a9?s=48 penguin045
0
820
6e704ad00f166b420eba3d174713c82b?s=48 urushiyama
0
300
30e63a1ad21d3944b288fc3d33d1e920?s=48 amrrs
0
120
Ca17a082a30f4cbfed1d0a6dacbe3af2?s=48 shin1x1
PRO
13
3.5k
23e7f90fa36af44f13000c1229240984?s=48 uri
1
190
0fd678886c159fd728afecc7418e9684?s=48 okdt
3
670
Bf04d1ee6fa2216133b23af8f609c70a?s=48 gatchan0807
0
980
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
120
1bc80e2eee2adeaa8bb577798d92e9d0?s=48 antonarhipov
0
130
Acdecb7b4baebb0d4c521626d21adc6a?s=48 motikoma
0
410
Cf954670fb4d283033aae0b658b1db76?s=48 mikan3rd
0
230
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
220

Featured

See All Featured
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
31
2.9k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
504
37k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
69
3.2k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.2k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.4k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
162
6.8k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
171
7.7k

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