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
170
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
150
Fast Angular Apps from End to End
mgechev
1
160
The State of Angular
mgechev
1
180
The State of Angular
mgechev
1
310
Software Engineering as a Superpower
mgechev
1
160
Introduction to Angular
mgechev
1
170
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
The Future of the Front-End Frameworks
mgechev
2
300
Other Decks in Programming
See All in Programming
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
Rubyと自由とAIと
yotii23
6
1.8k
Formの複雑さに立ち向かう
bmthd
1
940
React 19アップデートのために必要なこと
uhyo
8
1.5k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
Better Code Design in PHP
afilina
0
180
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A better future with KSS
kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
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