SlideShare a Scribd company logo
Small computers, big performance:
Optimize your Angular
Speakers
David Barreto
Solutions Architect @ Rangle.io
Blog: david-barreto.com
Andrew Smith
Solutions Architect @ Rangle.io
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

Recommended for you

Ondemand scaling-aws
Ondemand scaling-awsOndemand scaling-aws
Ondemand scaling-aws

Amazon has been using and building workflow services for years now. They use Simple Workflow (SWF) internally to lay down OS and all required software onto a new Amazon server before it joins Amazon fleet. Every Amazon server being put in service is provisioned in a workflow using SWF. During this brown-bag session you will be taken through the example of real application which uses SWF.

Performance tests with Gatling
Performance tests with GatlingPerformance tests with Gatling
Performance tests with Gatling

Performance tests with Gatling are difficult for three main reasons: 1) The test environment must closely simulate production in terms of hardware, software, and load. 2) Proper infrastructure for monitoring, logging, and isolating tests is required. 3) Performance intuition can be wrong, so statistics like percentiles must be used rather than averages.

gatlingperformance tests
Javascript Promises/Q Library
Javascript Promises/Q LibraryJavascript Promises/Q Library
Javascript Promises/Q Library

The document discusses Javascript Promises and the Q library for handling asynchronous code. It explains what Promises are, how they avoid callback pyramids or "Pyramids of Doom", and how the Q library can be used to generate and control Promises. The Q library allows wrapping asynchronous functions in Promises and provides methods for chaining Promises together and handling errors across asynchronous operations.

javascript promises q nodejs node.js npm browser p
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 Angular Universal
All the numbers shown are based on:
Low end device (5x CPU slowdown)
Good 3G connection (Latency: 40ms, DL: 1.5 Mbps, UL: 750 Kbps)
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 Optimization Web Performance Meetup

Recommended for you

Non Blocking I/O for Everyone with RxJava
Non Blocking I/O for Everyone with RxJavaNon Blocking I/O for Everyone with RxJava
Non Blocking I/O for Everyone with RxJava

Intro to RxJava in a non blocking I/O context. My slides tend to make little sense without the talk ;-)

rxjava servlet reactive nonblocking
Legacy Code Kata v3.0
Legacy Code Kata v3.0Legacy Code Kata v3.0
Legacy Code Kata v3.0

A code kata in C# to help practice techniques for safely removing dependencies form legacy code and creating unit tests. Questions? Suggestions? Contact @dubmun.

code katakatalegacy code
Reactive programming with RxJava
Reactive programming with RxJavaReactive programming with RxJava
Reactive programming with RxJava

This document discusses RxJava, a library for composing asynchronous and event-based programs in Java. It introduces Observables as the core abstraction in RxJava, which are sequences that emit elements to observers. Operators like filter, map, and flatMap allow modifying and transforming Observables. As an example, it shows how to use RxJava to concurrently search for articles by ID, load each article, fetch like counts, and combine the results into a stream of articles. This is done by chaining flatMap operators to transform the stream of IDs into a stream of articles by asynchronously loading each part in parallel.

reactive-programmingrxjavarx
Angular Optimization Web Performance Meetup
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

Recommended for you

Jquery- One slide completing all JQuery
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery

This presentation contains all the major topics in jquery and enough to get complete information and practicals about jquery

jquerylearning
Concurrent Programming in Java
Concurrent Programming in JavaConcurrent Programming in Java
Concurrent Programming in Java

Concurrent Programming in Java discusses various approaches to concurrency in Java including threads, executors, fork/join, parallel streams, CompletableFuture, and RXJava. It explains challenges with threads like interference, deadlocks, and performance overhead. It then covers enhancements in Java 5+ including executors and concurrent collections. Later sections discuss functional-style concurrency with CompletableFuture and RXJava, which allow composing asynchronous operations without blocking.

threadsexecutorsrxjava
Legacy Dependency Kata v2.0
Legacy Dependency Kata v2.0Legacy Dependency Kata v2.0
Legacy Dependency Kata v2.0

Having trouble wrapping you mind around unit testing in legacy code? Practice this kata and you'll have a good understanding of some basics. Break dependencies, inject stubs, write meaningful tests. Refactor with confidence. Version 2 is a complete overhaul to make the kata more readable and usable.

software testingagile software developmentcode kata
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
Preloading
(Compare branches normal-lazy-loading vs master )

Recommended for you

HKG15-204: OpenStack: 3rd party testing and performance benchmarking
HKG15-204: OpenStack: 3rd party testing and performance benchmarkingHKG15-204: OpenStack: 3rd party testing and performance benchmarking
HKG15-204: OpenStack: 3rd party testing and performance benchmarking

HKG15-204: OpenStack: 3rd party testing and performance benchmarking --------------------------------------------------- Speaker: Andrew McDermott, Clark Laughlin Date: February 10, 2015 --------------------------------------------------- ★ Session Summary ★ Status of Tempest 3rd party testing, discussion on scenarii for Rally benchmarking and hypervisor performance. -------------------------------------------------- ★ Resources ★ Pathable: https://hkg15.pathable.com/meetings/250785 Video: https://www.youtube.com/watch?v=-00rTPCYAyg Etherpad: http://pad.linaro.org/p/hkg15-204 --------------------------------------------------- ★ Event Details ★ Linaro Connect Hong Kong 2015 - #HKG15 February 9-13th, 2015 Regal Airport Hotel Hong Kong Airport --------------------------------------------------- http://www.linaro.org http://connect.linaro.org

hkg15
Java concurrency model - The Future Task
Java concurrency model - The Future TaskJava concurrency model - The Future Task
Java concurrency model - The Future Task

This document describes one of the most important topics of the Java Concurrency Model, the Future Task.

java concurrencysom-itsolutionsjava
Sword fighting with Dagger GDG-NYC Jan 2016
 Sword fighting with Dagger GDG-NYC Jan 2016 Sword fighting with Dagger GDG-NYC Jan 2016
Sword fighting with Dagger GDG-NYC Jan 2016

Dagger provides an alternative way to manage object dependencies through dependency injection. It uses compile time annotation processing to generate code that handles dependency resolution. Dagger eliminates the need to manually pass dependencies between objects. It supports features like lazy injection, providers, and scopes to control object lifecycles. The New York Times leveraged Dagger to decompose activities and share singletons like presenters across an application.

androidjava
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

Recommended for you

Unit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJSUnit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJS

In these slides we are covering Unit testing through Jasmine and Karma and for code coverage we are using Istanbul.

angularjskarmaunit testing
React lecture
React lectureReact lecture
React lecture

This document provides an overview of React and Redux concepts including: - React basics like components, props, state, and lifecycle methods - Flux architecture and how data flows through actions, dispatcher, and stores - Redux as an alternative to Flux that uses a single store updated by reducers in response to actions - Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.

reactfluxredux
AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test

A simple setup on automated unit test using Karma + Jasmine with AngularJS Link to GitHub for Source Code : https://github.com/kyaroru/IonicUnitTest

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

Recommended for you

Beyond Unit Testing
Beyond Unit TestingBeyond Unit Testing
Beyond Unit Testing

The document discusses various techniques for testing large, distributed systems beyond traditional unit testing. It recommends embracing virtualization to simulate production environments and deploying applications and tests across multiple virtual machines. Various tools are presented to help with distributed, automated testing including Cactus for in-container testing, Selenium and jsUnit for browser testing, and SmartFrog as a framework for describing, deploying and managing distributed service components and tests. The document calls for a focus on system-level tests that simulate the full production environment and integrate testing across distributed systems.

javatestingjunit
Async JavaScript Unit Testing
Async JavaScript Unit TestingAsync JavaScript Unit Testing
Async JavaScript Unit Testing

This document discusses asynchronous JavaScript unit testing. It covers what asynchronous code is, what an async test is, and different approaches for writing async tests including callbacks, promises, generators, and async/await. It also discusses using the SinonJS library for test spies, stubs and mocks. Examples of testing async code and references for further reading are provided.

jsjavascriptunit
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides

This document summarizes techniques for optimizing Angular application performance, including ahead of time compilation, lazy loading, change detection strategies, avoiding memory leaks, and server side rendering. It provides code examples and compares boot times between different configurations. The techniques can improve first meaningful paint time by up to 86% compared to the default configuration.

angular optimization
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();
}
}

Recommended for you

High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2

The document provides tips for developing high performance Ajax applications. It discusses planning for performance, measuring performance, optimizing page load speed, and optimizing JavaScript performance. Specific tips include making fewer HTTP requests, minifying assets, lazy-loading code, optimizing the initial rendering, reducing the amount of symbolic lookup in JavaScript, and optimizing regular expressions and string concatenation.

High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications

The document discusses techniques for optimizing JavaScript and AJAX performance. It recommends planning for performance from the start, measuring performance during development, reducing unnecessary code, optimizing assets, and handling long-running processes by breaking work into chunks. Specific tips include minimizing HTTP requests, leveraging caching, optimizing regular expressions, and using innerHTML for document modifications instead of DOM methods.

Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot

The document discusses techniques for improving iOS application build performance and reducing executable size in Xamarin applications. It recommends measuring build times, optimizing for the iOS simulator by avoiding rebuilds and file copying, and optimizing for iOS devices by partially linking assemblies, using the LinkerSafe attribute, and leveraging SmartLink and automatic bindings optimizations. Building configurations and deployment tradeoffs are also covered.

evolve 2013xamarin
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

Recommended for you

Release with confidence
Release with confidenceRelease with confidence
Release with confidence

This document discusses integrating test automation and code coverage for web service applications. It introduces Postman for calling web services and testing responses, and Jenkins for build automation and tracking test results over time. It then demonstrates setting up a test automation workflow using these tools on a sample Laravel application, including starting and stopping coverage collection, running tests from Postman and PHPUnit, and merging the results. Some best practices and philosophies around test automation and code coverage are also discussed.

jenkinscode coveragephp
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications

Avoid misery of working with legacy code We will see how you can add independent and isolated components to existing pages; pages that may be difficult to change React and Flux allow you to make self-contained additions that handle their own data access/persistence

reactgulpbrowserify
Fundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdfFundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdf

React is a JavaScript library for building user interfaces using components. Components are reusable pieces of code that present UI and can be functions or classes. Class components provide key functions like state that function components lack. Components break down complex UIs into independent and reusable pieces. The document then covers fundamental React concepts like getting started, component structure, state, rendering components, and the component lifecycle.

mobileappdevelopmentcompanyinchennaiandroidappdevelopmentcompanyinchennaiiosappdevelopmentcompay
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

Recommended for you

Integration tests: use the containers, Luke!
Integration tests: use the containers, Luke!Integration tests: use the containers, Luke!
Integration tests: use the containers, Luke!

Integration testing is hard, and often teams are tempted to do it in production. Testcontainers allows writing meaningful integration tests spawning Docker containers for databases, queue systems, kv-store, other services. The talk, a blend of slides and live code, will show how we are able to deploy without fear while integrating with a dozen of different datastores. Don't mock your database with fake data anymore, work with real data

integrationtddjava
React js
React jsReact js
React js

This document provides an overview of React including: - React is a JavaScript library created by Facebook for building user interfaces - It uses virtual DOM to efficiently re-render components on updates rather than entire page - React supports ES6 features and uses classes, arrow functions, and other syntax - Popular tools for React include Create React App for setting up projects and React Dev Tools for debugging

reactjsspainsingle page application
Improving the Accumulo User Experience
 Improving the Accumulo User Experience Improving the Accumulo User Experience
Improving the Accumulo User Experience

Apache Accumulo (like all distributed, data stores) provides scalability at the cost of increased complexity. While Accumulo’s algorithms for handling fault tolerance or distributing load across a cluster may always be complex to the average Accumulo user, there are parts of Accumulo that can be simplified and improved to provide a better user experience. It should be easy for users to install and run Accumulo, write a simple Accumulo client, and troubleshoot common issues. This talk will cover how the Accumulo user experience has improved with Accumulo 2.0 and the creation of the Uno and Muchos tools. The talk will end with a discussion of possible future work to make the user experience better.

accumulobig datacloud
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
Thank You
Slides: https://github.com/rangle/angular-performance-meetup

More Related Content

What's hot

Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3
Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3
Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3
Elixir Club
 
2018 05-16 Evolving Technologies: React, Babel & Webpack
2018 05-16 Evolving Technologies: React, Babel & Webpack2018 05-16 Evolving Technologies: React, Babel & Webpack
2018 05-16 Evolving Technologies: React, Babel & Webpack
Codifly
 
Alteryx SDK
Alteryx SDKAlteryx SDK
Alteryx SDK
James Dunkerley
 
Ondemand scaling-aws
Ondemand scaling-awsOndemand scaling-aws
Ondemand scaling-aws
Iegor Fadieiev
 
Performance tests with Gatling
Performance tests with GatlingPerformance tests with Gatling
Performance tests with Gatling
Andrzej Ludwikowski
 
Javascript Promises/Q Library
Javascript Promises/Q LibraryJavascript Promises/Q Library
Javascript Promises/Q Library
async_io
 
Non Blocking I/O for Everyone with RxJava
Non Blocking I/O for Everyone with RxJavaNon Blocking I/O for Everyone with RxJava
Non Blocking I/O for Everyone with RxJava
Frank Lyaruu
 
Legacy Code Kata v3.0
Legacy Code Kata v3.0Legacy Code Kata v3.0
Legacy Code Kata v3.0
William Munn
 
Reactive programming with RxJava
Reactive programming with RxJavaReactive programming with RxJava
Reactive programming with RxJava
Jobaer Chowdhury
 
Jquery- One slide completing all JQuery
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery
Knoldus Inc.
 
Concurrent Programming in Java
Concurrent Programming in JavaConcurrent Programming in Java
Concurrent Programming in Java
Ruben Inoto Soto
 
Legacy Dependency Kata v2.0
Legacy Dependency Kata v2.0Legacy Dependency Kata v2.0
Legacy Dependency Kata v2.0
William Munn
 
HKG15-204: OpenStack: 3rd party testing and performance benchmarking
HKG15-204: OpenStack: 3rd party testing and performance benchmarkingHKG15-204: OpenStack: 3rd party testing and performance benchmarking
HKG15-204: OpenStack: 3rd party testing and performance benchmarking
Linaro
 
Java concurrency model - The Future Task
Java concurrency model - The Future TaskJava concurrency model - The Future Task
Java concurrency model - The Future Task
Somenath Mukhopadhyay
 
Sword fighting with Dagger GDG-NYC Jan 2016
 Sword fighting with Dagger GDG-NYC Jan 2016 Sword fighting with Dagger GDG-NYC Jan 2016
Sword fighting with Dagger GDG-NYC Jan 2016
Mike Nakhimovich
 
Unit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJSUnit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJS
Knoldus Inc.
 
React lecture
React lectureReact lecture
React lecture
Christoffer Noring
 
AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
Chiew Carol
 
Beyond Unit Testing
Beyond Unit TestingBeyond Unit Testing
Beyond Unit Testing
Steve Loughran
 
Async JavaScript Unit Testing
Async JavaScript Unit TestingAsync JavaScript Unit Testing
Async JavaScript Unit Testing
Mihail Gaberov
 

What's hot (20)

Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3
Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3
Performance measurement methodology — Maksym Pugach | Elixir Evening Club 3
 
2018 05-16 Evolving Technologies: React, Babel & Webpack
2018 05-16 Evolving Technologies: React, Babel & Webpack2018 05-16 Evolving Technologies: React, Babel & Webpack
2018 05-16 Evolving Technologies: React, Babel & Webpack
 
Alteryx SDK
Alteryx SDKAlteryx SDK
Alteryx SDK
 
Ondemand scaling-aws
Ondemand scaling-awsOndemand scaling-aws
Ondemand scaling-aws
 
Performance tests with Gatling
Performance tests with GatlingPerformance tests with Gatling
Performance tests with Gatling
 
Javascript Promises/Q Library
Javascript Promises/Q LibraryJavascript Promises/Q Library
Javascript Promises/Q Library
 
Non Blocking I/O for Everyone with RxJava
Non Blocking I/O for Everyone with RxJavaNon Blocking I/O for Everyone with RxJava
Non Blocking I/O for Everyone with RxJava
 
Legacy Code Kata v3.0
Legacy Code Kata v3.0Legacy Code Kata v3.0
Legacy Code Kata v3.0
 
Reactive programming with RxJava
Reactive programming with RxJavaReactive programming with RxJava
Reactive programming with RxJava
 
Jquery- One slide completing all JQuery
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery
 
Concurrent Programming in Java
Concurrent Programming in JavaConcurrent Programming in Java
Concurrent Programming in Java
 
Legacy Dependency Kata v2.0
Legacy Dependency Kata v2.0Legacy Dependency Kata v2.0
Legacy Dependency Kata v2.0
 
HKG15-204: OpenStack: 3rd party testing and performance benchmarking
HKG15-204: OpenStack: 3rd party testing and performance benchmarkingHKG15-204: OpenStack: 3rd party testing and performance benchmarking
HKG15-204: OpenStack: 3rd party testing and performance benchmarking
 
Java concurrency model - The Future Task
Java concurrency model - The Future TaskJava concurrency model - The Future Task
Java concurrency model - The Future Task
 
Sword fighting with Dagger GDG-NYC Jan 2016
 Sword fighting with Dagger GDG-NYC Jan 2016 Sword fighting with Dagger GDG-NYC Jan 2016
Sword fighting with Dagger GDG-NYC Jan 2016
 
Unit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJSUnit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJS
 
React lecture
React lectureReact lecture
React lecture
 
AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
 
Beyond Unit Testing
Beyond Unit TestingBeyond Unit Testing
Beyond Unit Testing
 
Async JavaScript Unit Testing
Async JavaScript Unit TestingAsync JavaScript Unit Testing
Async JavaScript Unit Testing
 

Similar to Angular Optimization Web Performance Meetup

Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
David Barreto
 
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
 
Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot
Xamarin
 
Release with confidence
Release with confidenceRelease with confidence
Release with confidence
John Congdon
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Jeff Durta
 
Fundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdfFundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdf
StephieJohn
 
Integration tests: use the containers, Luke!
Integration tests: use the containers, Luke!Integration tests: use the containers, Luke!
Integration tests: use the containers, Luke!
Roberto Franchini
 
React js
React jsReact js
React js
Rajesh Kolla
 
Improving the Accumulo User Experience
 Improving the Accumulo User Experience Improving the Accumulo User Experience
Improving the Accumulo User Experience
Accumulo Summit
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
DayNightGaMiNg
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
DayNightGaMiNg
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
janet736113
 
React native
React nativeReact native
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
Gitlab and Lingvokot
Gitlab and LingvokotGitlab and Lingvokot
Gitlab and Lingvokot
Lingvokot
 
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterSymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
Haehnchen
 
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
 
3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf
BOSC Tech Labs
 
Plugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGemsPlugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGems
Sadayuki Furuhashi
 

Similar to Angular Optimization Web Performance Meetup (20)

Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
 
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
 
Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot
 
Release with confidence
Release with confidenceRelease with confidence
Release with confidence
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
 
Fundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdfFundamental Concepts of React JS for Beginners.pdf
Fundamental Concepts of React JS for Beginners.pdf
 
Integration tests: use the containers, Luke!
Integration tests: use the containers, Luke!Integration tests: use the containers, Luke!
Integration tests: use the containers, Luke!
 
React js
React jsReact js
React js
 
Improving the Accumulo User Experience
 Improving the Accumulo User Experience Improving the Accumulo User Experience
Improving the Accumulo User Experience
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
 
React native
React nativeReact native
React native
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Gitlab and Lingvokot
Gitlab and LingvokotGitlab and Lingvokot
Gitlab and Lingvokot
 
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterSymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
 
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
 
3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf
 
Plugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGemsPlugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGems
 

Recently uploaded

FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
karim wahed
 
Migrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS CloudMigrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS Cloud
Ortus Solutions, Corp
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
Hironori Washizaki
 
React Native vs Flutter - SSTech System
React Native vs Flutter  - SSTech SystemReact Native vs Flutter  - SSTech System
React Native vs Flutter - SSTech System
SSTech System
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
Mitchell Marsh
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
Semiosis Software Private Limited
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
Philip Schwarz
 
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
bhatinidhi2001
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
MaisnamLuwangPibarel
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
Ortus Solutions, Corp
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
Ortus Solutions, Corp
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
Mitchell Marsh
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
908dutch
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Livetecs LLC
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
avufu
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
sudsdeep
 

Recently uploaded (20)

FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
 
Migrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS CloudMigrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS Cloud
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
 
React Native vs Flutter - SSTech System
React Native vs Flutter  - SSTech SystemReact Native vs Flutter  - SSTech System
React Native vs Flutter - SSTech System
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
 
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
 

Angular Optimization Web Performance Meetup

  • 1. Small computers, big performance: Optimize your Angular
  • 2. Speakers David Barreto Solutions Architect @ Rangle.io Blog: david-barreto.com Andrew Smith Solutions Architect @ Rangle.io
  • 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 Angular Universal All the numbers shown are based on: Low end device (5x CPU slowdown) Good 3G connection (Latency: 40ms, DL: 1.5 Mbps, UL: 750 Kbps)
  • 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
  • 17. 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 {}
  • 19. 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.
  • 20. 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
  • 24. 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
  • 26. What's Memory Leak? The increase of memory usage over time
  • 27. 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); } }
  • 28. 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(); } }
  • 29. 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!
  • 30. 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); } }
  • 31. 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); } }
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 38. 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