Efficient User

Introduction

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

Story

Web application these days are designed to be interactive. Whenever the state of application changes, the code should detect and handle the changes and reflect the changes in Web User Interface. The mechanism is named as

Change Detection

Almost, all the popular web frameworks has this mechanism.

Why you need to know about Change Detection?

Everyone who works in angular code should aware of Change Detection.

Change Detection is an integral part of application which deals with DOM updates whenever there is a change in model or data.

Performance of application also depends on Change Detection as well.

So, now you are ready to know what is Change Detection?

What is Change Detection?

Change detection is the mechanism designed to track changes in an application state and render the updated state on the screen.

Application Architecture

Normally, architecture will contain

Data or Model → Template → DOM

Data will provide the data that’s needs to be displayed, DOM will be showed in UI and template will be used to fit the data into DOM.

The binding mechanism will happen under the hood which is main part of this architecture. We are going to discuss about it only.

The process of keeping the data in UI updated similar the state of application. This mechanism is called as Change Detection.

A quick example:

https://stackblitz.com/edit/angular-binding-example-t360?file=src/app/app.component.ts

In this example, we are change variable ‘name’ value using timeOut function() after 3 seconds.

Once we have changed the variable value, the UI automatically gets refreshed without any delay.

How that happens?

That’s the work of angular framework here. It tracks the value and reflects in the UI.

Frameworks take care of synchronization between the internal state of the application and the user interfaces for us.

When should change detection happen?

As soon as the application state changes. The application state can change in following cases

• Event callback
• Network calls
• Timers

Any asynchronous call can cause a change in application state and that’s the instance where we should update our state on UI.

A simple detectChange will look like this,

let detectChanges => () => {
  if(currentState != prevState) {
    updateView(currentState);
  }
}

ZoneJS

ZoneJS is an API which has been mostly ported out from the dart language.

Behind the scenes, ZoneJS monkey patches the function. Basically, it helps to keep an eye on all async tasks, and provide an ability to call code before or after a task has been completed. The Zone API has different hooks to place your code onBeforeTask, onAfterTask, onZoneCreated, onError.

var myZoneSpec = {
  beforeTask: function () {
    console.log('Before task');
  },
  afterTask: function () {
    console.log('After task');
  }
};

var myZone = zone.fork(myZoneSpec);
myZone.run(function() {
   console.log('My task successfully got executed.')
});

// Output:
// Before task
// My task successfully got executed.
// After task

So Angular uses the power of Zones to fire change detection. What happens is, if any asynchronous call happens, ZoneJS API emits data to the onMicrotaskEmpty observable, and angular calls the detectChanges method based on the same.

Change Detection Strategy

1. Default
2. OnPush

The strategy that the default change detector uses to detect changes. When set, takes effect the next time change detection is triggered.

Default

Use the default CheckAlways strategy, in which change detection is automatic until explicitly deactivated.

OnPush

Use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). It can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.

Example

Let’s add OnPush option in the same example. Now the output will not render until there is a state of change happens in the application. You can find the example here.

Happy Coding!