The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote

Transcript

1. @yourtwitter
   The State of Angular Deployment, SSR, and Prerendering
   ng-conf keynote
   twitter.com/mgechev
   github.com/mgechev
   blog.mgechev.com
   Minko Gechev
   

   View Slide

2. @mgechev
   Web in 1991
   

   View Slide

3. twitter.com/mgechev @mgechev
   

   View Slide

4. @mgechev
   CGI
   

   View Slide

5. twitter.com/mgechev
   Request page
   HTML
   @mgechev
   

   View Slide

6. twitter.com/mgechev
   Execute program
   Request page
   HTML
   @mgechev
   LCP
   

   View Slide

7. @mgechev
   Largest Contentful Paint
   (LCP) is a user-centric
   metric for estimating
   when the page is useful
   for the user.
   web.dev/lcp
   

   View Slide

8. @mgechev
   Each interaction requires
   complete page reload
   

   View Slide

9. twitter.com/
   mgechev
   

   View Slide

10. twitter.com/mgechev
    Execute program
    Request page
    HTML
    @mgechev
    LCP
    

    View Slide

11. twitter.com/mgechev
    Execute program
    Request page
    HTML
    @mgechev
    Loading
    Request scripts
    JS
    LCP TTI
    

    View Slide

12. twitter.com/mgechev
    Execute program
    Request page
    HTML
    @mgechev
    Fetch data (ajax)
    Loading
    Request scripts
    LCP TTI
    JS
    

    View Slide

13. twitter.com/
    mgechev @mgechev
    

    View Slide

14. @mgechev
    @mgechev
    

    View Slide

15. @mgechev
    

    View Slide

16. @mgechev
    @mgechev
    

    View Slide

17. twitter.com/mgechev
    Request /
    HTML
    @mgechev
    

    View Slide

18. twitter.com/mgechev
    Request /
    Loading
    Request scripts
    HTML JS
    @mgechev
    

    View Slide

19. twitter.com/mgechev
    Request /
    Loading
    Request scripts
    Loading
    Execute scripts
    HTML JS
    @mgechev
    

    View Slide

20. twitter.com/mgechev
    Request /
    Loading
    Request scripts
    Loading
    Execute scripts
    HTML JS
    @mgechev
    TTI
    LCP
    

    View Slide

21. twitter.com/mgechev
    Request /
    Loading
    Request scripts
    Loading
    Execute scripts
    HTML JS
    @mgechev
    

    View Slide

22. twitter.com/
    mgechev
    

    View Slide

23. @mgechev
    Sometimes the bundle just can’t get
    any smaller
    Minko Gechev
    

    View Slide

24. @mgechev
    What if the server…was a browser?
    

    View Slide

25. twitter.com/mgechev
    Request / Run app on server
    HTML
    @mgechev
    Request scripts
    JS
    

    View Slide

26. twitter.com/
    mgechev
    

    View Slide

27. twitter.com/mgechev
    

    View Slide

28. twitter.com/mgechev @mgechev
    

    View Slide

29. @yourtwitter
    Angular Universal in Crunchbase
    Amanda Cifaldi
    Senior Staff Engineer
    twitter.com/algcifaldi
    

    View Slide

30. Our Mission:
    Democratize access to
    company information and
    provide solutions that guide
    our users to their next
    opportunities
    Angular Universal
    +
    

    View Slide

31. Our Mission:
    Democratize access to
    company information and
    provide solutions that guide
    our users to their next
    opportunities
    Angular Universal
    +
    

    View Slide

32. Our Mission:
    Democratize access to company
    information and provide
    solutions that guide our users to
    their next opportunities
    

    View Slide

33. some pages took seconds to load
    20
    20
    But...
    

    View Slide

34. // TODO:
    // access + information =>
    // opportunities?
    

    View Slide

35. DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    

    View Slide

36. View Slide

37. biggest funding rounds this year
    

    View Slide

38. DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    

    View Slide

39. biggest funding rounds this year
    

    View Slide

40. First wave:
    Crawls any source that can be
    requested and any links in that
    source
    

    View Slide

41. Second wave:
    Renders and crawls JS-
    generated content, and can be
    hours or weeks behind the first
    

    View Slide

42. https://www.crunchbase.com
    

    View Slide

43. recent series a funding in sf tech
    

    View Slide

44. View Slide

45. recent series a funding in sf tech
    70% organic traffic
    

    View Slide

46. recent series a funding in sf tech
    

    View Slide

47. View Slide

48. recent series a funding in sf tech
    

    View Slide

49. recent series a funding in sf tech
    data science companies in new york
    

    View Slide

50. DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    DATA DATA DATA DATA DATA DATA
    

    View Slide

51. 2K
    pages per
    minute
    

    View Slide

52. 2K
    pages per
    minute
    1M
    visitors
    per week
    

    View Slide

53. 2K
    pages per
    minute
    1M
    visitors
    per week
    6
    continents
    served
    

    View Slide

54. 2K
    pages per
    minute
    1M
    visitors
    per week
    6
    continents
    served
    150
    milliseconds
    per request
    

    View Slide

55. View Slide

56. Our Mission:
    Democratize access to
    company information and
    provide solutions that guide
    our users to their next
    opportunities
    Angular Universal
    +
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. twitter.com/mgechev
    Deployment
    

    View Slide

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

    View Slide

63. New in
    @angular/fire
    

    View Slide

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

    View Slide

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

    View Slide

66. 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

67. @mgechev
    Prerendering
    

    View Slide

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

    View Slide

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

    View Slide

70. twitter.com/mgechev
    

    View Slide

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

    View Slide

72. twitter.com/mgechev @mgechev
    

    View Slide

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

    View Slide