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
200
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
180
Fast Angular Apps from End to End
mgechev
1
180
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
360
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
200
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
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
190
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
500
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
860
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
ニーリーにおけるプロダクトエンジニア
nealle
0
870
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Team operations that are not burdened by SRE
kazatohiei
1
320
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
19k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
790
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Applications with DynamoDB
mza
95
6.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
GitHub's CSS Performance
jonrohan
1031
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Scaling GitHub
holman
460
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
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