Aurelia JS: Detect dirty checked properties during development

I am currently working on new single-page web application based on the Aurelia framework. To avoid performance problems, we want to completely avoid dirty checked properties and method calls. Bindings are dirty checked whenever the framework cannot use another mechanismn than regularly polling for changes. It is important to detect dirty checked properties as early as possible so that they can direcly be avoided and not too many depenencies have to be changed.

I found a simple solution: Just intercept the dirty check subscription method and print the name of the dirty checked property name to the console. In your boot.ts just add the following snippet (I’m using TypeScript here):

import * as binding from 'aurelia-binding';

if (IS_DEV_BUILD) {
    let subscribe = (<any>binding).DirtyCheckProperty.prototype.subscribe;
    (<any>binding).DirtyCheckProperty.prototype.subscribe = (context: any, callable: any) => {
        subscribe(context, callable);
        console.warn(`'${this.obj.constructor.name}.${this.propertyName}' is being dirty checked!`, this.obj);
    };
}

Now you can regularly check the browser console and fix potentially dirty checked properties and methods. Let’s look at an example. The following code shows a simple view model with a computed property:

export class PersonView {
    firstName = "";
    lastName = "";

    get fullName() {
        return this.firstName + " " + this.lastName; 
    }
}

The corresponding HTML template:

<template>
    Full name: ${fullName}
</template>

Because Aurelia does not know that fullName depends on firstName and lastName, it has to dirty check the property fullName. When loading this view in the browser, the console wil show this output:

'PersonView.fullName' is being dirty checked!

To fix this, we can import the computedFrom decorator and declare the dependent properties:

import { computedFrom } from 'aurelia-binding';

@computedFrom("firstName", "lastName")
get fullName() {
    return this.firstName + " " + this.lastName; 
}

Now, the property is no longer being dirty checked and the console warning has gone…