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
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
Kiroで始めるAI-DLC
kaonash
2
610
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
AIコーディングAgentとの向き合い方
eycjur
0
280
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
testingを眺める
matumoto
1
140
はじめてのMaterial3 Expressive
ym223
2
880
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
For a Future-Friendly Web
brad_frost
180
9.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
Navigating Team Friction
lara
189
15k
How to Ace a Technical Interview
jacobian
279
23k
4 Signs Your Business is Dying
shpigford
184
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
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