Aurelia JS: Detect dirty checked properties during development

March 29, 2017, (updated on October 6, 2017), 2 comments, Software 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…

Tweet about this on TwitterShare on FacebookEmail this to someoneShare on TumblrShare on LinkedIn

Tags: , ,

2 responses to “Aurelia JS: Detect dirty checked properties during development”

  1. Bigopon says:

    To complete your article, There is a plugin name aurelia compute, which does not only what you suggested, but also helps you auto declare computedFrom based on getter body. There will be cases it has to be done manually tho.

    • Rico Suter says:

      I think you are talking about aurelia-computed which dynamically parses properties and automatically defines the computedFrom. The question is whether the runtime performance hit is worth the saved development time…

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax