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
160
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
130
Fast Angular Apps from End to End
mgechev
0
150
The State of Angular
mgechev
1
170
The State of Angular
mgechev
1
290
Software Engineering as a Superpower
mgechev
1
150
Introduction to Angular
mgechev
1
150
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.8k
The Future of the Front-End Frameworks
mgechev
2
290
Other Decks in Programming
See All in Programming
テストケースの名前はどうつけるべきか?
orgachem
PRO
1
170
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
210
快速入門可觀測性
blueswen
0
470
Flatt Security XSS Challenge 解答・解説
flatt_security
0
370
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
520
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
220
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
650
Spatial Rendering for Apple Vision Pro
warrenm
0
310
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
130
선언형 UI에서의 상태관리
l2hyunwoo
0
250
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
120
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
480
What's in a price? How to price your products and services
michaelherold
244
12k
Code Review Best Practice
trishagee
65
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Building Your Own Lightsaber
phodgson
104
6.1k
Navigating Team Friction
lara
183
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
The Cult of Friendly URLs
andyhume
78
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Docker and Python
trallard
43
3.2k
Scaling GitHub
holman
459
140k
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