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
Search
Minko Gechev
May 07, 2020
Programming
1
210
The State of Angular
Minko Gechev
May 07, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
190
Fast Angular Apps from End to End
mgechev
1
190
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
370
Software Engineering as a Superpower
mgechev
1
200
Introduction to Angular
mgechev
1
210
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
The Future of the Front-End Frameworks
mgechev
2
320
Other Decks in Programming
See All in Programming
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
720
Rancher と Terraform
fufuhu
0
100
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
パスタの技術
yusukebe
1
400
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
490
Understanding Ruby Grammar Through Conflicts
yui_knk
1
120
decksh - a little language for decks
ajstarks
4
21k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Automating Front-end Workflow
addyosmani
1370
200k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
The World Runs on Bad Software
bkeepers
PRO
70
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Done Done
chrislema
185
16k
Transcript
@yourtwitter The State of Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
@yourtwitter https://unsplash.com/photos/rafblRbne3o
@mgechev v9.1 is out
@mgechev
@mgechev Smaller Faster builds Better debugging Better type checking Improved
build errors Simpler Improved i18n Improvements in Universal
@mgechev Smaller Faster builds Better debugging Better type checking Improved
build errors Simpler Improved i18n Improvements in Universal
Predictability vs Flexibility trade-offs Predictable Flexible
Static vs Dynamic trade-offs Static Dynamic
Static vs Dynamic trade-offs Static Dynamic
• Great compile-time optimizations • Excellent IDE/text editor support •
Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic
• Great compile-time optimizations • Excellent IDE/text editor support •
Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic
• Great compile-time optimizations • Excellent IDE/text editor support •
Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic 2.0 4.0
• Great compile-time optimizations • Excellent IDE/text editor support •
Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic 4.0 9.0
• Great compile-time optimizations • Excellent IDE/text editor support •
Strict type checking • Source code visualization • Lazy component loading • Dynamic UI assembling • Fast builds Static Dynamic 9.0
@mgechev So, Angular is now more dynamic!
@mgechev …but not too dynamic
@mgechev • Do something • Collect feedback • Adjust direction
“Gradient descent” optimization
@mgechev • Do something • Collect feedback • Adjust direction
“Gradient descent” optimization
twitter.com/mgechev @mgechev
@mgechev Google Community
@mgechev
@mgechev Faster builds -40%
@mgechev VE @Component({ selector: 'app', template: ' ...' }) class
AppComponent { ... } app.ngfactory.js app.ngsummary.json app.metadata.json app.component.js app.component.d.ts
@mgechev Ivy @Component({ selector: 'app', template: ' ...' }) class
AppComponent { ... } app.component.js app.component.d.ts
@mgechev Faster builds • We do less work • No
longer generate factories • ngcc does this once* • No longer using metadata.json • Incremental AoT builds
@mgechev Faster builds • We do less work • No
longer generate factories • ngcc does this once* • No longer using metadata.json • Incremental AoT builds AoT in development
@mgechev
@mgechev
@mgechev
@mgechev Smaller bundles • Less generated code • Smaller framework
@mgechev Smaller framework • Tree-shakable instructions • No need for
ngfactory machinery
@mgechev Improved i18n
Angular compile-time i18n (v2-v8) src lib Link & optimize ngc
ngc l10n l10n l10n l10n
Angular compile-time i18n (v2-v8) src lib Link & optimize ngc
ngc l10n l10n repeat
@mgechev Focused on static optimizations • Generate app at compile-time:
• No runtime binding overhead • Smaller bundles: • Localizations are hard to tree-shake • No need for binding instructions
Angular compile-time i18n (Ivy) src lib Link & optimize l10n
repeat ngc
@mgechev 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