Tech Lead at @IMPACTdigitaldk

Lighthouse by Google has become increasingly more popular in recent years — even to the point where companies start seeing measurable increase in profit when their performance is improved.

Image for post
Image for post
Photo by Paulius Dragunas on Unsplash

Some colleagues and I thought to ourselves — why not have a way for our developers to see how their projects perform in Lighthouse. Preferably we wanted the test to run in our CI environment Azure Pipelines. We set some goals for the project, and I went to work:

Toying around with Angular Universal (server-side rendering or SSR for short) with the latest projects at IMPACT-Developers taught us a lot of things. This article focuses mainly on Angular 8+, and has been tested with versions 8 through 10, but the techniques used should work for other versions as well.

Angular Universal logo
Angular Universal logo
Angular Universal

First things first: Why Angular Universal?

All right, so you have come this far and figured out that you might benefit from Angular Universal, or maybe you are trying to figure out the same. In Angulars own words you should use SSR for three reasons:

1. Facilitate web crawlers through search engine optimization (SEO)

2. Improve…

Working with Observables from RxJS in Angular is really great, and it is also the default return type of built-in Angular services, like the HttpClient for instance, but how do you remove them from memory once they are done?

TLDR; at the bottom!

Image for post
Image for post

One thing to note when using Observables/Promises that are non-completing, unlike the HttpClient which always terminates on complete, is that they will leave a small footprint in memory if not dealt with accordingly. Sometimes you may want to have an Observable that lives for the entirety of the application cycle, like a state service, and that is…

This article will be discussing some best practices to ensure maximum performance for AngularJS (1.x). We will be going over the basics of optimizing your AngularJS templates (and some tips about animations) to gain all the possible quick wins, like reducing memory and CPU time by reducing the amount of listeners and watchers in your components. All code examples are written in TypeScript, because that is my preferred cup-of-coffee transpiler.

Image for post
Image for post

The Basics

Suppose you have a controller where the headline property is assigned only once in the $onInitlife cycle event:

import {LanguageService} from '../../utils/services/LanguageService';class BlogController implements ng.IController {
public headline: string;

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store