Performance for Angular - New Possibilities and Proven Classics @AngularDays in Berlin, Oct 2018

@BASTAcon & @ManfredSteyer Performance for Angular New Possibilities and Proven
Classics Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

@BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at
• Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer Public: Vienna, München, Zürich In-House: everywhere http://softwarearchitekt.at/workshops

@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 Routes for "lazy" Module Page ▪ 12
const FLIGHT_ROUTES = [ { path: 'subroute', component: FlightBookingComponent, […] }, […] } flight-booking/subroute Triggers Lazy Loading w/ loadChildren

@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 ▪ 17

@BASTAcon & @ManfredSteyer Activate Preloading Page ▪ 18 … 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 Bundles without AOT and Tree Shaking JIT
Compiler

@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 Angular Build Optimizer makes code more treeshakable
(default since CLI 1.5)

@BASTAcon & @ManfredSteyer Treeshakable Providers >= Angular 6

@BASTAcon & @ManfredSteyer Classical Providers @NgModule({ [...] providers: [ FlightService
], [...] }) export class Module { }

@BASTAcon & @ManfredSteyer

@BASTAcon & @ManfredSteyer Service Page ▪ 42 @Injectable({ providedIn: 'root'
}) export class FlugService { […] } Globaler Scope

@BASTAcon & @ManfredSteyer Alternative Page ▪ 43 @Injectable({ providedIn: LazyApiModule
}) export class FlugService { […] } Macht nur mit Lazy Loading sinn!! Service wird mit lazy Module mitgeladen

@BASTAcon & @ManfredSteyer ngIvy Outlook

@BASTAcon & @ManfredSteyer Further improvements in upcoming versions New Compiler/
View Engine More treeshakable Code No Breaking Changes Experimental with Angular 6

@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 RxJS is huge

@BASTAcon & @ManfredSteyer RxJS • We don't need every operator/
method • But: Methods are not tree-shakable for CLI/ webpack and others • Solution: Just import methods you need • Imports are patching Observable

@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 ng add @angular/pwa

@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(htmlString => { […] }); […] Available since Angular 4.0

@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] [web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples

Performance for Angular - New Possibilities and Proven Classics @AngularDays in Berlin, Oct 2018

Performance for Angular - New Possibilities and Proven Classics @AngularDays in Berlin, Oct 2018

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript