Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
April 03, 2020
Programming
2
2.3k

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

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

April 03, 2020
Tweet

More Decks by Minko Gechev

See All by Minko Gechev
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
15
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
40
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
69
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
160
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
28
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
61
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
720
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
85
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
230

Other Decks in Programming

See All in Programming
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
110
4ce0d60e368cef89450f1d9dfdcb493f?s=48 n8ebel
1
190
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
0
180
Fc59401781a26b10f5d4fc5b758fb3b7?s=48 andrewradev
0
110
C69a66be00bc04081feb1674c9085ca2?s=48 n_makoto
2
250
C90bac78c0fb61105cfd8239767f903d?s=48 o0h
PRO
3
470
A1391fea7feb81a26c333c05f831dbf3?s=48 tosh2230
11
3.5k
64fb973c47087ece7fb9b45d5b8593a4?s=48 yag_ays
7
5.3k
652359244199b2b5108a5e09c027e0da?s=48 ykanazawa
0
330
72328eacb3f08064170cfec86b728d2a?s=48 onohiroshi1
5
20k
1bc80e2eee2adeaa8bb577798d92e9d0?s=48 antonarhipov
0
130
0187ef0e45a8d745eafc223cf2ebb90c?s=48 tosh7
0
320

Featured

See All Featured
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.3k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
302
40k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
21
1.1k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
1k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
42
1.7k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
335
16k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
26k

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