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 Lake City
Search
Manfred Steyer
PRO
April 19, 2018
Programming
0
390
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
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Micro Frontends with Web Standards
manfredsteyer
PRO
0
220
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
190
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
150
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
95
NGRX Signal Store
manfredsteyer
PRO
0
200
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
91
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
480
Other Decks in Programming
See All in Programming
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
270
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.2k
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.4k
Understanding Ast By Looking
inouehi
0
120
品質が高いコードって何?Rev2.1
ickx
1
490
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.9k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
LPIXEL×CADDi_kaerururu
kaerururu
3
300
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.3k
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
Teambox: Starting and Learning
jrom
126
8.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Navigating Team Friction
lara
177
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Docker and Python
trallard
33
2.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
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