Angular Performance Tuning - State of affairs (Director's Cut)

@BASTAcon & @ManfredSteyer Performancetuning for Angular State of affairs Manfred
Steyer SOFTWAREarchitekt.at

@BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at
• Angular Trainings and Consultancy • Google Developer Expert (GDE) • Microsoft MVP Page ▪ 3 Manfred Steyer

@BASTAcon & @ManfredSteyer Turbo Button

@BASTAcon & @ManfredSteyer Quick Wins Bundling Minification enableProdMode()

@BASTAcon & @ManfredSteyer Contents • Lazy Loading • Performance for
Data Binding with OnPush • AOT and Tree Shaking • New and upcoming features • Caching with Service Worker • Serverside Rendering

@BASTAcon & @ManfredSteyer Lazy Loading

@BASTAcon & @ManfredSteyer Module Structure Page ▪ 8 AppModule …
… … SharedModule Root Module Feature Modules Shared Module

@BASTAcon & @ManfredSteyer Lazy Loading Page ▪ 9 AppModule …
… … SharedModule Root Module Feature Modules Shared Module

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

@BASTAcon & @ManfredSteyer Routes for "lazy" Module Page ▪ 11
const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, […] }, […] }

@BASTAcon & @ManfredSteyer DEMO

@BASTAcon & @ManfredSteyer Preloading

@BASTAcon & @ManfredSteyer Idea • Module that might be needed
later are loaded after the application started • When module is needed it is available immediately Page ▪ 16

@BASTAcon & @ManfredSteyer Activate Preloading Page ▪ 17 … imports:
[ […] RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); ] …

@BASTAcon & @ManfredSteyer Performance- Tuning with OnPush

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

@BASTAcon & @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 • observable$ | async • Trigger it manually • Don't do this at home ;-) • At least: Try to avoid this

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

@BASTAcon & @ManfredSteyer Ahead of Time (AOT) Compilation

@BASTAcon & @ManfredSteyer Angular Compiler HTML Template JavaScript Template Compiler

@BASTAcon & @ManfredSteyer Approaches • JIT: Just in Time, at
runtime • AOT: Ahead of Time, during build

@BASTAcon & @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

@BASTAcon & @ManfredSteyer Angular CLI • ng build --prod •
@ngtools/webpack with AngularCompilerPlugin • Can be used without CLI too

@BASTAcon & @ManfredSteyer Flight Search (Prod Build w/o AOT) Production
Mode without AOT (no lazy loading)

@BASTAcon & @ManfredSteyer Production Mode with AOT (no lazy loading)

@BASTAcon & @ManfredSteyer Bundles without AOT and Tree Shaking JIT
Compiler

@BASTAcon & @ManfredSteyer Getting rid of zone.js (since Angular 5)
• Consequence: You need to do change detection manually • Not fun ;-) Don't do this (carelessly)! • Ideas to solve this, e. g. observable$ | somePipe • Credits to Jeremy Wilken from the Angular Universal Team • Dreams of the (near) future? platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })

@BASTAcon & @ManfredSteyer Angular Build Optimizer makes code more treeshakable
(default since CLI 1.5)

@BASTAcon & @ManfredSteyer AOT is stricter than JIT !

@BASTAcon & @ManfredSteyer Solutions Angular Language Service • Plugins for
IDEs AOT for debugging • Possible since Angular 5 • Incremental AOT • Fast after 1st recompilation • ng serve --aot • Give it a try!

@BASTAcon & @ManfredSteyer Treeshakable Providers (ng6) Outlook

@BASTAcon & @ManfredSteyer Global Providers (nowadays) @NgModule([ […], providers: [
{ provide: Service, useClass: AdvancedService } ] ]) export class MyModule { } Not treeshakable!

@BASTAcon & @ManfredSteyer Option in v6 @Injectable({ scope: MyModule, useClass:
AdvancedService }) export class Service { } Option / No braking change!

@BASTAcon & @ManfredSteyer ngIvy Outlook

@BASTAcon & @ManfredSteyer Further improvements in upcoming versions New View
Engine ngIvy: More treeshakable Code No Breaking Changes "Early numbers are extremely promising in terms of code size" -- Rob Wormald Experimental with Angular 6

@BASTAcon & @ManfredSteyer

@BASTAcon & @ManfredSteyer Beyond Tree Shaking

@BASTAcon & @ManfredSteyer Google Closure Compiler Aggressive Optimizations E2E-Test necessary
Expert Tool Difficult to configure! Office 365 Google Docs, etc.

@BASTAcon & @ManfredSteyer Sample class Stuff { static stuff(data: string)
{ console.log('stuff: ' + data); } } function stuff(data: string) { Stuff.stuff(data); } stuff('Hallo Welt!'); console.log("stuff: Hallo Welt!");

@BASTAcon & @ManfredSteyer ABC • Angular • Bazel = Build
Tool • Closure = Optimizing Compiler • Angular Labs Project == Experimental

@BASTAcon & @ManfredSteyer RxJS is huge

@BASTAcon & @ManfredSteyer Import Operators import 'rxjs/add/operator/map'; // Patch Observable
--> add map import 'rxjs/add/operator/filter'; this.http.get<Flight>(url) .filter(f => f.price < 300) .map(f => toFlightOffer(f)) .subscribe(…); Not treeshakable!

@BASTAcon & @ManfredSteyer Better Alternative: Pipeable Operators this.http.get<Flight>(url) .pipe( filter(f
=> f.price < 300), map(f => toFlightOffer(f)) ) .subscribe(…); import { map, filter } 'rxjs/operators';

@BASTAcon & @ManfredSteyer Removing Whitespaces

@BASTAcon & @ManfredSteyer Removing Whitespaces Hello World!

@BASTAcon & @ManfredSteyer Removing Whitespaces Hello World! \n
//Pseudo Code createNode('p', ' Hello World'); createNode('TEXT-NODE', '\n'); createNode('p', 'World!'); Template Compiler

@BASTAcon & @ManfredSteyer Removing Whitespaces @Component({ selector: 'flight-card', templateUrl: './flight-card.component.html',
styleUrls: ['./flight-card.component.css'], preserveWhitespaces: false }) export class FlightCardComponent { […] }

@BASTAcon & @ManfredSteyer Switching it on globally in tsconfig.app.json […]
"angularCompilerOptions": { "preserveWhitespaces": false } […]

@BASTAcon & @ManfredSteyer Caching with Service Worker

@BASTAcon & @ManfredSteyer Service Worker Browser Service-Worker Anfrage Antwort Cache
Same Origin Policy You control this!

@BASTAcon & @ManfredSteyer Two possible abstractions for Service Worker @angular/service-worker

@BASTAcon & @ManfredSteyer Server Side Rendering

@BASTAcon & @ManfredSteyer Why Server Side Rendering? Prerender 1st Page
Start up performance Consumer Apps

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

@BASTAcon & @ManfredSteyer

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

@BASTAcon & @ManfredSteyer Conclusion Quick Wins Lazy Loading and Preloading
OnPush w/ Immutables and Observables AOT and Tree Shaking Pipeable Rx-Operators Server Side Rendering Lean back: The ng team takes care!

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

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

Angular Performance Tuning - State of affairs (...

Angular Performance Tuning - State of affairs (Director's Cut)

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript