Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
Search
Minko Gechev
April 03, 2020
Programming
2
2.7k
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
Minko Gechev
April 03, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
83
Fast Angular Apps from End to End
mgechev
0
110
The State of Angular
mgechev
1
160
The State of Angular
mgechev
1
210
Software Engineering as a Superpower
mgechev
1
110
Introduction to Angular
mgechev
1
120
Internals of the Angular CLI
mgechev
2
1.1k
The State of Angular
mgechev
1
120
The Future of the Front-End Frameworks
mgechev
2
260
Other Decks in Programming
See All in Programming
syndicationd LT
ymgyt
0
110
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
160
品質が高いコードって何?Rev2.1
ickx
1
390
Laravel標準バリデーションでできること
hmb_ok
1
330
GitHub Copilot Tips and Tricks
yuichielectric
2
260
OpCode目線で眺める PHPコードのカバレッジ
o0h
PRO
2
470
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
700
上手な探索的テストとその上達方法について
matsu802
1
430
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
830
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
7
5.9k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
210
mandaRa: R言語ユーザのための新しい知識共有の場 / mandara_tokyor111
s_uryu
2
410
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Typedesign – Prime Four
hannesfritz
36
2k
Side Projects
sachag
451
41k
How to Ace a Technical Interview
jacobian
272
22k
Building Adaptive Systems
keathley
29
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Building Applications with DynamoDB
mza
88
5.5k
Happy Clients
brianwarren
91
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
Transcript
@yourtwitter The State of Angular Deployment, SSR, and Prerendering ng-conf
keynote twitter.com/mgechev github.com/mgechev blog.mgechev.com Minko Gechev
@mgechev Web in 1991
twitter.com/mgechev @mgechev
@mgechev CGI
twitter.com/mgechev Request page HTML @mgechev
twitter.com/mgechev Execute program Request page HTML @mgechev LCP
@mgechev Largest Contentful Paint (LCP) is a user-centric metric for
estimating when the page is useful for the user. web.dev/lcp
@mgechev Each interaction requires complete page reload
twitter.com/ mgechev
twitter.com/mgechev Execute program Request page HTML @mgechev LCP
twitter.com/mgechev Execute program Request page HTML @mgechev Loading Request scripts
JS LCP TTI
twitter.com/mgechev Execute program Request page HTML @mgechev Fetch data (ajax)
Loading Request scripts LCP TTI JS
twitter.com/ mgechev @mgechev
@mgechev @mgechev
@mgechev
@mgechev @mgechev
twitter.com/mgechev Request / HTML @mgechev
twitter.com/mgechev Request / Loading Request scripts HTML JS @mgechev
twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML
JS @mgechev
twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML
JS @mgechev TTI LCP
twitter.com/mgechev Request / Loading Request scripts Loading Execute scripts HTML
JS @mgechev
twitter.com/ mgechev
@mgechev Sometimes the bundle just can’t get any smaller Minko
Gechev
@mgechev What if the server…was a browser?
twitter.com/mgechev Request / Run app on server HTML @mgechev Request
scripts JS
twitter.com/ mgechev
twitter.com/mgechev
twitter.com/mgechev @mgechev
@yourtwitter Angular Universal in Crunchbase Amanda Cifaldi Senior Staff Engineer
twitter.com/algcifaldi
Our Mission: Democratize access to company information and provide solutions
that guide our users to their next opportunities Angular Universal +
Our Mission: Democratize access to company information and provide solutions
that guide our users to their next opportunities Angular Universal +
Our Mission: Democratize access to company information and provide solutions
that guide our users to their next opportunities
some pages took seconds to load 20 20 But...
// TODO: // access + information => // opportunities?
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
None
biggest funding rounds this year
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
biggest funding rounds this year
First wave: Crawls any source that can be requested and
any links in that source
Second wave: Renders and crawls JS- generated content, and can
be hours or weeks behind the first
https://www.crunchbase.com
recent series a funding in sf tech
None
recent series a funding in sf tech 70% organic traffic
recent series a funding in sf tech
None
recent series a funding in sf tech
recent series a funding in sf tech data science companies
in new york
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
2K pages per minute
2K pages per minute 1M visitors per week
2K pages per minute 1M visitors per week 6 continents
served
2K pages per minute 1M visitors per week 6 continents
served 150 milliseconds per request
None
Our Mission: Democratize access to company information and provide solutions
that guide our users to their next opportunities Angular Universal +
@mgechev Challenges with Universal • Change-refresh time • Deployment
@yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:serve-ssr New
in v9!
@yourtwitter $ ng update @nguniversal/express-engine
twitter.com/mgechev @ManfredSteyer @AlanAgius4 @mgechev
twitter.com/mgechev Deployment
twitter.com/ mgechev New in @angular/fire
New in @angular/fire
twitter.com/ mgechev New in @angular/fire
twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run
app on server LCP
twitter.com/mgechev Request / HTML @mgechev Request scripts JS TTI Run
app on server LCP If not cached Return from the cache Cache LCP
@mgechev Prerendering
@yourtwitter $ ng add @nguniversal/express-engine $ ng run [PROJECT_NAME]:prerender Using
Universal at build-time New in v9!
@mgechev Building the app Prerendering <2s for 800 pages ng
run app:prerender
twitter.com/mgechev
twitter.com/mgechev @mgechev JAMStack By HeroDevs
twitter.com/mgechev @mgechev
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk