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
320
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
480
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
220
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
220
Other Decks in Programming
See All in Programming
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
340
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
340
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
400
Improving my own Ruby thereafter
sisshiki1969
1
150
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
180
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
820
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
310
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
ProxyによるWindow間RPC機構の構築
syumai
3
1k
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf 2023
tenderlove
30
1.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Become a Pro
speakerdeck
PRO
29
5.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
BBQ
matthewcrist
89
9.8k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Designing for Performance
lara
610
69k
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