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

2. @mgechev Web in 1991

3. twitter.com/mgechev @mgechev

4. @mgechev CGI

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

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

7. @mgechev Largest Contentful Paint (LCP) is a user-centric metric for

   estimating when the page is useful for the user. web.dev/lcp

8. @mgechev Each interaction requires complete page reload

9. twitter.com/ mgechev

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

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

    JS LCP TTI

12. twitter.com/mgechev Execute program Request page HTML @mgechev Fetch data (ajax)

    Loading Request scripts LCP TTI JS

13. twitter.com/ mgechev @mgechev

14. @mgechev @mgechev

15. @mgechev

16. @mgechev @mgechev

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

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

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

    JS @mgechev

20. twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML

    JS @mgechev TTI LCP

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

    JS @mgechev

22. twitter.com/ mgechev

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

    Gechev

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

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

    scripts JS

26. twitter.com/ mgechev

27. twitter.com/mgechev

28. twitter.com/mgechev @mgechev

29. @yourtwitter Angular Universal in Crunchbase Amanda Cifaldi Senior Staff Engineer

    twitter.com/algcifaldi

30. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities Angular Universal +

31. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities Angular Universal +

32. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities

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

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

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
36. None

37. biggest funding rounds this year

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

39. biggest funding rounds this year

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

    any links in that source

41. Second wave: Renders and crawls JS- generated content, and can

    be hours or weeks behind the first

42. https://www.crunchbase.com

43. recent series a funding in sf tech

44. None

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

46. recent series a funding in sf tech

47. None

48. recent series a funding in sf tech

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

    in new york

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

51. 2K pages per minute

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

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

    served

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

    served 150 milliseconds per request
55. None

56. Our Mission: Democratize access to company information and provide solutions

    that guide our users to their next opportunities Angular Universal +

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

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

    in v9!

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

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

61. twitter.com/mgechev Deployment

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

63. New in @angular/fire

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

65. twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run

    app on server LCP

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

67. @mgechev Prerendering

68. @yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:prerender Using

    Universal at build-time New in v9!

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

    run app:prerender

70. twitter.com/mgechev

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

72. twitter.com/mgechev @mgechev

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