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
Angular Performance Workshop, ngconf 2018, Salt...
Search
Manfred Steyer
PRO
April 19, 2018
Programming
0
420
Angular Performance Workshop, ngconf 2018, Salt Lake City
Slides from my Workshop
Manfred Steyer
PRO
April 19, 2018
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
9
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
PicoRuby on Rails
makicamel
2
130
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
660
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
51
33k
GraphRAGの仕組みまるわかり
tosuri13
8
530
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Invisible Side of Design
smashingmag
301
51k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Balancing Empowerment & Direction
lara
1
420
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing for Performance
lara
610
69k
Site-Speed That Sticks
csswizardry
10
680
Transcript
ManfredSteyer Angular Performance Workshop Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2
ManfredSteyer Turbo Button
ManfredSteyer Quick Wins Bundling Minification enableProdMode()
ManfredSteyer Contents • Lazy Loading and Preloading • Performance for
Data Binding with OnPush • AOT and Tree Shaking • Caching with Service Worker • Server Side Rendering
ManfredSteyer Schedule • ~ 30 Minutes: Presentation • Rest: Labs
ManfredSteyer Lazy Loading
ManfredSteyer Module Structure Page ▪ 8 AppModule … … …
SharedModule Root Module Feature Modules Shared Module
ManfredSteyer Lazy Loading Page ▪ 9 AppModule … … …
SharedModule Root Module Feature Modules Shared Module
ManfredSteyer Root Module with Lazy Loading Page ▪ 10 const
APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
ManfredSteyer Routes for "lazy" Module Page ▪ 11 const FLIGHT_ROUTES
= [ { path: '', component: FlightBookingComponent, […] }, […] }
ManfredSteyer Routes for "lazy" Module Page ▪ 12 const FLIGHT_ROUTES
= [ { path: 'subroute', component: FlightBookingComponent, […] }, […] } flight-booking/subroute Triggers Lazy Loading w/ loadChildren
ManfredSteyer DEMO
ManfredSteyer Lazy Loading • Lazy Loading means: Loading it later
• Better startup performance • Delay during execution for loading on demand
ManfredSteyer Preloading
ManfredSteyer Idea • Module that might be needed later are
loaded after the application started • When module is needed it is available immediately Page ▪ 17
ManfredSteyer Activate Preloading Page ▪ 18 … imports: [ […]
RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); ] …
ManfredSteyer Performance- Tuning with OnPush
ManfredSteyer DEMO
ManfredSteyer OnPush flights flight flight {{ flight.id }} {{ flight.id
}} FlightSearch Card Card Angular just checks when “notified”
ManfredSteyer "Notify" about change? • Change bound data (@Input) •
OnPush: Angular just compares the object reference! • e. g. oldFlight === newFlight • Raise event within the component • Notify a bound observable • Trigger it manually • Don't do this at home ;-) • At least: Try to avoid this
ManfredSteyer Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class
FlightCard { […] @Input() flight; }
ManfredSteyer DEMO
ManfredSteyer Ahead of Time (AOT) Compilation
ManfredSteyer Angular Compiler HTML Template JavaScript Template Compiler
ManfredSteyer Approaches • JIT: Just in Time, at runtime •
AOT: Ahead of Time, during build
ManfredSteyer Advantages of AOT • Better Startup-Performance • Smaller Bundles:
You don't need to include the compiler! • Tools can easier analyse the code • Remove unneeded parts of frameworks • Tree Shaking
ManfredSteyer Angular CLI • ng build --prod • @ngtools/webpack with
AngularCompilerPlugin • Can be used without CLI too
ManfredSteyer
ManfredSteyer
ManfredSteyer Bundles without AOT and Tree Shaking JIT Compiler
ManfredSteyer Caching with Service Worker
ManfredSteyer Service Worker Browser Web Application Service Worker
ManfredSteyer Service Worker Browser Service Worker Request Response Cache Same
Origin Policy Under your control!
@BASTAcon & @ManfredSteyer Abstractions for your Service Worker @angular/service-worker
ManfredSteyer Server Side Rendering
ManfredSteyer Why Server Side Rendering? Prerender 1st Page Start up
performance Consumer
ManfredSteyer renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url })
.then(string => { […] }); […] Available since Angular 4.0
ManfredSteyer
ManfredSteyer Challenges Other conditions Separate Services for Server and Client-Seite
Renderer abstracts DOM 3rd parts libs Angular 5: Server Side DOM Simulation (partly)
ManfredSteyer More about this in my Medium Account • Configuration
Details, Samples etc. • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25
ManfredSteyer Conclusion Quick Wins Lazy Loading and Preloading OnPush w/
Immutables and Observables AOT and Tree Shaking Caching w/ Service Worker Server Side Rendering
ManfredSteyer Lab • Start with „Getting Started“ • Do the
rest in any order you want • Probably more exercises than enough for ~ 1.5 hrs • Focus on your interests • http://bit.ly/ng-conf-18-perf