Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: Proxy based reactive change detection #28958

Closed
anjmao opened this issue Feb 25, 2019 · 1 comment

Comments

Projects
None yet
3 participants
@anjmao
Copy link

commented Feb 25, 2019

馃殌 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.

@benlesh benlesh added the comp: core label Feb 25, 2019

@ngbot ngbot bot added this to the needsTriage milestone Feb 25, 2019

@mhevery

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

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.

@mhevery mhevery closed this Apr 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.