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