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
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
45. recent series a funding in sf tech 70% organic traffic
46. recent series a funding in sf tech
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
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