Proposal: Proxy based reactive change detection

[anjmao]

🚀 feature request

Relevant Package

@angular/core
@angular/forms

Description

Currently Angular uses Zone.js to make DOM change detection on browsers events, async XHR etc.
There are quite few problems:

1. Zero progress on pushing it to browsers as a standard. On the other hand Proxy is already supported by most browsers.
2. There is no way to monkey patch async/await after they are fully supported on all browsers. Currently Zone.js is working just because async/await is converted to generators and promises. In the feature this is going to be a problem.
3. ChangeDetectionStrategy, Zone.runOutsideAngular are needed just because angular is not smart enough.

Describe the solution you'd like

Mobx and Vue showed that observable based reactive change detection is a powerful and smart thing to do. Mobx 5 introduced Proxy based observables which overcomes problems with observing dynamically added properties. The only problem is that it is not supported on IE11 as it's not polyfillable. I propose that Angular should also use Proxy and observer pattern to do change detection.

Syntax:

import { Component, observable, watch, computed } from '@angular/core';

@Component({
  selector: 'app',
  template: `<div (click)="changeTitle()">{{title}}</div>`
})
export class AppComponent {
  @observable title = 'hi';

  @computed get reversedTitle() {
       return this.title.split('').reverse().join('');
  }

  @action changeTitle() {
       this.title = 'bye';
  }
   
  @watch() titleChange() {
      console.log('new title', this.title);
  }
}

Benefits:

1. No zone.js is needed.
2. No change detection strategy OnPush is needed, by default all components can work as OnPush.
3. Useful and powerful helpers like watch and computed.
4. RxJs may not be needed at all then working with reactive forms as observables will already allow to observe changes easily.

Implementation:

This is already working when using mobx with angular. But since most 3th party libraries depends on zone.js there is no way of removing it. Built in observables and reactions would be a huge win.

Migration

Since angular checks templates during AOT compilation we could write a tool which automatically adds observable decorators properties automatically where needed.

[mhevery]

we have looked into it, and decided against Proxy. There are several issues with object identity and deep watching which we don't like. So I am going to close this as we don't have any plans to take the framework that direction.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}