Fastest SPA in all Mexico: Performance Tuning with Angular

Slide 1

Slide 1 text

Fastest SPA in all Mexico: Angular Performance Tuning

Slide 2

Slide 2 text

About me… • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer

Slide 3

Slide 3 text

Turbo Button

Slide 4

Slide 4 text

Quick Wins Bundling Minification enableProdMode()

Slide 5

Slide 5 text

Contents • Lazy Loading and Preloading • Performance for Data Binding with OnPush • AOT and Tree Shaking • Caching with Service Worker

Slide 6

Slide 6 text

Lazy Loading

Slide 7

Slide 7 text

Module Structure Page ▪ 9 AppModule … … … SharedModule Root Module Feature Modules Shared Module

Slide 8

Slide 8 text

Lazy Loading Page ▪ 10 AppModule … … … SharedModule Root Module Feature Modules Shared Module

Slide 9

Slide 9 text

Root Module with Lazy Loading Page ▪ 11 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];

Slide 10

Slide 10 text

Routes for "lazy" Module Page ▪ 12 const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }

Slide 11

Slide 11 text

Routes for "lazy" Module Page ▪ 13 const FLIGHT_ROUTES = [ { path: 'subroute', component: FlightBookingComponent, […] }, […] } flight-booking/subroute Triggers Lazy Loading w/ loadChildren

Slide 12

Slide 12 text

DEMO

Slide 13

Slide 13 text

Lazy Loading • Lazy Loading means: Loading it later • Better startup performance • Delay during execution for loading on demand

Slide 14

Slide 14 text

Preloading

Slide 15

Slide 15 text

Idea • Module that might be needed later are loaded after the application started • When module is needed it is available immediately Page ▪ 17

Slide 16

Slide 16 text

Activate Preloading Page ▪ 18 … imports: [ […] RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); ] …

Slide 17

Slide 17 text

Performance- Tuning with OnPush

Slide 18

Slide 18 text

DEMO

Slide 19

Slide 19 text

OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Angular just checks when “notified”

Slide 20

Slide 20 text

"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

Slide 21

Slide 21 text

Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }

Slide 22

Slide 22 text

Change Inputs flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card flightold === flightnew

Slide 23

Slide 23 text

Observables and OnPush

Slide 24

Slide 24 text

DEMO

Slide 25

Slide 25 text

Ahead of Time (AOT) Compilation

Slide 26

Slide 26 text

Angular Compiler HTML Template JavaScript Template Compiler

Slide 27

Slide 27 text

Approaches • JIT: Just in Time, at runtime • AOT: Ahead of Time, during build

Slide 28

Slide 28 text

Advantages of AOT • Better Startup-Performance • Smaller Bundles: You don't need to include the compiler! • Tools can easier analyse the code • Remove not needed parts of frameworks • Tree Shaking

Slide 29

Slide 29 text

Angular CLI • ng build --prod • @ngtools/webpack with AotPlugin • Soon AngularCompilerPlugin • Can be used without CLI too

Slide 30

Slide 30 text

DEMO

Slide 31

Slide 31 text

Tree Shaking

Slide 32

Slide 32 text

Challenges • Most tree shaking tools are conservative • They just remove code when they are 100% sure • Very often, they aren't sure :-) • Solution: Angular Build Optimizer • Rewrites compiled code • Currently: Experimental

Slide 33

Slide 33 text

Sample Application w/ Angular Material

Slide 34

Slide 34 text

Caching with Service Worker

Slide 35

Slide 35 text

What are Service Workers? • Background Tasks • Web App installs them • Are activated and deactivated on demand

Slide 36

Slide 36 text

Service Worker und Caching/ Offline • Intercept requests • Decide how to respond (Cache, Network) • Same Origin Policy • Caching Patterns • Cache only • Network only • Try cache first, then network • Try network first, then cache • etc.

Slide 37

Slide 37 text

Angular 5: ServiceWorkerModule

Slide 38

Slide 38 text

Service Worker with Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new WorkboxSW();

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Service Worker with Workbox (sw.js) importScripts('./assets/workbox-sw.js'); const workboxSW = new WorkboxSW(); const networkFirst = workboxSW.strategies.networkFirst(); const cacheFirst = workboxSW.strategies.cacheFirst(); workboxSW.router.registerRoute( new RegExp('^http:\/\/www.angular.at\/api\/'), networkFirst); workboxSW.router.registerRoute(/./, cacheFirst);

Slide 41

Slide 41 text

DEMO

Slide 42

Slide 42 text

Server Side Rendering

Slide 43

Slide 43 text

Why Server Side Rendering? Prerender 1st Page Start up performance Consumer

Slide 44

Slide 44 text

renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url }) .then(string => { […] }); […] Available since Angular 4.0

Slide 45

Slide 45 text

DEMO

Slide 46

Slide 46 text

Challenges Other conditions Separate Services for Server and Client-Seite Renderer abstracts DOM 3rd parts libs Angular 5: Server Side DOM Simulation (partly)

Slide 47

Slide 47 text

More about this in my Medium Account • Configuration Details, Samples etc. • https://medium.com/@ManfredSteyer/angular-performance-tuning- article-series-6e3c33707b25

Slide 48

Slide 48 text

Conclusion Quick Wins Lazy Loading and Preloading OnPush w/ Immutables and Observables AOT and Tree Shaking Caching w/ Service Worker

Slide 49

Slide 49 text

Contact and Downloads [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer