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
0
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
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
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
11k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
技術同人誌をMCP Serverにしてみた
74th
1
630
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
童醫院敏捷轉型的實踐經驗
cclai999
0
210
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
420
GraphRAGの仕組みまるわかり
tosuri13
8
530
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
Six Lessons from altMBA
skipperchong
28
3.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Raft: Consensus for Rubyists
vanstee
140
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing for humans not robots
tammielis
253
25k
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