Angular Performance - State of Affairs 2018 -- Slides from JAX 2018, April 2018 in Mainz

@ManfredSteyer Performance Tuning for Angular State of affairs 2018 Manfred
Steyer SOFTWAREarchitekt.at

@ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular
Trainings and Consultancy (Public and In-House) • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer

@ManfredSteyer Turbo Button

@ManfredSteyer Quick Wins Bundling Minification enableProdMode()

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

@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 DEMO

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

@ManfredSteyer Activate Preloading Page ▪ 17 … 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 • observable$ | async • 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 Production Mode without AOT

ManfredSteyer Production Mode with AOT

@ManfredSteyer Bundles without AOT and Tree Shaking JIT Compiler

@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' })

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

@ManfredSteyer AOT is stricter than JIT !

@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!

@ManfredSteyer Treeshakable Providers (Angular >= 6)

@ManfredSteyer Traditional Providers are not Treeshakable! @NgModule({ […], providers: [
LoggerService, { provide: LogFormatterService, useClass: AdvancedLoggerFormatterService } ], […] }) export class AppModule { }

@ManfredSteyer Traditional Providers are not Treeshakable! AppModule Module Service

@ManfredSteyer Treeshakable Providers @Injectable({ providedIn: 'root' }) export class LoggerService
{ […] }

@ManfredSteyer Treeshakable Providers @Injectable({ providedIn: MyModule }) export class LoggerService
{ […] } Only lazy modules have own DI Scope!

@ManfredSteyer Treeshakable Providers and Token @Injectable({ providedIn: 'root', useClass: AdvancedLogFormatterService
}) export class LogFormatterService { […] }

@ManfredSteyer ngIvy Outlook

@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

@ManfredSteyer // GENERATED CODE (you don't write this) viewDef([ elementDef(0,
'div', ['class', 'greeting'], null, ...); textDef('Hello, world!', ...); ]); <div class="greeting"> Hello, world! </div> [Source: Green, Erickson, Hevery: ngconf 2018 Keynote, https://tinyurl.com/y7t4sfzu]

25 Kb 20 Kb 10 Kb 5 Kb 0 30
Kb 10 Kb 7.3 Kb 2.7 Kb Cake Goal Minified Compressed Cake Threshold 36 Kb Current (compressed) (no-zone.js) Hello World [Source: Green, Erickson, Hevery: ngconf 2018 Keynote, https://tinyurl.com/y7t4sfzu]

@ManfredSteyer

@ManfredSteyer Beyond Tree Shaking

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

@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!");

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

@ManfredSteyer Removing Whitespaces

@ManfredSteyer Removing Whitespaces <p> Hello</p> <p>World! </p>

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

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

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

@ManfredSteyer Caching with Service Worker

@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

@ManfredSteyer DEMO

@ManfredSteyer Server Side Rendering

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

@ManfredSteyer renderModuleFactory […] renderModuleFactory(moduleFactory, { document: indexFileContentsAsString, url: options.req.url })
.then(htmlString => { […] }); […] 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 Conclusion Quick Wins Lazy Loading and Preloading OnPush w/
Immutables and Observables AOT and Tree Shaking Treeshakable Providers ngIvy Pipeable Rx-Operators Server Side Rendering

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

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

Angular Performance - State of Affairs 2018 -- ...

Angular Performance - State of Affairs 2018 -- Slides from JAX 2018, April 2018 in Mainz

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript