@yourtwitter
The State of Angular Deployment, SSR, and Prerendering
ng-conf keynote
twitter.com/mgechev
github.com/mgechev
blog.mgechev.com
Minko Gechev
Slide 2
Slide 2 text
@mgechev
Web in 1991
Slide 3
Slide 3 text
twitter.com/mgechev @mgechev
Slide 4
Slide 4 text
@mgechev
CGI
Slide 5
Slide 5 text
twitter.com/mgechev
Request page
HTML
@mgechev
Slide 6
Slide 6 text
twitter.com/mgechev
Execute program
Request page
HTML
@mgechev
LCP
Slide 7
Slide 7 text
@mgechev
Largest Contentful Paint
(LCP) is a user-centric
metric for estimating
when the page is useful
for the user.
web.dev/lcp
Slide 8
Slide 8 text
@mgechev
Each interaction requires
complete page reload
Slide 9
Slide 9 text
twitter.com/
mgechev
Slide 10
Slide 10 text
twitter.com/mgechev
Execute program
Request page
HTML
@mgechev
LCP
Slide 11
Slide 11 text
twitter.com/mgechev
Execute program
Request page
HTML
@mgechev
Loading
Request scripts
JS
LCP TTI
Slide 12
Slide 12 text
twitter.com/mgechev
Execute program
Request page
HTML
@mgechev
Fetch data (ajax)
Loading
Request scripts
LCP TTI
JS
Slide 13
Slide 13 text
twitter.com/
mgechev @mgechev
Slide 14
Slide 14 text
@mgechev
@mgechev
Slide 15
Slide 15 text
@mgechev
Slide 16
Slide 16 text
@mgechev
@mgechev
Slide 17
Slide 17 text
twitter.com/mgechev
Request /
HTML
@mgechev
Slide 18
Slide 18 text
twitter.com/mgechev
Request /
Loading
Request scripts
HTML JS
@mgechev
Our Mission:
Democratize access to
company information and
provide solutions that guide
our users to their next
opportunities
Angular Universal
+
Slide 31
Slide 31 text
Our Mission:
Democratize access to
company information and
provide solutions that guide
our users to their next
opportunities
Angular Universal
+
Slide 32
Slide 32 text
Our Mission:
Democratize access to company
information and provide
solutions that guide our users to
their next opportunities
Slide 33
Slide 33 text
some pages took seconds to load
20
20
But...
Slide 34
Slide 34 text
// TODO:
// access + information =>
// opportunities?
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
biggest funding rounds this year
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
biggest funding rounds this year
Slide 40
Slide 40 text
First wave:
Crawls any source that can be
requested and any links in that
source
Slide 41
Slide 41 text
Second wave:
Renders and crawls JS-
generated content, and can be
hours or weeks behind the first
Slide 42
Slide 42 text
https://www.crunchbase.com
Slide 43
Slide 43 text
recent series a funding in sf tech
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
recent series a funding in sf tech
70% organic traffic
Slide 46
Slide 46 text
recent series a funding in sf tech
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
recent series a funding in sf tech
Slide 49
Slide 49 text
recent series a funding in sf tech
data science companies in new york
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
2K
pages per
minute
Slide 52
Slide 52 text
2K
pages per
minute
1M
visitors
per week
Slide 53
Slide 53 text
2K
pages per
minute
1M
visitors
per week
6
continents
served
Slide 54
Slide 54 text
2K
pages per
minute
1M
visitors
per week
6
continents
served
150
milliseconds
per request
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Our Mission:
Democratize access to
company information and
provide solutions that guide
our users to their next
opportunities
Angular Universal
+
Slide 57
Slide 57 text
@mgechev
Challenges with Universal
● Change-refresh time
● Deployment
Slide 58
Slide 58 text
@yourtwitter
$ ng add @nguniversal/express-engine
$ ng run [PROJECT_NAME]:serve-ssr
New in
v9!
Slide 59
Slide 59 text
@yourtwitter
$ ng update @nguniversal/express-engine