The State of Angular

Transcript

1. @yourtwitter
   The State of Angular
   Minko Gechev
   twitter.com/mgechev
   github.com/mgechev
   blog.mgechev.com
   

   View Slide

2. @yourtwitter
   https://unsplash.com/photos/rafblRbne3o
   

   View Slide

3. @mgechev
   v9.1 is out
   

   View Slide

4. @mgechev
   

   View Slide

5. @mgechev
   Smaller Faster builds
   Better
   debugging
   Better type
   checking
   Improved
   build errors
   Simpler Improved i18n
   Improvements
   in Universal
   

   View Slide

6. @mgechev
   Smaller Faster builds
   Better
   debugging
   Better type
   checking
   Improved
   build errors
   Simpler Improved i18n
   Improvements
   in Universal
   

   View Slide

7. Predictability vs Flexibility trade-offs
   Predictable Flexible
   

   View Slide

8. Static vs Dynamic trade-offs
   Static Dynamic
   

   View Slide

9. Static vs Dynamic trade-offs
   Static Dynamic
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. @mgechev
    So, Angular is now more dynamic!
    

    View Slide

16. @mgechev
    …but not too dynamic
    

    View Slide

17. @mgechev
    • Do something
    • Collect feedback
    • Adjust direction
    “Gradient descent” optimization
    

    View Slide

18. @mgechev
    • Do something
    • Collect feedback
    • Adjust direction
    “Gradient descent” optimization
    

    View Slide

19. twitter.com/mgechev @mgechev
    

    View Slide

20. @mgechev
    Google Community
    

    View Slide

21. @mgechev
    

    View Slide

22. @mgechev
    Faster builds
    -40%
    

    View Slide

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
    

    View Slide

24. @mgechev
    Ivy
    @Component({
    selector: 'app',
    template: ' ...'
    })
    class AppComponent { ... }
    app.component.js
    app.component.d.ts
    

    View Slide

25. @mgechev
    Faster builds
    • We do less work
    • No longer generate factories
    • ngcc does this once*
    • No longer using metadata.json
    • Incremental AoT builds
    

    View Slide

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
    

    View Slide

27. @mgechev
    

    View Slide

28. @mgechev
    

    View Slide

29. @mgechev
    

    View Slide

30. @mgechev
    Smaller bundles
    • Less generated code
    • Smaller framework
    

    View Slide

31. @mgechev
    Smaller framework
    • Tree-shakable instructions
    • No need for ngfactory machinery
    

    View Slide

32. @mgechev
    Improved i18n
    

    View Slide

33. Angular compile-time i18n (v2-v8)
    src
    lib
    Link &
    optimize
    ngc
    ngc
    l10n
    l10n
    l10n
    l10n
    

    View Slide

34. Angular compile-time i18n (v2-v8)
    src
    lib
    Link &
    optimize
    ngc
    ngc
    l10n
    l10n
    repeat
    

    View Slide

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
    

    View Slide

36. Angular compile-time i18n (Ivy)
    src
    lib
    Link &
    optimize l10n
    repeat
    ngc
    

    View Slide

37. @mgechev
    Angular Universal
    

    View Slide

38. @mgechev
    Challenges with Universal
    ● Change-refresh time
    ● Deployment
    

    View Slide

39. @yourtwitter
    $ ng add @nguniversal/express-engine
    $ ng run [PROJECT_NAME]:serve-ssr
    New in
    v9!
    

    View Slide

40. @yourtwitter
    $ ng update @nguniversal/express-engine
    

    View Slide

41. twitter.com/mgechev
    @ManfredSteyer
    @AlanAgius4
    @mgechev
    

    View Slide

42. twitter.com/mgechev
    Deployment
    

    View Slide

43. twitter.com/
    mgechev
    New in
    @angular/fire
    

    View Slide

44. New in
    @angular/fire
    

    View Slide

45. twitter.com/
    mgechev
    New in
    @angular/fire
    

    View Slide

46. twitter.com/mgechev
    Request /
    HTML
    @mgechev
    Request scripts
    JS
    TTI
    Run app on server
    LCP
    

    View Slide

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
    

    View Slide

48. @mgechev
    Prerendering
    

    View Slide

49. @yourtwitter
    $ ng add @nguniversal/express-engine
    $ ng run [PROJECT_NAME]:prerender
    Using Universal at build-time
    New in
    v9!
    

    View Slide

50. @mgechev
    Building the app
    Prerendering
    <2s for 800 pages
    ng run app:prerender
    

    View Slide

51. twitter.com/mgechev
    

    View Slide

52. twitter.com/mgechev @mgechev
    JAMStack
    By HeroDevs
    

    View Slide

53. twitter.com/mgechev @mgechev
    

    View Slide

54. @mgechev
    Thank you!
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com
    Survey: mgv.io/talk
    

    View Slide