SlideShare a Scribd company logo
Small computers, big performance:
Optimize your Angular
Speakers
David Barreto
Andrew Smith
Agenda
1. Ahead of Time Compilation
2. Lazy Loading
3. Change Detection
4. Memory Leaks
5. Server Side Rendering
Rangle Academy
Goal and Structure:
Program to share knowledge within the company
It follows a "workshop" structure
Usually 2 hours long
Covers hard and soft skills
Some workshops available:
Webpack
React
React Native
Google Analytics
Unit Testing
Introduction to Payment Gateways
Continuous Delivery to Production
Conflict Management
About the Demo App
Characteristics:
Built using Angular 2.4.1
Uses Angular CLI beta-26
Redux store with ngrx
Tachyons for CSS
Server side rendering with Universal
All the numbers shown are based on:
Low end device emulation (5x slowdown)
Good 3G connection emulation
Ahead of Time Compilation (AoT)
Compilation Modes
Just in Time Compilation (JiT):
Compilation performed in the browser at run time
Bigger bundle size (includes the compiler)
Takes longer to boot the app
$ ng serve --prod
Ahead of Time Compilation (AoT):
Compilation performed in the server at build time
Smaller bundle size (doesn't include the compiler)
The app boots faster
$ ng serve --prod --aot
Angular performance slides
Angular performance slides
JiT vs AoT in Demo App (Prod + Gzip)
CSS files are included in the "other js files"
File Size (JiT) Size (AoT)
main.bundle.js 6.4 KB 23.9 KB
vendor.bundle.js 255 KB 158 KB
other js files 48.7 KB 49.6 KB
Total Download 306 KB 231.5 KB
AoT goals (from the ):docs
Faster rendering => Components already compiled
Fewer async request => Inline external HTML and CSS
Smaller bundle size => No compiler shipped
Detect template errors => Because they can
Better security => Prevents script injection attack
Boot Time Comparison
Event Time (JiT) Time (AoT)
DOM Content Loaded 5.44 s 3.25 s
Load 5.46 s 3.27 s
FMP 5.49 s 3.30 s
DOM Content Loaded:
The browser has finished parsing the DOM
jQuery nostalgia => $(document).ready()
Load: All the assets has been downloaded
First Meaningful Paint (FMP):
When the user is able to see the app "live" for the first time
(Show browser profile for both modes)
Lazy Loading
What is Lazy Loading?
Ability to load modules on demand => Useful to reduce the app startup time
(Compare branches no-lazy-loading vs normal-lazy-loading )
Bundle Sizes Comparison (Prod + AoT)
File Size (No LL) Size (LL)
main.bundle.js 23.9 KB 17.4 KB
vendor.bundle.js 158 KB 158 KB
other js files 49.6 KB 49.6 KB
Initial Download 231.5 KB 225 KB
0.chunk.js - 9.1 KB
Total Download 231.5 KB 234.1 KB
Webpack creates a "chunk" for every lazy loaded module
The file 0.chunk.js is loaded when the user navigates to admin
The initial download size is smaller with LL
The total size over time is bigger with LL because of Webpack async loading
The effect of LL start to be noticeable when the app grows
Boot Time Comparison (Prod + AoT)
Event Time (No LL) Time (LL)
DOM Content Loaded 3.25 s 3.11 s
Load 3.27 s 3.25 s
FMP 3.30 s 3.16 s
Not much difference for an small app
Just one lazy loaded module with a couple of components
The impact is noticeable for big apps
How to Enable Lazy Loading? (1/4)
Step 1: Organize your code into modules
$ tree src/app -L 1
src/app
├── admin/
├── app-routing.module.ts
├── app.component.ts
├── app.module.ts
├── core/
├── public/
└── shared/
CoreModule provides all the services and the Redux store
SharedModule provides all the reusable components, directives or pipes
PublicModule provides the components and routing of the public section of the app
AdminModule provides the components and routing of the private section of the app
AppModule root module
(Show modules in the IDE)
How to Enable Lazy Loading (2/4)
Step 2: Create a routing module for lazy loaded module
const routes: Routes = [{
path: '',
component: AdminComponent,
children: [
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: WorkshopListComponent },
{ path: 'new', component: WorkshopEditorComponent },
{ path: 'edit/:id', component: WorkshopEditorComponent },
]
}];
@NgModule({
imports: [ RouterModule.forChild(routes) ],
exports: [ RouterModule ],
})
export class AdminRoutingModule {}
Always use the method forChild when importing the RouterModule
Avoids duplication of services in the child injector
How to Enable Lazy Loading (3/4)
Step 3: Define a child <router-outlet> to render child routes
@Component({
selector: 'rio-admin',
template: `
<nav>
<a routerLink="./list">List Workshops</a>
<a routerLink="./new">Create Workshop</a>
</nav>
<router-outlet></router-outlet>
`,
})
export class AdminComponent {}
How to Enable Lazy Loading (4/4)
Step 4: Use the property loadChildren to lazy load the module
export const routes: Routes = [{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canActivate: [ AuthGuardService ],
}];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ],
})
export class AppRoutingModule {}
Only in the root module use the forRoot method of RouterModule
Never import a lazy loaded in this file, use a string as reference
The path of loadChildren is not relative to the file, but to the index.html file
(Show routes in the IDE and URL structure of the app)
Preloading
(Compare branches normal-lazy-loading vs master )
Enable Preloading
Define the property preloadingStrategy in the root module routing
import { PreloadAllModules } from '@angular/router';
export const routes: Routes = [ ... ];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
})
],
exports: [ RouterModule ],
})
export class AppRoutingModule {}
Change Detection
What's Change Detection (CD)?
It's a mechanism to keep our "models" in sync with our "views"
Change detection is fired when...
The user interacts with the app (click, submit, etc.)
An async event is completed (setTimeout, promise, observable)
When CD is fired, Angular will check every component starting from the top once.
Change Detection Strategy: OnPush
Angular offers 2 strategies:
Default: Check the entire component when CD is fired
OnPush: Check only relevant subtrees when CD is fired
OnPush Requirements:
Component inputs ( @Input ) need to be immutable objects
@Component({
selector: 'rio-workshop',
templateUrl: './workshop.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class WorkshopComponent {
@Input() workshop: Workshop;
@Input() isSummary = false;
}
View Example
Example: The Component Tree
Default Change Detection
OnPush Change Detection
Summary
What to do?
Apply the OnPush change detection on every component*
Never mutate an object or array, always create a a new reference ( )blog
// Don't
let addPerson = (person: Person): void => {
people.push(person);
};
// Do
let addPerson = (people: Person[], person: Person): Person[] => {
return [ ...people, person ];
};
Benefits:
Fewer checks of your components during Change Detection
Improved overall app performance
Memory Leaks
What's Memory Leak?
The increase of memory usage over time
What Causes Memory Leaks in Angular?
Main Source => Subscriptions to observables never closed
@Injectable()
export class WorkshopService {
getAll(): Observable<Workshop[]> { ... }
}
@Component({
selector: 'rio-workshop-list',
template: `
<div *ngFor="let workshop of workshops">
{{ workshop.title }}
</div>`
})
export class WorkshopListComponent implements OnInit {
...
ngOnInit() {
this.service.getAll().subscribe(workshops => this.workshops = workshops);
}
}
Manually Closing Connections
Before the element is destroyed, close the connection
@Component({
selector: 'rio-workshop-list',
template: `
<div *ngFor="let workshop of workshops">
{{ workshop.title }}
</div>`
})
export class WorkshopListComponent implements OnInit, OnDestroy {
...
ngOnInit() {
this.subscription = this.service.getAll()
.subscribe(workshops => this.workshops = workshops);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
The async Pipe
It closes the connection automatically when the component is destroyed
@Component({
selector: 'rio-workshop-list',
template: `
<div *ngFor="let workshop of workshops$ | async">
{{ workshop.title }}
</div>`
})
export class WorkshopListComponent implements OnInit {
ngOnInit() {
this.workshops$ = this.service.getAll();
}
}
This is the recommended way of dealing with Observables in your template!
The Http Service
Every method of the http services ( get , post , etc.) returns an observable
Those observables emit only one value and the connection is closed automatically
They won't cause memory leak issues
@Component({
selector: 'rio-workshop-list',
template: `
<div *ngFor="let workshop of workshops">
{{ workshop.title }}
</div>`
})
export class WorkshopListComponent implements OnInit {
...
ngOnInit() {
this.http.get('some-url')
.map(data => data.json())
.subscribe(workshops => this.workshops = workshops);
}
}
Emit a Limited Number of Values
RxJs provides operators to close the connection automatically
Examples: first() and take(n)
This won't cause memory leak issues even if getAll emits multiple values
@Component({
selector: 'rio-workshop-list',
template: `
<div *ngFor="let workshop of workshops">
{{ workshop.title }}
</div>`
})
export class WorkshopListComponent implements OnInit {
ngOnInit() {
this.service.getAll().first()
.subscribe(workshops => this.workshops = workshops);
}
}
Server Side Rendering
Angular Universal
Provides the ability to pre-render your application on the server
Much faster time to first paint
Enables better SEO
Enables content preview on social networks
Fallback support for older browsers
Use the as the base of your applicationuniversal-starter
What's Included
Suite of polyfills for the server
Server rendering layer
Preboot - replays your user's interactions after Angular has bootstrapped
State Rehydration - Don't lose your place when the application loads
Boot Time Comparison (Client vs Server)
Both environments include previous AoT and Lazy Loading enhancements
Event Time (Client) Time (Server)
DOM Content Loaded 3.11 s 411 ms
Load 3.25 s 2.88 s
FMP 3.16 s ~440 ms
*Times are on mobile over 3G
Universal Caveats
Cannot directly access the DOM
constructor(element: ElementRef, renderer: Renderer) {
renderer.setElementStyle(element.nativeElement, ‘font-size’, ‘x-large’);
}
Current solutions only cover Express and ASP.NET servers
Project will be migrated into the core Angular repo for v4
Summary
Performance Changes
Event JiT AoT Lazy Loading SSR
DOM Content Loaded 5.44 s 3.25 s 3.11 s 411 ms
Load 5.46 s 3.27 s 3.25 s 2.88 s
FMP 5.46 s 3.30 s 3.16 s ~440 ms
% Improvement (FMP) 39.6% 4.3% 86.1%
*Times are on mobile over 3G
Slides
https://github.com/rangle/angular-performance-meetup

More Related Content

What's hot

Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
Christoffer Noring
 
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
Squash Apps Pvt Ltd
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
Patrick Schroeder
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
Cynapsys It Hotspot
 
VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
David Ličen
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
Eyal Vardi
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Edureka!
 
Angular Material Design.pdf
Angular Material Design.pdfAngular Material Design.pdf
Angular Material Design.pdf
Knoldus Inc.
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
Cakra Danu Sedayu
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
Eyal Vardi
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - Components
WebStackAcademy
 
Angular 6 Form Validation with Material
Angular 6 Form Validation with MaterialAngular 6 Form Validation with Material
Angular 6 Form Validation with Material
Malika Munaweera
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Duy Khanh
 
Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of Angular
Knoldus Inc.
 
Angular
AngularAngular
Angular directives and pipes
Angular directives and pipesAngular directives and pipes
Angular directives and pipes
Knoldus Inc.
 

What's hot (20)

Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
 
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
 
Angular Material Design.pdf
Angular Material Design.pdfAngular Material Design.pdf
Angular Material Design.pdf
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - Components
 
Angular 6 Form Validation with Material
Angular 6 Form Validation with MaterialAngular 6 Form Validation with Material
Angular 6 Form Validation with Material
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of Angular
 
Angular
AngularAngular
Angular
 
Angular directives and pipes
Angular directives and pipesAngular directives and pipes
Angular directives and pipes
 

Viewers also liked

Angular 2 Component Communication - Talk by Rob McDiarmid
Angular 2 Component Communication - Talk by Rob McDiarmidAngular 2 Component Communication - Talk by Rob McDiarmid
Angular 2 Component Communication - Talk by Rob McDiarmid
Amrita Chopra
 
Angular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupAngular Optimization Web Performance Meetup
Angular Optimization Web Performance Meetup
David Barreto
 
Curso de AWK (David Barreto)
Curso de AWK (David Barreto)Curso de AWK (David Barreto)
Curso de AWK (David Barreto)
David Barreto
 
Metodología Scrum (Ing. David Barreto)
Metodología Scrum (Ing. David Barreto)Metodología Scrum (Ing. David Barreto)
Metodología Scrum (Ing. David Barreto)
David Barreto
 
Mlocjs buzdin
Mlocjs buzdinMlocjs buzdin
Mlocjs buzdin
Dmitry Buzdin
 
Robotic JavaScript
Robotic JavaScriptRobotic JavaScript
Robotic JavaScript
Nikolai Onken
 
GDG 2014 - RxJava를 활용한 Functional Reactive Programming
GDG 2014 - RxJava를 활용한 Functional Reactive Programming GDG 2014 - RxJava를 활용한 Functional Reactive Programming
GDG 2014 - RxJava를 활용한 Functional Reactive Programming
waynejo
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
Hakim El Hattab
 

Viewers also liked (8)

Angular 2 Component Communication - Talk by Rob McDiarmid
Angular 2 Component Communication - Talk by Rob McDiarmidAngular 2 Component Communication - Talk by Rob McDiarmid
Angular 2 Component Communication - Talk by Rob McDiarmid
 
Angular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupAngular Optimization Web Performance Meetup
Angular Optimization Web Performance Meetup
 
Curso de AWK (David Barreto)
Curso de AWK (David Barreto)Curso de AWK (David Barreto)
Curso de AWK (David Barreto)
 
Metodología Scrum (Ing. David Barreto)
Metodología Scrum (Ing. David Barreto)Metodología Scrum (Ing. David Barreto)
Metodología Scrum (Ing. David Barreto)
 
Mlocjs buzdin
Mlocjs buzdinMlocjs buzdin
Mlocjs buzdin
 
Robotic JavaScript
Robotic JavaScriptRobotic JavaScript
Robotic JavaScript
 
GDG 2014 - RxJava를 활용한 Functional Reactive Programming
GDG 2014 - RxJava를 활용한 Functional Reactive Programming GDG 2014 - RxJava를 활용한 Functional Reactive Programming
GDG 2014 - RxJava를 활용한 Functional Reactive Programming
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 

Similar to Angular performance slides

Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot
Xamarin
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2
Niti Chotkaew
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Julien Lecomte
 
Angular2 + rxjs
Angular2 + rxjsAngular2 + rxjs
Angular2 + rxjs
Christoffer Noring
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
Antônio Roberto Silva
 
Threads handlers and async task, widgets - day8
Threads   handlers and async task, widgets - day8Threads   handlers and async task, widgets - day8
Threads handlers and async task, widgets - day8
Utkarsh Mankad
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
Sapna Upreti
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
Ivano Malavolta
 
myslide1
myslide1myslide1
myslide1
Sandeep Putrevu
 
myslide6
myslide6myslide6
myslide6
Sandeep Putrevu
 
NewSeriesSlideShare
NewSeriesSlideShareNewSeriesSlideShare
NewSeriesSlideShare
Sandeep Putrevu
 
An approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSocketsAn approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSockets
Andrei Sebastian Cîmpean
 
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Frost
 
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkHow to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
RapidValue
 
Lecture 22
Lecture 22Lecture 22
Lecture 22
Debasish Pratihari
 
Improving the Accumulo User Experience
 Improving the Accumulo User Experience Improving the Accumulo User Experience
Improving the Accumulo User Experience
Accumulo Summit
 
How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30
fiyuer
 
ScalaUA - distage: Staged Dependency Injection
ScalaUA - distage: Staged Dependency InjectionScalaUA - distage: Staged Dependency Injection
ScalaUA - distage: Staged Dependency Injection
7mind
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
Paras Mendiratta
 
React loadable
React loadableReact loadable
React loadable
George Bukhanov
 

Similar to Angular performance slides (20)

Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Angular2 + rxjs
Angular2 + rxjsAngular2 + rxjs
Angular2 + rxjs
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
Threads handlers and async task, widgets - day8
Threads   handlers and async task, widgets - day8Threads   handlers and async task, widgets - day8
Threads handlers and async task, widgets - day8
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
 
myslide1
myslide1myslide1
myslide1
 
myslide6
myslide6myslide6
myslide6
 
NewSeriesSlideShare
NewSeriesSlideShareNewSeriesSlideShare
NewSeriesSlideShare
 
An approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSocketsAn approach to responsive, realtime with Backbone.js and WebSockets
An approach to responsive, realtime with Backbone.js and WebSockets
 
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
 
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkHow to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
 
Lecture 22
Lecture 22Lecture 22
Lecture 22
 
Improving the Accumulo User Experience
 Improving the Accumulo User Experience Improving the Accumulo User Experience
Improving the Accumulo User Experience
 
How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30
 
ScalaUA - distage: Staged Dependency Injection
ScalaUA - distage: Staged Dependency InjectionScalaUA - distage: Staged Dependency Injection
ScalaUA - distage: Staged Dependency Injection
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
 
React loadable
React loadableReact loadable
React loadable
 

Recently uploaded

Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
Stephanie Beckett
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
Michael Price
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
isBullShit
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
AimanAthambawa1
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
Zilliz
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 

Recently uploaded (20)

Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 

Angular performance slides

  • 1. Small computers, big performance: Optimize your Angular
  • 3. Agenda 1. Ahead of Time Compilation 2. Lazy Loading 3. Change Detection 4. Memory Leaks 5. Server Side Rendering
  • 4. Rangle Academy Goal and Structure: Program to share knowledge within the company It follows a "workshop" structure Usually 2 hours long Covers hard and soft skills Some workshops available: Webpack React React Native Google Analytics Unit Testing Introduction to Payment Gateways Continuous Delivery to Production Conflict Management
  • 5. About the Demo App Characteristics: Built using Angular 2.4.1 Uses Angular CLI beta-26 Redux store with ngrx Tachyons for CSS Server side rendering with Universal All the numbers shown are based on: Low end device emulation (5x slowdown) Good 3G connection emulation
  • 6. Ahead of Time Compilation (AoT)
  • 7. Compilation Modes Just in Time Compilation (JiT): Compilation performed in the browser at run time Bigger bundle size (includes the compiler) Takes longer to boot the app $ ng serve --prod Ahead of Time Compilation (AoT): Compilation performed in the server at build time Smaller bundle size (doesn't include the compiler) The app boots faster $ ng serve --prod --aot
  • 10. JiT vs AoT in Demo App (Prod + Gzip) CSS files are included in the "other js files" File Size (JiT) Size (AoT) main.bundle.js 6.4 KB 23.9 KB vendor.bundle.js 255 KB 158 KB other js files 48.7 KB 49.6 KB Total Download 306 KB 231.5 KB AoT goals (from the ):docs Faster rendering => Components already compiled Fewer async request => Inline external HTML and CSS Smaller bundle size => No compiler shipped Detect template errors => Because they can Better security => Prevents script injection attack
  • 11. Boot Time Comparison Event Time (JiT) Time (AoT) DOM Content Loaded 5.44 s 3.25 s Load 5.46 s 3.27 s FMP 5.49 s 3.30 s DOM Content Loaded: The browser has finished parsing the DOM jQuery nostalgia => $(document).ready() Load: All the assets has been downloaded First Meaningful Paint (FMP): When the user is able to see the app "live" for the first time (Show browser profile for both modes)
  • 13. What is Lazy Loading? Ability to load modules on demand => Useful to reduce the app startup time (Compare branches no-lazy-loading vs normal-lazy-loading )
  • 14. Bundle Sizes Comparison (Prod + AoT) File Size (No LL) Size (LL) main.bundle.js 23.9 KB 17.4 KB vendor.bundle.js 158 KB 158 KB other js files 49.6 KB 49.6 KB Initial Download 231.5 KB 225 KB 0.chunk.js - 9.1 KB Total Download 231.5 KB 234.1 KB Webpack creates a "chunk" for every lazy loaded module The file 0.chunk.js is loaded when the user navigates to admin The initial download size is smaller with LL The total size over time is bigger with LL because of Webpack async loading The effect of LL start to be noticeable when the app grows
  • 15. Boot Time Comparison (Prod + AoT) Event Time (No LL) Time (LL) DOM Content Loaded 3.25 s 3.11 s Load 3.27 s 3.25 s FMP 3.30 s 3.16 s Not much difference for an small app Just one lazy loaded module with a couple of components The impact is noticeable for big apps
  • 16. How to Enable Lazy Loading? (1/4) Step 1: Organize your code into modules $ tree src/app -L 1 src/app ├── admin/ ├── app-routing.module.ts ├── app.component.ts ├── app.module.ts ├── core/ ├── public/ └── shared/ CoreModule provides all the services and the Redux store SharedModule provides all the reusable components, directives or pipes PublicModule provides the components and routing of the public section of the app AdminModule provides the components and routing of the private section of the app AppModule root module (Show modules in the IDE)
  • 17. How to Enable Lazy Loading (2/4) Step 2: Create a routing module for lazy loaded module const routes: Routes = [{ path: '', component: AdminComponent, children: [ { path: '', redirectTo: 'list', pathMatch: 'full' }, { path: 'list', component: WorkshopListComponent }, { path: 'new', component: WorkshopEditorComponent }, { path: 'edit/:id', component: WorkshopEditorComponent }, ] }]; @NgModule({ imports: [ RouterModule.forChild(routes) ], exports: [ RouterModule ], }) export class AdminRoutingModule {} Always use the method forChild when importing the RouterModule Avoids duplication of services in the child injector
  • 18. How to Enable Lazy Loading (3/4) Step 3: Define a child <router-outlet> to render child routes @Component({ selector: 'rio-admin', template: ` <nav> <a routerLink="./list">List Workshops</a> <a routerLink="./new">Create Workshop</a> </nav> <router-outlet></router-outlet> `, }) export class AdminComponent {}
  • 19. How to Enable Lazy Loading (4/4) Step 4: Use the property loadChildren to lazy load the module export const routes: Routes = [{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', canActivate: [ AuthGuardService ], }]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ], }) export class AppRoutingModule {} Only in the root module use the forRoot method of RouterModule Never import a lazy loaded in this file, use a string as reference The path of loadChildren is not relative to the file, but to the index.html file (Show routes in the IDE and URL structure of the app)
  • 21. Enable Preloading Define the property preloadingStrategy in the root module routing import { PreloadAllModules } from '@angular/router'; export const routes: Routes = [ ... ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], exports: [ RouterModule ], }) export class AppRoutingModule {}
  • 23. What's Change Detection (CD)? It's a mechanism to keep our "models" in sync with our "views" Change detection is fired when... The user interacts with the app (click, submit, etc.) An async event is completed (setTimeout, promise, observable) When CD is fired, Angular will check every component starting from the top once.
  • 24. Change Detection Strategy: OnPush Angular offers 2 strategies: Default: Check the entire component when CD is fired OnPush: Check only relevant subtrees when CD is fired OnPush Requirements: Component inputs ( @Input ) need to be immutable objects @Component({ selector: 'rio-workshop', templateUrl: './workshop.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class WorkshopComponent { @Input() workshop: Workshop; @Input() isSummary = false; } View Example
  • 28. Summary What to do? Apply the OnPush change detection on every component* Never mutate an object or array, always create a a new reference ( )blog // Don't let addPerson = (person: Person): void => { people.push(person); }; // Do let addPerson = (people: Person[], person: Person): Person[] => { return [ ...people, person ]; }; Benefits: Fewer checks of your components during Change Detection Improved overall app performance
  • 30. What's Memory Leak? The increase of memory usage over time
  • 31. What Causes Memory Leaks in Angular? Main Source => Subscriptions to observables never closed @Injectable() export class WorkshopService { getAll(): Observable<Workshop[]> { ... } } @Component({ selector: 'rio-workshop-list', template: ` <div *ngFor="let workshop of workshops"> {{ workshop.title }} </div>` }) export class WorkshopListComponent implements OnInit { ... ngOnInit() { this.service.getAll().subscribe(workshops => this.workshops = workshops); } }
  • 32. Manually Closing Connections Before the element is destroyed, close the connection @Component({ selector: 'rio-workshop-list', template: ` <div *ngFor="let workshop of workshops"> {{ workshop.title }} </div>` }) export class WorkshopListComponent implements OnInit, OnDestroy { ... ngOnInit() { this.subscription = this.service.getAll() .subscribe(workshops => this.workshops = workshops); } ngOnDestroy() { this.subscription.unsubscribe(); } }
  • 33. The async Pipe It closes the connection automatically when the component is destroyed @Component({ selector: 'rio-workshop-list', template: ` <div *ngFor="let workshop of workshops$ | async"> {{ workshop.title }} </div>` }) export class WorkshopListComponent implements OnInit { ngOnInit() { this.workshops$ = this.service.getAll(); } } This is the recommended way of dealing with Observables in your template!
  • 34. The Http Service Every method of the http services ( get , post , etc.) returns an observable Those observables emit only one value and the connection is closed automatically They won't cause memory leak issues @Component({ selector: 'rio-workshop-list', template: ` <div *ngFor="let workshop of workshops"> {{ workshop.title }} </div>` }) export class WorkshopListComponent implements OnInit { ... ngOnInit() { this.http.get('some-url') .map(data => data.json()) .subscribe(workshops => this.workshops = workshops); } }
  • 35. Emit a Limited Number of Values RxJs provides operators to close the connection automatically Examples: first() and take(n) This won't cause memory leak issues even if getAll emits multiple values @Component({ selector: 'rio-workshop-list', template: ` <div *ngFor="let workshop of workshops"> {{ workshop.title }} </div>` }) export class WorkshopListComponent implements OnInit { ngOnInit() { this.service.getAll().first() .subscribe(workshops => this.workshops = workshops); } }
  • 37. Angular Universal Provides the ability to pre-render your application on the server Much faster time to first paint Enables better SEO Enables content preview on social networks Fallback support for older browsers Use the as the base of your applicationuniversal-starter
  • 38. What's Included Suite of polyfills for the server Server rendering layer Preboot - replays your user's interactions after Angular has bootstrapped State Rehydration - Don't lose your place when the application loads
  • 39. Boot Time Comparison (Client vs Server) Both environments include previous AoT and Lazy Loading enhancements Event Time (Client) Time (Server) DOM Content Loaded 3.11 s 411 ms Load 3.25 s 2.88 s FMP 3.16 s ~440 ms *Times are on mobile over 3G
  • 40. Universal Caveats Cannot directly access the DOM constructor(element: ElementRef, renderer: Renderer) { renderer.setElementStyle(element.nativeElement, ‘font-size’, ‘x-large’); } Current solutions only cover Express and ASP.NET servers Project will be migrated into the core Angular repo for v4
  • 42. Performance Changes Event JiT AoT Lazy Loading SSR DOM Content Loaded 5.44 s 3.25 s 3.11 s 411 ms Load 5.46 s 3.27 s 3.25 s 2.88 s FMP 5.46 s 3.30 s 3.16 s ~440 ms % Improvement (FMP) 39.6% 4.3% 86.1% *Times are on mobile over 3G