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.4k

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
Change the World With Open Source Software
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
29
Fast Angular Apps from End to End
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
59
The State of Angular
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
92
The State of Angular
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
170
Software Engineering as a Superpower
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
44
Introduction to Angular
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
69
Internals of the Angular CLI
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
810
The State of Angular
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
88
The Future of the Front-End Frameworks
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
240

Other Decks in Programming

See All in Programming
WindowsコンテナDojo：第2回 Windowsコンテナアプリのビルド、公開、デプロイ
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
140
Improve Build Times in Less Time
85a1166e93654865b4dcafdafe2b2dfd?s=48 zacsweers
6
2.8k
Kotlin 最新動向2022 #tfcon #techfeed
14c9795d267f5b85abb98ca5e8780646?s=48 ntaro
1
910
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
320
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
4b7124f2f5989173c8ce3b0934817a32?s=48 clockmaker
2
1.4k
Go API クライアントの実装 〜Go Conference に載せれなかったTIPS〜
94500f2d1984cd5da6e445d89819052b?s=48 yyoshiki41
0
190
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2k
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
260
競プロへの誘 -いざな-
Efbc292fd2e2c4caa0ede1d1532804a9?s=48 u76ner
0
340
Swift Concurrencyによる安全で快適な非同期処理
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
260
Keep Your Cache Always Fresh With Debezium
8e25c0ca4bf25113bd9c0ccc5d118164?s=48 gunnarmorling
0
180
C言語でメモリ管理を考えた話
F17bbe02fb6dda24d29196c2479121b1?s=48 hkawai
0
180

Featured

See All Featured
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
57
3.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
38
12k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
225
15k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
44k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
910
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
2.9k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
33k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.5k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.9k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.5k

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